How to Create Delays in Flutter

Sometimes, you may want to execute a code snippet only after some delay. In this tutorial, let’s check how to create delays in Flutter.

There are multiple ways to create delay in Flutter. The first one is by using Timer class from dart.

Timer in Flutter

import 'dart:async';

Timer(Duration(seconds: 5), () {
  print("This code executes after 5 seconds");
});

Here the code executes only after five seconds.

Following is the complete example where the button text changes on pressing after five seconds.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Delayed Function',
      home: FlutterExample(),
    );
  }
}

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

  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  var buttonText = 'Click Me!';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Flutter Timer Example')),
        body: Center(
            child: ElevatedButton(
                onPressed: () {
                  Timer(Duration(seconds: 5), () {
                    setState(() {
                      buttonText = 'Loading...';
                    });
                  });
                },
                style: ElevatedButton.styleFrom(elevation: 10),
                child: Text(buttonText))));
  }
}

Future.delayed in Flutter

You can achieve the same result using Future.delayed also. See the code snippet given below.

import 'dart:async';

Future.delayed(Duration(seconds: 5), () {
   print("This code executes after 5 seconds");
});

Following is the complete example.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Delayed Function',
      home: FlutterExample(),
    );
  }
}

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

  @override
  _FlutterExampleState createState() => _FlutterExampleState();
}

class _FlutterExampleState extends State<FlutterExample> {
  var buttonText = 'Click Me!';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Flutter Future Delayed Example')),
        body: Center(
            child: ElevatedButton(
                onPressed: () {
                  Future.delayed(Duration(seconds: 5), () {
                    setState(() {
                      buttonText = 'Loading...';
                    });
                  });
                },
                style: ElevatedButton.styleFrom(elevation: 10),
                child: Text(buttonText))));
  }
}

That’s how you create delays in Flutter.