title: Decode image and add to list of widgets [flutter]
body: <p>I want to load and display multiple images from a folder in Windows, grouping them based on their sizes (for example, large, medium, icons, and so on ...).</p>
  
  <p>In order to know their size before displaying them, I'm looping a list using <code>decodeImage</code> function from <code>'package:image/image.dart'</code> for each image.</p>
  
  <p>What I want to achieve is that images appear on the screen after each iteration, without blocking the UI until all the load process is done.</p>
  
  <p>I have a list of image models and I'm calling <code>setState</code> once I add each image to the list, in order to update the view, but all the images appear at the end of the loop.</p>
  
  <p>How can I fix that ?</p>
  
  <p>This is the output of the debug console (it takes about 10 seconds for all the images to appear):</p>
  
  <pre><code>C:\flutter\flutter-desktop-embedding\example&gt;flutter run
  Launching lib\main.dart on Windows in debug mode...
  Building Windows application...
  flutter: 2020-01-12 16:00:12.604871
  flutter: 2020-01-12 16:00:13.160340
  flutter: 2020-01-12 16:00:13.656014
  Syncing files to device Windows...
  flutter: 2020-01-12 16:00:14.050997
  flutter: 2020-01-12 16:00:14.561593
  flutter: 2020-01-12 16:00:15.040311
  flutter: 2020-01-12 16:00:15.502076
  flutter: 2020-01-12 16:00:15.936912
  flutter: 2020-01-12 16:00:16.404174
  flutter: 2020-01-12 16:00:16.919285
  flutter: 2020-01-12 16:00:17.481826
  flutter: 2020-01-12 16:00:17.941551
  flutter: 2020-01-12 16:00:18.400322
  flutter: 2020-01-12 16:00:18.864382
  flutter: 2020-01-12 16:00:19.297922
  flutter: 2020-01-12 16:00:19.745731
  flutter: 2020-01-12 16:00:20.218457
  flutter: 2020-01-12 16:00:20.654293
  flutter: 2020-01-12 16:00:21.120047
  flutter: 2020-01-12 16:00:21.629715
  Syncing files to device Windows...                              13.892ms (!)
  </code></pre>
  
  <p>And this is the code (here i used a single 1920x1080 jpg image):</p>
  
  <pre><code>import 'dart:io';
  import 'package:flutter/foundation.dart';
  import 'package:flutter/material.dart';
  import 'package:image/image.dart' as dart_image;
  
  void main() {
    // See https://github.com/flutter/flutter/wiki/Desktop-shells#target-platform-override
    debugDefaultTargetPlatformOverride = TargetPlatform.fuchsia;
    runApp(new MyApp());
  }
  
  class ImageModel {
    final File file;
    final double height;
    final double width;
  
    ImageModel(this.file, {this.width, this.height});
  }
  
  class MyApp extends StatefulWidget {
    MyApp();
  
    @override
    State&lt;StatefulWidget&gt; createState() {
      return MyAppState();
    }
  }
  
  class MyAppState extends State&lt;MyApp&gt; {
    List&lt;ImageModel&gt; imageModelList = [];
  
    @override
    void initState() {
      super.initState();
      imageModelList = [];
      _loadImages();
    }
  
    void _loadImages() {
      final imagePaths = List.filled(20, 'C:/flutter/test/elephant.jpg');
      for (final imagePath in imagePaths) {
        final file = File(imagePath);
        file.readAsBytes().then((bytes) {
          final image = dart_image.decodeImage(bytes);
          // Here i should read the size to group the images based on their size.
          // For now i just add images with 1920x1080 size.
          if (image != null &amp;&amp; image.width == 1920 &amp;&amp; image.height == 1080) {
            final width = image.width.toDouble();
            final height = image.height.toDouble();
            final imageModel = ImageModel(file, width: width, height: height);
            print(DateTime.now());
            setState(() =&gt; imageModelList.add(imageModel));
          }
        }).catchError((err) {});
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Text('title'),
          ),
          body: SingleChildScrollView(
            child: Wrap(
              children: imageModelList.map((imageModel) {
                return new Container(
                  child: Image.file(
                    imageModel.file,
                    width: 160,
                    filterQuality: FilterQuality.medium,
                  ),
                );
              }).toList(),
            ),
          ),
        ),
        title: 'title',
      );
    }
  }
  </code></pre>