Question

我是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),
              ),
            ],
          ),
        ),
      ),
    );
  }

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

Answer 1

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

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

在构建Complex Widget时Flutter显示正在加载指示器

1 个答案: