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

  loadData() async {
    await Future.delayed(Duration(seconds: 2));
    final catalogJson =
        await rootBundle.loadString("assets/files/catalog.json");
    final decodedData = jsonDecode(catalogJson);
    var productsData = decodedData["products"];
    CatalogModel.items = List.from(productsData)
        .map<Item>((item) => Item.fromMap(item))
        .toList();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Catalog App"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: (CatalogModel.items != null && CatalogModel.items.isNotEmpty)
            ? ListView.builder(
                itemCount: CatalogModel.items.length,
                itemBuilder: (context, index) => ItemWidget(
                  item: CatalogModel.items[index],
                ),
              )
            : Center(
                child: CircularProgressIndicator(),
              ),
      ),
      drawer: MyDrawer(),
    );
  }

7

Im trying to display the CircularProgressIndicator in my flutter app before data is loaded, but it is not rendering... I have also tried to set background color and color..but it doesnt work..

CodePudding user response：

Please refer to the handy tools that flutter provides: The Future Builder.

This handles loading async data, displaying it once loaded, and even showing a loading widget while it's not (yet).

CodePudding user response：

If my understanding is correct, you can solve the problem like this:

return FutureBuilder(
      future: _loadData(),
      //future: Future.delayed(Duration(seconds: 2)),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting)
         return Center(
            child: CircularProgressIndicator(),
          );
        else
          return Main();    /
      }
    );