Flutter 在构建复杂小部件时显示加载指示器答案

【问题标题】：Flutter show Loading Indicator while building Complex WidgetFlutter 在构建复杂小部件时显示加载指示器
【发布时间】：2020-05-12 14:10:59
【问题描述】：

我是 Flutter 的初学者。

目前在我的应用程序中，我正在开发一个“报告屏幕”，其中包括像Timeseries chart 这样的复杂小部件。

我注意到，当我进入“报告屏幕”时，该屏幕在应用程序上出现大约需要 3 秒。当我通过从屏幕上删除 Timeseries chart 小部件进行实验时，该应用程序的响应速度最好，并立即显示在屏幕上。

因此，我想将此Timeseries Chart Widget 构建过程移至异步，并在构建小部件时显示加载指示器。通过这种方式，我认为屏幕可以立即出现，因为一开始没有繁重的小部件构建过程。

我已经尝试了以下方法，但没有成功。

// Chart Widget Building Method    
Future<Widget> _buildChart(BuildContext context) async {
        return Card(
          elevation: 3.0,
          margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 4.0),
          child: Container(
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(top: 8.0),
                  child: Row(
                    children: <Widget>[
                      _buildPeriodicButton(context, '1D'),
                      _buildPeriodicButton(context, '1W'),
                      _buildPeriodicButton(context, '1M'),
                      _buildPeriodicButton(context, '3M'),
                    ],
                  ),
                ),
                Padding(
                  padding:
                      const EdgeInsets.symmetric(vertical: 16.0, horizontal: 12.0),
                  child: ReportChart(data: _chartData),
                ),
              ],
            ),
          ),
        );
      }

// Screen build Method
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildAppBar(context),
      backgroundColor: CustomColors.GreyBackground,
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(10.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              _buildFilters(context),
              FutureBuilder(
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.none &&
                      snapshot.hasData == null) {
                    return Container(
                      child: Center(
                        child: Text("Loading"),
                      ),
                    );
                  } else {
                    return snapshot.data;
                  }
                },
                future: _buildChart(context),
              ),
            ],
          ),
        ),
      ),
    );
  }

提前感谢您的建议和解决方案。

【问题讨论】：

能否分享一下您的 ReportChart 小部件和 _buildPeriodicButton 函数
我在这里面临同样的问题。你成功了吗？谢谢
同样的问题@user2565057 你找到解决方案了吗

标签： flutter

【解决方案1】：

FutureBuilder(
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return snapshot.data;
    }

    return Container(
      child: Center(
        child: Text("Loading"),
      ),
    );
  },
  future: _buildChart(context),
),

【讨论】：

我正在尝试返回 LisView.builder 并返回错误 can't assign listview to future<dynamic> 你能帮忙吗
@bihireboris 你能用 dartpad 显示你的代码吗？

【解决方案2】：

我使用了 fluttertoast: ^8.0.8 包，如下所示。如果需要，您可以将吐司长度设置为更长的持续时间。 FutureBuilder 在您的小部件本身需要很长时间渲染的情况下没有用。 FutureBuilder 在获取小部件所需的数据时很有用。

@override

Widget build(BuildContext context) {
    Fluttertoast.showToast(
      msg: 'Loading...'
    );
    //Code for your complex widget here
  }

【讨论】：