Flutter不更新其动画文本窗口小部件(Animated_Text_kit)

问题描述 投票:0回答:1

所以这是我从json提取数据并更新UI的主要代码。我在与问题相关的代码所在的地方放置了“ // Area of​​ Interest”注释。

 class MainScreen extends StatefulWidget {
  final curLocdata;
  MainScreen({this.curLocdata});

  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  Weather weather = Weather();

  var cityName;
  int temp;
  int temp_min;
  int temp_max;
  Icon weatherIcon;
//Area of Interest 1
  RotateAnimatedTextKit textSum;//created a widget of RotateAnimatedTextKit library.
  String st;
//Area of Interest 2
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    updateUI(widget.curLocdata);//calling update function to rebuild my UI state with new data
  }

  void updateUI(data) {
    setState(() {
      if (data == null) {
        temp = 0;
        cityName = 'Error';
        weatherIcon = Icon(Icons.error);
        return;
      }
      cityName = data['name'];
      temp = data['main']['temp'].toInt();
      temp_min = data['main']['temp_min'].toInt();
      temp_max = data['main']['temp_max'].toInt();
      var condition = data['weather'][0]['id'];
      weatherIcon = weather.getIcon(condition);
      textSum = weather.getMessage(temp);//Area of Interest 3
      st = weather.subtext(condition);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: SafeArea(
          child: Column(
            children: <Widget>[
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    FlatButton(
                      onPressed: () async {
                        updateUI(await Network().getData());
                      },
                      child: Icon(
                        FontAwesomeIcons.locationArrow,
                      ),
                    ),
                    SizedBox(
                      width: 180.0,
                      child: TextLiquidFill(
                        waveDuration: Duration(seconds: 3),
                        loadDuration: Duration(seconds: 10),
                        text: 'OpenWeather',
                        waveColor: Colors.red,
                        boxBackgroundColor: Color(0xFF1B1B1D),
                        textStyle: TextStyle(
                          fontSize: 30.0,
                          fontWeight: FontWeight.bold,
                          fontFamily: 'Source Sans Pro',
                        ),
                        boxHeight: 50.0,
                      ),
                    ),
                    FlatButton(
                      onPressed: () async {
                        String SName = await Navigator.push(context,
                            MaterialPageRoute(builder: (context) {
                          return Search();
                        }));
                        if (SName != null) {
                          updateUI(await Network().getDataName(
                              SName)); 
                        }
                      },
                      child: Icon(
                        Icons.add,
                        color: Colors.white,
                        size: 40,
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                  padding: EdgeInsets.fromLTRB(50, 50, 50, 0),
                  child: Row(
                    children: <Widget>[
                      SizedBox(
//                margin: EdgeInsets.fromLTRB(0, 50, 260, 0),
                        child: TypewriterAnimatedTextKit(
                          totalRepeatCount: 200,
                          isRepeatingAnimation: true,
                          speed: Duration(milliseconds: 700),
                          text: [cityName,],
                          textAlign: TextAlign.left,
                          textStyle: TextStyle(
                            fontSize: 20,
                            fontFamily: 'Source Sans Pro',
                          ),
                        ),
                      ),
                    ],
                  )),
              Expanded(
                flex: 9,
                child: Container(
                  margin: EdgeInsets.fromLTRB(50, 30, 50, 80),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Expanded(
                        flex: 2,
                        child: Padding(
                          padding: EdgeInsets.only(left: 20),
                          child: Text(
                            '$temp°',
                            style: TextStyle(
                              fontSize: 80,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Source Sans Pro',
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Padding(
                          padding: EdgeInsets.only(left: 20),
                          child: Text(
                            st,
                            style: TextStyle(
                                fontSize: 30,
                                fontFamily: 'Source Sans Pro',
                                color: Colors.grey[500]),
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.fromLTRB(20, 0, 0, 50),
                        child: Container(
                          child: textSum,//Used this textSum to show my animated text. problem
Area of Interest 4
                        ),
                      ),
                      Expanded(
                        child: SizedBox(
                          //width: double.infinity,
                          //height: 100,
                          child: Divider(
                            color: Colors.red,
                          ),
                        ),
                      ),
                      Row(
                        children: <Widget>[
                          Expanded(
                            child: Padding(
                              padding: EdgeInsets.fromLTRB(20, 0, 0, 38),
                              child: Text(
                                '$temp_min° - $temp_max°',
                                style: TextStyle(
                                  fontSize: 20,
                                  color: Colors.grey[500],
                                  fontFamily: 'Source Sans Pro',
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: EdgeInsets.fromLTRB(20, 0, 0, 20),
                              //padding: const EdgeInsets.all(8.0),
                              child: AvatarGlow(
                                endRadius: 30.0, //required
                                child: Material(
                                  //required
                                  elevation: 0.0,
                                  shape: CircleBorder(),
                                  child: CircleAvatar(
                                      //backgroundColor: Colors.grey[100],
                                      child: weatherIcon
                                      // radius: 40.0,
                                      //shape: BoxShape.circle
                                      ),
                                ),
                              ),
                            ),
                          )
                        ],
                      )`enter code here`
                    ],
                  ),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Color(0xFF0C0C0C),
                  ),
                ),
              ),

现在根据情况从我要返回RotateAnimatedTextKit小部件的地方返回weather.dart文件

    class Weather{

//This return RotateAnimatedTextKit which is then held by textSum and is put as a child inside a container in MainScreen

  RotateAnimatedTextKit getMessage(int temp) {
    if (temp > 25) {
      return RotateAnimatedTextKit(
          isRepeatingAnimation: true,
          totalRepeatCount: 200,
          transitionHeight: 40,
          text: ['It\'s 🍦','time and','drink plenty','of water'],
          textStyle: TextStyle(fontSize: 30.0, fontFamily: "Source Sans Pro", color: Colors.red),
          textAlign: TextAlign.start,
          alignment: AlignmentDirectional.topStart // or Alignment.topLeft
      );


    } else if (temp > 20) {
      return RotateAnimatedTextKit(
          isRepeatingAnimation: true,
          totalRepeatCount: 200,
          transitionHeight: 50,
          text: ['Time for','shorts','👕','but keep','some warm','clothes handy'],
          textStyle: TextStyle(fontSize: 30.0, fontFamily: "Source Sans Pro", color: Colors.red),
          textAlign: TextAlign.start,
          alignment: AlignmentDirectional.bottomStart// or Alignment.topLeft
      );

    } else if (temp < 10) {
      return RotateAnimatedTextKit(
          isRepeatingAnimation: true,
          totalRepeatCount: 200,
          transitionHeight: 50,
          text: ['You\'ll need','a 🧣','and','a 🧤','and a hot', 'soup and turkey'],
          textStyle: TextStyle(fontSize: 30.0, fontFamily: "Source Sans Pro", color: Colors.red),
          textAlign: TextAlign.start,
          alignment: AlignmentDirectional.bottomStart // or Alignment.topLeft
      );

    } else {
      return RotateAnimatedTextKit(
          isRepeatingAnimation: true,
          transitionHeight: 50,
          totalRepeatCount: 200,
          text: ['Bring a','🧥','just in case','and also avoid', 'cold breeze','and cold drinks'],
          textStyle: TextStyle(fontSize: 30.0, fontFamily: "Source Sans Pro", color: Colors.red),
          textAlign: TextAlign.start,
          alignment: AlignmentDirectional.bottomStart // or Alignment.topLeft
      );

    }
  }

事实是,即使条件不同,UI也不会得到更新。那么有什么解决方案为什么小部件树没有更新?但是它仅运行默认文本。 cityName下的TextLiquidFill也不会更新。

android flutter dart flutter-layout flutter-dependencies
1个回答
0
投票

您可以使用WidgetsBinding.instance.addPostFrameCallback有关详细信息,您可以参考https://www.didierboelens.com/faq/week2/

代码段

@override
void initState(){
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_){
    updateUI(widget.curLocdata);
  });
}
© www.soinside.com 2019 - 2024. All rights reserved.