json - 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),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

标签： jsonflutter

Answer 1

这是我的解决方案

     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());
          }
        }