如何在flutter中加载主小部件之前显示加载小部件？

Question

我有一个包含大量内容（如图像、文本等）的小部件，这使得它在 Flutter 应用程序中变得很重，但是当应用程序导航到具有复杂小部件的小部件时，该应用程序面临卡顿，因为小部件太大而无法使用瞬间加载，

我想显示简单的 lite 加载小部件，直到加载原始小部件，从而从应用程序中删除卡顿并启用小部件的延迟加载，

如何在颤振中实现这一目标？

编辑：- 明确地说，我没有从 Internet 加载任何数据，这不会导致延迟。为了从 Internet 加载数据，我们有FutureBuilder. 这里我的小部件本身很重，加载需要一些时间。

如何在加载主小部件时显示正在加载的小部件。

Answer 1

首先你必须创建一个变量来保持状态

bool isLoading = true; //this can be declared outside the class 

然后您可以根据此变量返回加载小部件或任何其他小部件

return isLoading ? 
  CircularProgressIndicator() //loading widget goes here
  : Scaffold() //otherwidget goes here

您可以使用setState方法在这两种状态之间切换

加载数据后，请使用以下代码

setState(() {
        isLoading = false;
      });

示例代码

class SampleClass extends StatefulWidget {
  SampleClass({Key key}) : super(key: key);

  @override
  _SampleClassState createState() => _SampleClassState();
}

bool isLoading = true; // variable to check state

class _SampleClassState extends State<SampleClass> {
  loadData() {
    //somecode to load data
    setState(() {
      isLoading = false;//setting state to false after data loaded
    });
  }

  @override
  void initState() {
    loadData(); //call load data on start
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: isLoading ? //check loadind status
      CircularProgressIndicator() //if true
      :Container(), //if false
    );
  }
}