How to run code after some delay in Flutter

Question

I'd like to execute a function after a certain delay after my Widget is built. What's the idiomatic way of doing this in Flutter?

What I'm trying to achieve: I'd like to start with a default FlutterLogo Widget and then change its style property after some duration.

Answer 1

You can use the Future.delayed method to execute a function after a certain duration in Flutter. Here's an example of how to use it to change the style of a FlutterLogo widget after a delay:

import 'package:flutter/material.dart';

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

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

  @override
  void initState() {
    super.initState();
    // Execute the _changeLogoStyle function after a delay of 2 seconds
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        _isLogoStyleChanged = true;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _isLogoStyleChanged
          ? FlutterLogo(style: FlutterLogoStyle.horizontal)
          : FlutterLogo(style: FlutterLogoStyle.markOnly),
    );
  }
}

In the above example, we set _isLogoStyleChanged to true after a delay of 2 seconds using Future.delayed. When _isLogoStyleChanged is true, we change the style of the FlutterLogo widget to FlutterLogoStyle.horizontal. Otherwise, we use the default style of FlutterLogoStyle.markOnly.

To know more, join our Flutter Training today.