sleep(duration) vs Future.delayed(duration)

Question

What is the difference btw the two of them (sleep vs Future.delayed)? What's going on behind the scenes in both scenarios?

I don't understand the different outcomes in the following examples.

Future.delayed: does what I'd expect it to do:

1. setState rebuilds the widget and colors the rectangle in black color
2. Then it waits 10 seconds

    import 'package:flutter/material.dart';
    import 'dart:io';

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
      Color appColor = Colors.green;

      changeColors() async {
        setState(() {
          appColor = Color(0xff000000);
        });
        await Future.delayed(Duration(seconds: 10));
        print('after 10 seconds');
      }

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SafeArea(
              child: Center(
                child: Column(
                  children: [
                    Container(height: 100, width: 100, color: appColor),
                    FlatButton(
                      onPressed: () => changeColors(),
                      child: Text('click me'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

sleep: does NOT do what I'd expect it to do:

1. setState does NOT rebuild the widget tree once I change the appColor to black. Why not?
2. It waits 10 seconds
3. Then out of nowhere, the widget tree is being rebuilt and color of the rectangle turns black: Why?

    import 'package:flutter/material.dart';
    import 'dart:io';

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
      Color appColor = Colors.green;

      changeColors() {
        setState(() {
          appColor = Color(0xff000000);
        });

        sleep(Duration(seconds:10));
        print('after 10 seconds');
      }

      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            body: SafeArea(
              child: Center(
                child: Column(
                  children: [
                    Container(height: 100, width: 100, color: appColor),
                    FlatButton(
                      onPressed: () => changeColors(),
                      child: Text('click me'),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

Answer 1

sleep pauses execution in the Dart isolate for the specified amount of time. Nothing will happen during that time.

Future.delayed schedules an operation to occur at some point in the future. It is asynchronous, and other operations can occur in the meantime.