如何动画包装小部件答案

【问题标题】：How to animate wrap widget如何动画包装小部件
【发布时间】：2020-04-11 19:08:41
【问题描述】：

有什么方法可以为 wrap 小部件设置动画吗？
当我更新新段落进行测试时，她的实际高度正在变化
我的完整代码

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomePageCardOne extends StatefulWidget {
  @override
  _HomePageCardOneState createState() => _HomePageCardOneState();
}

class _HomePageCardOneState extends State<HomePageCardOne> {
  String image="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Khajuraho_-_Kandariya_Mahadeo_Temple.jpg/1200px-Khajuraho_-_Kandariya_Mahadeo_Temple.jpg";
  String dummyText="Lorem Ipsum is simply dummy text of the printing and typesetting industry. scrambled it to make a type specimen book.";

  @override
  Widget build(BuildContext context) {
    return  AnimatedContainer(duration: Duration(seconds: 10),child: Wrap(
      children: <Widget>[  Container(
        color: Color.fromRGBO(251,246,236,1),
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text("Animate please"),
              onPressed: ()=> updateText()
            ),

            Image.network(image,height: 150,fit: BoxFit.fill,width: MediaQuery.of(context).size.width,),
            Align(
              child: Padding(
                padding: const EdgeInsets.only(top: 8,left: 8,bottom: 2),
                child: Text("Temple Name",style: TextStyle(color: Colors.blue,fontSize: 22,fontWeight: FontWeight.bold),),
              ),
              alignment: Alignment.centerLeft,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 8,bottom: 4,top: 2),
              child: Text(dummyText),
            ),
            GestureDetector(
              onTap: ()=>updateText(),
              child: Text("press me"),
            )

          ],
        ),
      )],
    ),);
  }
  void updateText() {

    setState(() {
      dummyText+=dummyText;
    });
  }
}

【问题讨论】：

您希望如何制作动画？
现在当我更新文本时，它只是显示附加的新文本，但我需要新文本将带有任何类型的动画
什么类型的动画？任何？如果是这样，请使用通用AnimatedSwitcher
就像放大或缩小新添加的文本

标签： flutter flutter-animation

【解决方案1】：

这应该可行。

   import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(body: HomePageCardOne()),
    );
  }
}

class HomePageCardOne extends StatefulWidget {
  @override
  _HomePageCardOneState createState() => _HomePageCardOneState();
}

class _HomePageCardOneState extends State<HomePageCardOne> {
  String image =
      "https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Khajuraho_-_Kandariya_Mahadeo_Temple.jpg/1200px-Khajuraho_-_Kandariya_Mahadeo_Temple.jpg";
  String dummyText =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. scrambled it to make a type specimen book.";
  Widget m = Text(
      '"Lorem Ipsum is simply dummy text of the printing and typesetting industry. scrambled it to make a type specimen book."',
      key: UniqueKey());

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 10),
      child: Wrap(
        children: <Widget>[
          Container(
            color: Color.fromRGBO(251, 246, 236, 1),
            child: Column(
              children: <Widget>[
                RaisedButton(
                    child: Text("Animate please"),
                    onPressed: () => updateText()),
                Image.network(
                  image,
                  height: 150,
                  fit: BoxFit.fill,
                  width: MediaQuery.of(context).size.width,
                ),
                Align(
                  child: Padding(
                    padding: const EdgeInsets.only(top: 8, left: 8, bottom: 2),
                    child: Text(
                      "Temple Name",
                      style: TextStyle(
                          color: Colors.blue,
                          fontSize: 22,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                  alignment: Alignment.centerLeft,
                ),
                Padding(
                    padding: const EdgeInsets.only(left: 8, bottom: 4, top: 2),
                    child: AnimatedSwitcher(
                      duration: Duration(seconds: 3),
                      child: m,
                    )),
                GestureDetector(
                  onTap: () => updateText(),
                  child: Text("press me"),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  void updateText() {
    setState(() {
      dummyText += dummyText;
      m = Text(dummyText, key: UniqueKey());
    });
  }
}

【讨论】：