Flutter - 在使用 Future 加载本地 JSON 时设置加载动画

Question

我正在尝试在加载本地 JSON 文件时实现加载动画逻辑（可能是循环进度指示器）。我正在为此使用颤振的未来，我找不到合适的方法。

我有一个对象列表[id: int, country: String, state: String]，我在卡片中一次显示一个对象，最终结果应该是第一次循环进度

到目前为止，这是我的代码：

class _BottomCardsState extends State<BottomCards>{
  Future<Null> getAllData() async{
    var response = await DefaultAssetBundle.of(context).loadString('assets/json/data.json');
    var decodedData = json.decode(response);
    setState(() {
      for(Map element in decodedData){
        mDataList.add(Country.fromJson(element));
      }
    });
  }

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

  int index = mDataList.first.id;

  @override
  Widget build(BuildContext context) {
    int n = mDataList[index].id;
    return Container(
      child: Material(
        color: Colors.transparent,
        child: Card(
          margin: EdgeInsets.symmetric(horizontal: 10.0),
          elevation: 6.0,
          child: Container(
            alignment: Alignment.topCenter,
            padding: EdgeInsets.symmetric(horizontal: 12.0,),
            child: Column(
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Column(                  
                      children: <Widget>[
                        Text(mDataList[index].country + ' ' + mDataList[index].state),
                      ],
                    ),
                  ],
                ),                  
                SizedBox(height: 8.0,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Chip(
                      backgroundColor: secondaryDark,
                      label: Text('Info number: $n'),
                    ),
                  ],
                ),
                SizedBox(height: 6.0),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

尝试使用 FutureBuilder。它应该看起来像这样：

class _BottomCardsState extends State<BottomCards> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          var decodedData = json.decode(snapshot.data);
          for(Map element in decodedData){
            mDataList.add(Country.fromJson(element));
          }
          int index = mDataList.first.id;
          int n = mDataList[index].id;

          return Container(
            child: Material(
              color: Colors.transparent,
              child: Card(
                margin: EdgeInsets.symmetric(horizontal: 10.0),
                elevation: 6.0,
                child: Container(
                  alignment: Alignment.topCenter,
                  padding: EdgeInsets.symmetric(
                    horizontal: 12.0,
                  ),
                  child: Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          Column(
                            children: <Widget>[
                              Text(mDataList[index].country + ' ' + mDataList[index].state),
                            ],
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 8.0,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          Chip(
                              backgroundColor: secondaryDark,
                              label: Text('Info number: $n'),
                              ),
                        ],
                      ),
                      SizedBox(height: 6.0),
                    ],
                  ),
                ),
              ),
            ),
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

Answer 2

这是我的解决方案

     class _BottomCardsState extends State<BottomCards>{
         bool isLoadingEnded=false;
          Future<Null> getAllData() async{
            await DefaultAssetBundle.of(context).loadString('assets/json/data.json').then((response){
            var decodedData = json.decode(response);
            isLoadingEnded=true;
            setState(() {
              for(Map element in decodedData){
                mDataList.add(Country.fromJson(element));
              }
            });
          })

          }

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

          int index = mDataList.first.id;

          @override
          Widget build(BuildContext context) {
            int n = mDataList[index].id;
            return isLoadingEnded ? Container(
              child: Material(
                color: Colors.transparent,
                child: Card(
                  margin: EdgeInsets.symmetric(horizontal: 10.0),
                  elevation: 6.0,
                  child: Container(
                    alignment: Alignment.topCenter,
                    padding: EdgeInsets.symmetric(horizontal: 12.0,),
                    child: Column(
                        Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Column(                  
                              children: <Widget>[
                                Text(mDataList[index].country + ' ' + mDataList[index].state),
                              ],
                            ),
                          ],
                        ),                  
                        SizedBox(height: 8.0,),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          mainAxisSize: MainAxisSize.max,
                          children: <Widget>[
                            Chip(
                              backgroundColor: secondaryDark,
                              label: Text('Info number: $n'),
                            ),
                          ],
                        ),
                        SizedBox(height: 6.0),
                      ],
                    ),
                  ),
                ),
              ),
            ) :  Center(child:new CircularProgressIndicator());
          }
        }