Test the performance of flutter grid control (GridView)

Before giving a try for my production app, I wanted to test the performance of google flutter.
I tested it to the extreme and at last, I was surprised to see the performance.

1. Create an image gallery type grid control 
2. Add a new image to GridView every 10 milliseconds.
3. Perform the scrolling as fast as I can.

Conclusion: Scrolling was buttery smooth at any time no matter images are getting added at every 10 milliseconds and the total number of items reached to 30 thousand.

Here is the source of test case

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:math';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Image grid demo",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  MyState createState() {
    return new MyState();
  }
}

class MyState extends State<HomePage> {
  MyState() {
    const duration = const Duration(milliseconds: 10);
    _timer = new Timer.periodic(duration, (Timer timer) {
      setState(() {
        int size = _random.nextInt(25) + 200;
        String url = 'https://placeimg.com/$size/$size/any';
        _items.add(url);

        if (_items.length > 30000)
          _timer.cancel();
      });
    });
  }

  Timer _timer;
  Random _random = new Random();
  List<String> _items = [];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.brown,
        title: new Text("Image Grid:" + _items.length.toString()),
      ),
      body: new Center(
        child: new GridView.count(
            crossAxisCount: 4,
            childAspectRatio: 1.0,
            padding: const EdgeInsets.all(5.0),
            mainAxisSpacing: 5.0,
            crossAxisSpacing: 5.0,
            children: _items.map((String url) {
              return new GridTile(
                child: new Image.network(url, fit: BoxFit.cover),
              );
            }).toList()),
      ),
    );
  }
}

Share this

Share on Facebook Plus on Google+