【问题标题】:Unable to show Circular progress indicator when FutureBuilder is loading dataFutureBuilder 加载数据时无法显示循环进度指示器
【发布时间】:2019-06-04 07:28:43
【问题描述】:

我试图在加载 Future Builder 中的数据时显示循环进度指示器,我尝试了两种方法来添加它,但是它们都不起作用。我怎样才能达到预期的效果?

我的代码



class _MyHomePageState extends State<MyHomePage>{

  @override MyHomePage get widget => super.widget;

 @override
  Widget build(BuildContext context){

//To show the ListView inside the Future Builder
     Widget createTasksListView(BuildContext context, AsyncSnapshot snapshot) {
     var values = snapshot.data;
     return  ListView.builder(
       itemCount: values == null ? 0 : values.length,
       itemBuilder: (BuildContext context, int index) {

         return values.isNotEmpty ? Ink(
          .....
         )  :  new CircularProgressIndicator();   //TRIED TO ADD CIRCULAR INDICATOR HERE 
       },
     );
   }


//Future Builder widget 
   Column cardsView = Column(
      children: <Widget>[...
        Expanded(
          child: FutureBuilder(
              future: //API CALL,
              initialData: [],
              builder: (context, snapshot) {
                if (!snapshot.hasData) return Center(child: CircularProgressIndicator());  //CIRCULAR INDICATOR
                return createTasksListView(context, snapshot);
              }),
        ),
      ],
   );
   return Scaffold(
      ...);
 }
}

【问题讨论】:

    标签: flutter


    【解决方案1】:

    尝试:

            FutureBuilder(
                  future: //API CALL,
                  initialData: [],
                  builder: (context, snapshot) {
                    if (!snapshot.hasData) 
                        return Center(child: CircularProgressIndicator());  //CIRCULAR INDICATOR
                    else
                        return createTasksListView(context, snapshot);
                  }),
            ),
    

    当future的值是一个空列表,也就是你的initialData时,你正在渲染一个有0个项目的ListView,所以你不能在它的itemBuilder中渲染一个CircularProgressIndicator。

    【讨论】:

      猜你喜欢
      • 2020-02-10
      • 1970-01-01
      • 2020-09-04
      • 1970-01-01
      • 2017-01-11
      • 2021-05-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多