3 min read

Sometimes you may need to wait and execute a piece of code after some delay. You may want to redraw the same widget or show some other widget after some time such as 2 seconds, 3 minutes, etc. So in this tutorial, we’ll learn the 2 types of Flutter delay widgets that you can add to your project.

At the end of the tutorial, you’ll be able to implement the interaction like this:

Flutter delay widget with 2 seconds

Here’s what we’ll cover:

Need of Delay

There can be several use cases that exist to add the delay. The best example is the splash screen. You may want to display a splash screen for a few seconds (e.g. 2 seconds) and then open another page based on your business logic. Another example is to mimic the backed API call.

Types of Flutter Delay Widget

There are mainly two types of Flutter delay widget that you can use to add delay in your code:

  1. Timer
  2. Future.delayed

You can use any of these based on your need.

Timer

To use the Timer to run the code after some delay, add the Timer widget and provide the amount of duration you want to wait before the code is executed.

Here are the steps:

Step 1: Add the Timer() widget

Step 2: Add the import statement import ‘dart:async’; at the top.

Step 3: Inside the Timer() widget, provide the Duration(seconds: 2). That means waiting for 2 seconds.

Step 4: Write the piece of code that you want to run after a delay.

Code Example:

import 'dart:async'; // <-- Import statement
Timer(Duration(seconds: 2), () { // <-- Delay here
  setState(() {
    _isLoading = false; // <-- Code run after delay
  });
});

When to use:

Use the Timer widget:

  • When the delayed code (code runs after a delay) does not return anything.
  • When you want to run the specific code after a delay repeatedly.

Future.delayed

To use the Future.delayed to run the code after some time, add the Future.delayed widget and provide the amount of duration you want to wait before the code is executed.

Here are the steps:

Step 1: Add the Future.delayed() widget

Step 2: Inside the Future.delayed() widget, provide the Duration(seconds: 2). That means waiting for 2 seconds.

Step 3: Write the piece of code that you want to run after a delay.

Code Example:

Future.delayed(Duration(seconds: 2), () { // <-- Delay here
  setState(() {
    _isLoading = false; // <-- Code run after delay
  });
});

When to use:

Use the Future.delayed widget:

  • When the delayed code returns something you want to carry further in your code flow.
  • When you want to run a code only once after a delay.

Full Code

Here’s the full code:

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class FlutterDelayWidgetDemo extends StatefulWidget {
  const FlutterDelayWidgetDemo({Key? key}) : super(key: key);
  @override
  State<FlutterDelayWidgetDemo> createState() => _FlutterDelayWidgetDemoState();
}
class _FlutterDelayWidgetDemoState extends State<FlutterDelayWidgetDemo> {
  bool _isLoading = true;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  // 1. Using Timer
    Timer(Duration(seconds: 2), () {
      setState(() {
        _isLoading = false;
      });
    });
// 2. Future.delayed
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _isLoading = false;
      });
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ...),
      body: Center(
        child: Column(
          children: [
            const SizedBox(
              height: 50,
            ),
            if (_isLoading) ...[
              const CircularProgressIndicator(),
            ] else ...[
              const Icon(
                Icons.done,
                size: 74,
                color: Colors.greenAccent,
              ),
            ],
          ],
        ),
      ),
    );
  }
}

Note: The idea of showing widgets in if-else statement is taken from here.

Conclusion

In this tutorial, we learned the 2 types of Flutter delay widgets that you can use to run a code after some time. We saw both of the approaches that run a code after 2 seconds. We also explored when to use which type of Fluter delay widget. and finally, we saw the full code.

Would you like to check other interesting Flutter tutorials?