如何在方法调用完成后设置状态

Question

我正在尝试更改isSyncing的状态，然后在await api.fetchProducts（）完成后使用set state重建widget。 api.fetchProducts（）是我用来从API获取然后使用sqflite存储本地的。

我尝试使用cloudSyn.then（）但它不会工作。

class SyncProgress extends StatefulWidget {

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

class _SyncProgressState extends State<SyncProgress> {
  bool isSyncing = true;
  String progressString = 'Syncing your data....';

  final db = DatabaseHelper();
  final bloc = ProductBloc();

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

  }

  Future cloudSync() async{
    await api.fetchProducts();


  //Here is the challenge

    setState(() {
        isSyncing = false; 
        progressString = 'Syncing complete....';
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isSyncing ? _indicateProgress()  : _syncDone()
    );
  }

 Widget _indicateProgress(){
   return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(),
            SizedBox(height: 50.0,),
            Text(progressString, style: TextStyle(
              fontSize: 16.0,

            ),),
          ],
        ),
      );
 }

 _syncDone(){
   print('Syncing completed');
  //return Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage()));

 }
}

Answer 1

使用then强制setState函数仅在fetchProducts()完成后执行：

 Future cloudSync() async{
   await api.fetchProducts().then(
     setState(() {
       isSyncing = false; 
       progressString = 'Syncing complete....';
     });
   );
 }