避免AnimatedContainer上的像素溢出

时间:2019-05-08 08:38:29

标签: animation flutter containers overflow pixel

我有这个AnimatedContainer,它以圆形开始,然后改变状态就变成一个矩形。最初,它内部只有一个居中图标,但是当容器展开时,图标附近会弹出一个文本。问题在于,当容器展开时,文本要比其容器大,因此会发生像素溢出。我该如何解决?

Widget _animatedButton() {
    return GestureDetector(
      child: AnimatedContainer(
        duration: Duration(milliseconds: 300),
        height: MediaQuery.of(context).size.height * 0.08,
        width: _searchOpen
            ? MediaQuery.of(context).size.width * 0.5
            : MediaQuery.of(context).size.height * 0.08,
        decoration: new BoxDecoration(
          gradient: _searchOpen
              ? LinearGradient(colors: greenGradient)
              : RadialGradient(colors: greenGradient),
          borderRadius: _searchOpen
              ? BorderRadius.circular(16)
              : BorderRadius.circular(
                  MediaQuery.of(context).size.height * 0.04),
          boxShadow: <BoxShadow>[
            new BoxShadow(
              color: Colors.black12,
              blurRadius: 10.0,
              offset: const Offset(0, 10.0),
            )
          ],
        ),
        child: Row(
          children: <Widget>[
            Expanded(child: Container()),
            Center(
              child: Icon(
                Icons.search,
                color: Colors.white,
                size: MediaQuery.of(context).size.height * 0.05,
              ),
            ),
            _searchOpen
                ? new SizedBox(width: MediaQuery.of(context).size.width * 0.02)
                : Container(),
            _searchOpen
                ? new Text(
                    "Search",
                    style: TextStyle(
                        color: Colors.white,
                        fontFamily: "LazyDog",
                        fontSize: MediaQuery.of(context).size.width * 0.1),
                  )
                : Container(),
            new Expanded(child: Container()),
          ],
        ),
      ),
      onTap: () {
        setState(() {
          _searchOpen ? _searchOpen = false : _searchOpen = true;
        });
      },
    );
  }

0 个答案:

没有答案