How to run code after some delay in Flutter

Question

After my widget is generated, I want to have a function run after a specific amount of time. What is the proper Flutter idiom for this?

What I want to do is start with a default FlutterLogo Widget and then modify its style attribute after a certain amount of time.

Answer 1

You can use the Future.delayed function in Dart to run code after a specified delay. Here's an example of how to modify the style attribute of a FlutterLogo widget after a delay of 2 seconds:

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isDelayed = false;

  @override
  void initState() {
    super.initState();

    // Start a delayed timer
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _isDelayed = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _isDelayed
          ? FlutterLogo(
              style: FlutterLogoStyle.stacked,
              size: 200.0,
            )
          : FlutterLogo(size: 200.0),
    );
  }
}

In this example, we're using the initState method to start a delayed timer using Future.delayed. After a delay of 2 seconds, we update the _isDelayed variable to true using setState. This triggers a rebuild of the widget, which displays a FlutterLogo widget with the style attribute set to FlutterLogoStyle.stacked. If _isDelayed is false, we display a FlutterLogo widget with the default style.

To know more about Flutter, join our Flutter Certification Course today.