How to make sure UI gets updated in flutter before a long task completes on the main thread

Question

Update: Solved, look at the answer below.

I have a simple Text(initial text value is 'Empty') widget and a button at the top of the screen. When I click the button, I am loading a file that takes a long time to complete. While it is working to complete that, I want to change the Text widget to say 'Loading' and then display the content of the file once that task is finished loading the file.

I run the loading task in a Future and in my build function of the State class I am using a FutureBuilder widget to know what the Text widget should show based on if the task is complete yet or not.

The problem, I think, is that because dart is a single-threaded app, changing the text of the Text widget to 'Loading' doesn't get executed only after the task is completed, which beats the purpose (even when calling setState, because it is added to the event loop I believe where the Future is also scheduled to run).

Should I be running the long task in a separate Isolate? Is that the right way to go? I've been on this for a long time, hopefully someone can help, it's something that should be so simple..

This is the code I am using:

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String content = 'Empty';
  Future<FileObject> file;

  loadData() async {
     // do the loading of the file here (that takes a LONG time)
file = /*loadfunction for the file (returns a Future, because it takes long)*/;
  }


  loadTask() {
    setState(() {
      content = 'Loading...';
    });
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.black,
      body: Column(
        children: <Widget>[
          buildTitle(),
          buildContent(),
        ],
      ),
    );
  }

  FutureBuilder<FileObject> buildContent() {
    return FutureBuilder<FileObject>(
      future: file,
      builder: (BuildContext context, AsyncSnapshot<FileObject> snapshot) {
        if (snapshot.hasData) {
           content = snapshot.data.text; // The FileObject has a text property
        }

        return Expanded(
          child: SingleChildScrollView(
            child: Text(
              content,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.lightBlue[100],
                fontSize: 25.0,
                fontWeight: FontWeight.normal,
              ),
            ),
          ),
        );
      },
    );
  }

  Padding buildTitle() {
    return Padding(
      padding: const EdgeInsets.only(left: 8.0, top: 50.0, bottom: 30.0),
      child: Row(
        children: <Widget>[
          IconButton(
            icon: Icon(
              Icons.update,
              color: Colors.lightBlue[50],
            ),
            onPressed: loadTask,
          ),
        ],
      ),
    );
  }
}

Answer 1

Try changing your build method slightly

    buildContent() {
    new FutureBuilder<FileObject>(
      future: loadData(),
      builder: (BuildContext context, AsyncSnapshot<FileObject> snapshot) {
      FileObject file = new FileObject();
        if (snapshot.hasData) {
          file = snapshot.data;
          content = file.text; // The FileObject has a text property
          return Expanded(
          child: SingleChildScrollView(
            child: Text(
              content,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.lightBlue[100],
                fontSize: 25.0,
                fontWeight: FontWeight.normal,
              ),
            ),
          ),
        );
        } else {
          return new Center(
            child: Column(
              children: <Widget>[
                new LoadingIndicator(),                
              ],
            )
          );
        }
      },
    );
  }

In the above code I've changed a few things.

First, the buildContent method isn't a return method so I've removed the Future and return statements.

Secondly, the future now calls the the loadData() method. The snapshot will return your FileObject when it is ready.

Lastly, the Expanded widget is moved inside the IF clause so that only when the Futurebuilder is finished it will create a FileObject for you to display the content string. However, if the snapshot is empty meaning the Futurebuilder hasn't finished or there was an error creating the FileObject then it should just display the loading text and spinner (I've added the spinner because it's good to know the app hasn't frozen).

EDIT:

Here is my loading class, I've edited the code above call the class

import 'package:flutter/material.dart';

class LoadingIndicator extends StatefulWidget {
  @override
  _LoadingIndicatorState createState() => new _LoadingIndicatorState();
}

class _LoadingIndicatorState extends State<LoadingIndicator>
    with TickerProviderStateMixin {
  Animation<int> animation;
  AnimationController controller;

  Widget childBuilder(int value) {
    String text = 'one moment\n';
    for (int i = 0; i < value; i++) {
      text += '.';
    }

    return new Stack(
      alignment: Alignment(0.0, 0.0),
      children: <Widget>[ 
        // SizedBox(  
        // child: new CircularProgressIndicator(),
        // height:  10.0,
        // width: 400.0,
        // ),
       SizedBox(  
        // height:  40.0,
        child: new Padding(
          padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 30.0),
          child: new Text(text,style: new TextStyle(color: Colors.blueGrey, fontSize: 20.0, fontWeight: FontWeight.w500,), textAlign: TextAlign.center,),
        )
       )
      ]
    );


  }

  @override
  void initState() {
    super.initState();
    controller = new AnimationController(
        vsync: this, duration: const Duration(seconds: 2));
    animation = new StepTween(begin: 0, end: 4).animate(controller)
    .. addStatusListener((status){
      if (status == AnimationStatus.completed) {
        controller.reset();
        controller.forward();
      }
    });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return new AnimatedBuilder(
        animation: animation,
        builder: (BuildContext context, _) {
          return childBuilder(animation.value);
        });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

Answer 2

I finally solved it, using Isolates as discussed in the thread above.

The process is pretty simple, I followed the example here: Isolate Example

Because the long task now runs in a separate Isolate/thread than the main one, the animation for loading works as expected until the callback from the Isolate gets triggered and shows the loaded content.

Thanks everyone for the help.