Flutter 中的异步加载图像答案

【问题标题】：async loading image in FlutterFlutter 中的异步加载图像
【发布时间】：2020-04-18 23:00:14
【问题描述】：

如何异步加载图片和图形，从而减轻程序主线程的负担，让一切发生得更快、更流畅？

这是我加载图形的小部件：

  Container _graphicSection() {
    final String graphic = 'assets/graphic/two_people.svg';
    return Container(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        SvgPicture.asset(
          graphic,
          height: 150,
          alignment: Alignment.center,
        )
      ],
    ));
  }

还有我的用户界面：

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light
        .copyWith(statusBarColor: Colors.transparent));

    return Scaffold(
      body: Builder(builder: (BuildContext context) {
        return SingleChildScrollView(
            child: Form(
                key: _formKey,
                child: Column(children: <Widget>[
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(top: 20.0),
                        child: _headerSection(),
                      )
                    ],
                  ),
                  Padding(
                      padding: EdgeInsets.all(40.0),
                      child: Column(
                        children: <Widget>[
                          _graphicSection(),
                          SizedBox(height: 120.0), 
                          _buildEmail(),
                          SizedBox(height: 30.0),
                          _buildPassword(),
                          SizedBox(height: 40.0),
                          _helpText(),
                        ],
                      ))
                ])));
      }),
    );
  }

感谢任何解决方案:)

【问题讨论】：

stackoverflow.com/a/56434881/9142279

标签： flutter asynchronous dart async-await

【解决方案1】：

Dart 是一个单线程框架，所有计算都在其主线程上完成。这意味着 Dart 一次又一次地执行一项操作。

异步操作
在 Dart 中，我们使用 async / await 之类的关键字来告诉 dart 我们即将执行异步操作。但是，这不会将此工作转移到新线程，它会停止主线程上的工作，直到 async 工作完成，然后继续进行其余的工作或计算。

隔离和计算函数
话虽如此，可以创建一个新的隔离，它是与主隔离并行运行的另一个线程。当然，鉴于您不在单核系统上。但是，Isolate 不共享它们通过传递消息进行通信的内存。

这里有一些文章可以更好地解释这个话题。

Dart asynchronous programming: Isolates and event loops

Flutter Threading

Flutter async : Beginner friendly guide for heavy lifting operations

【讨论】：