使容器宽度与文本一样长

时间:2019-08-28 11:51:17

标签: flutter dart flutter-layout

我有一个AnimatedContainer,其中包含文本,并且其宽度在单击时具有动画效果。有没有办法使它与孩子的文字一样大?

class _IconTextAnimatedButtonState extends State<IconTextAnimatedButton> {

  double opacity = 0;
  bool isActive = false;
  double containerWidth = 55.0;

  animateIt() {
    setState(() {
      opacity == 0.0 ? opacity = 1.0 : opacity = 0.0;
      opacity == 0.0 ? containerWidth = 55.0 : containerWidth = MediaQuery.of(context).size.width;
      containerWidth == MediaQuery.of(context).size.width ? isActive = true : isActive = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => animateIt(),
      child: AnimatedContainer(
          height: 50.0,
          width: containerWidth,
          padding: EdgeInsets.all(15.0),
          decoration: BoxDecoration(
              color: Colors.orange
          ),
          duration: Duration(milliseconds: 100),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Flexible(
                child: Visibility(
                  maintainSize: isActive,
                  maintainAnimation: true,
                  maintainState: true,
                  visible: isActive,
                  child: AnimatedOpacity(
                    duration: Duration(milliseconds: 100),
                    opacity: opacity,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 5.0),
                      child: Text("this is a long text with this be a problem?"),
                    ),
                  ),
                ),
              ),
            ],
          )
      ),
    );
  }

如果我使用RowAnimatedContainer包裹到mainAxisSize: MainAxisSize.min上,它可以按我的意愿工作,但它没有动画吗?

0 个答案:

没有答案