如何在GridView加载时在Scaffold中显示CircularProgressIndicator？

Question

我想在容器的中心显示一个单一的圆形进度指示器，直到所有的图像从互联网上加载。但它是不工作的。我尝试了很多方法。

class Category extends StatefulWidget {
  static String screenid = "Category_screen";
  @override
  _CategoryState createState() => _CategoryState();
}

class _CategoryState extends State<Category> {
  @override
  Widget build(BuildContext context) {
    if(CategoryGridItems == null){
      return Center(
        child: CircularProgressIndicator(),
      );
    }
    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Color(0xff1f4037), Colors.white],
                  begin: Alignment.topCenter,
                  end: Alignment.center),
            ),
            height: 300.0,
          ),
          SingleChildScrollView(
            child: Container(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: 60.0,
                  ),
                  // Add Horizontal scroll here
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 5.0),
                    height: 70.0,
                    color: Colors.redAccent,
                  ),
                  Container(
                    child: GridView.count(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      crossAxisCount: 2,
                      crossAxisSpacing: 4,
                      mainAxisSpacing: 8,
                      childAspectRatio: 1.8,
                      padding:
                          EdgeInsets.symmetric(horizontal: 8.0, vertical: 25.0),
                      children: <Widget>[
                        CategoryGridItems(
                          image: 'https://i.ibb.co/fxfWjyn/custom-1-2x.jpg',
                          ontapped: () {
                            Navigator.push(context,
                                MaterialPageRoute(builder: (context) {
                              return CategoryGrid(
                                label: 'nature',
                                colour: Color(0xffba2828),
                                displaytext: 'Nature',
                              );
                            }));
                          },
                        ),
                        CategoryGridItems(
                          image: 'https://i.ibb.co/JsLpD25/custom-2-2x.jpg',
                          ontapped: () {
                            Navigator.push(context,
                                MaterialPageRoute(builder: (context) {
                              return CategoryGrid(
                                label: 'dark_collection',
                                colour: Color(0xffba2828),
                                displaytext: 'Dark',
                              );
                            }));
                          },
                        ),
                        CategoryGridItems(
                          image: 'https://i.ibb.co/GvrzW7R/custom-8-2x.jpg',
                          ontapped: () {
                            Navigator.push(context,
                                MaterialPageRoute(builder: (context) {
                              return CategoryGrid(
                                label: 'abstract_collection',
                                colour: Color(0xff646def),
                                displaytext: 'Abstract',
                              );
                            }));
                          },
                        ),
                        CategoryGridItems(
                          image: 'https://i.ibb.co/3mJ6c0J/custom-3-2x.jpg',
                          ontapped: () {
                            Navigator.push(context,
                                MaterialPageRoute(builder: (context) {
                              return CategoryGrid(
                                label: 'food_collection',
                                colour: Color(0xff646def),
                                displaytext: 'Food',
                              );
                            }));
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

class CategoryGridItems extends StatelessWidget {
  final String image;
  final Function ontapped;

  CategoryGridItems({
    @required this.image,
    @required this.ontapped,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: GestureDetector(
          onTap: ontapped,
          child: ClipRRect(
            borderRadius: BorderRadius.all(
              Radius.circular(8.0),
            ),
            child: Image.network(
              image,
            ),
          ),
        ),
      ),
    );
  }
}

我已经给 Loading 容器内，但它显示在容器内。我不想显示一个空白的屏幕，而是显示一个圆形的进度指示器。

Answer 1

这不是一个CircularProgressIndicator，但可以考虑使用FadeInImage Widget。

FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://picsum.photos/250?image=9',
);

要显示一个网络图像的CircularProgressIndicator，你需要用HTTP请求来工作。 IMO你应该节省你的时间，使用上面的代码（你可能偶尔会得到4xx错误，但大多数时候图像最终应该加载。 如果没有应该仍然是确定的，因为它不会完全崩溃你的应用程序）。)