Flutter FutureBuilder 覆盖 AnimatedSwitcher

Question

大家。我在单击按钮时有一个翻转动画（效果很好）。但是，当我用

futurebuilder

包裹它时，我的小部件将在单击按钮后以新状态显示，没有动画（状态是正确的）。这真的让我很困惑。我的动画消失了！动画完成后是否有办法更新小部件？

这是我的代码

return FutureBuilder(
    future: _UIsetting(),
    builder: (BuildContext context, AsyncSnapshot<void> snapshot){
      if(snapshot.connectionState==ConnectionState.done){
        return Container(

                //flip animation
                AnimatedSwitcher(
                  duration: const Duration(seconds: 1),
                  transitionBuilder: (Widget widget, Animation<double> animation){
                    final rotateAnim = Tween(begin: pi, end: 0.0).animate(animation);
                    return AnimatedBuilder(
                      animation: rotateAnim,
                      child: widget,
                      builder: (context, widget) {
                        final isUnder = (ValueKey(flip) != widget);
                        final value = isUnder ? min(rotateAnim.value, pi / 2) : rotateAnim.value;
                        return Transform(
                          transform: Matrix4.rotationY(value),
                          alignment: Alignment.center,
                          child: widget,
                        );
                      },
                    );
                  },
                  child: flip?
                  Container(
                    key: const ValueKey(0),
                    width: MediaQuery.of(context).size.width,
                    margin: const EdgeInsets.symmetric(horizontal: 30),
                    child: Image.asset('assets/work1.png'),
                  ):
                  Container(
                    key: const ValueKey(1),
                    width: MediaQuery.of(context).size.width,
                    margin: const EdgeInsets.symmetric(horizontal: 30),
                    child: Image.asset('assets/work2.png'),
                  ),
                ),

                //determine clicking which button(if T, click Button1)
                flip?
                Row(
                  children: [
                    ElevatedButton(
                        onPressed: (){
                          setState(() {
                            _flipCheck();
                          });
                        },
                        child:Text("button1"),
                    ),
                    ElevatedButton(
                        onPressed: (){},                              
                        child:Text("button2"),
                    ),
                  ],                  
                 ):
                Row(
                  children: [
                    ElevatedButton(
                        onPressed: (){},                    
                        child:Text("button1"),
                    ),
                    ElevatedButton(
                         onPressed: (){
                          setState(() {
                            _flipCheck();
                          });
                        },                              
                        child:Text("button2"),
                    ),
                  ],                  
                 )
        );
      }else{
        return const CircularProgressIndicator();
      }
    }
);

这里是为了

_UIsetting

Future _UIsetting() async{
SharedPreferences prefs = await SharedPreferences.getInstance();

flip=prefs.getBool('flip')!;  //condition
print("_UIsetting flip $flip");
id=prefs.getString("ID").toString();  //user id
}

@override
void initState() {
  super.initState();
  _UIsetting();
}

这里是为了

_flipCheck

Future _flipCheck() async{

SharedPreferences prefs = await SharedPreferences.getInstance();
now=DateTime.now().millisecondsSinceEpoch;

if((now-previous)~/3600000>=7){
  //update time (in local)
  flip=true;
  prefs.setBool('flip', true);

  //upload data (in DB)
  _upload();
}else{
  flip=false;
  prefs.setBool('flip', false);
}

}

所有代码都在

class myappState extends State<myapp>{}

中。我非常感谢您的所有反馈。

Answer 1

在 future 构建器中使用 future 函数是一种不好的用法。当每次运行构建未来函数的小部件树时，您的异步任务会再次发生。因此，您必须在类中创建一个 Future 对象，并使用您的 future 函数在 initState 中为其赋值。

在类中创建未来对象：

Future<String>? idFuture;

评估未来值，而不是仅调用函数：

@override
void initState() {
  super.initState();
  idFuture = _UIsetting();
}

make _IUSetting 函数返回 String 的 Future:

Future<String> _UIsetting() async {
  ...
  return prefs.getString("ID").toString();  //user id
}

使用 FutureBuilder 时，使用 future 对象创建 FutureBuilder：

FutureBuilder<String>(
  future: ,
  builder: (_, snapshot) {
    if (snapshot.hasData) {
      final String id = snapshot.data; // your id variable here
    }
  }
),

我无法运行你的代码，所以我不确定解决方案。但无论如何，Future 构建器中 future 的使用应该是这样的。