How to asynchronously load pictures and graphics so as to relieve the main thread of the program so that everything happens faster and smoother?

here is my widget to loading graphic:

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

and my UI:

  @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(),
                        ],
                      ))
                ])));
      }),
    );
  }

thanks for any solutions :)


Solution 1: wcyankees424

Dart is a single threaded framework all of its computations are done on its main thread. This means Dart executes one operation at a time one after another.

Asynchronous Operations
In Dart we use keywords like async / await to tell dart that we are about to execute a asynchronous operation. However, this does not move this work to a new thread it stops the work on the main thread until the async work is done then resumes with the rest or the computation.

Isolates and Compute Function
All that being said it is possible to create an new isolate which is a another thread that runs in parallel with the main isolate. Given your not on a single cored system of course. However, Isolates do not share memory they communicate by passing messages.

Here are some articles to better explain this topic.

Dart asynchronous programming: Isolates and event loops

Flutter Threading

Flutter async : Beginner friendly guide for heavy lifting operations