Best method to restart / reload your Flutter app on startup.

Photo by 🇨🇭 Claudio Schwarz | @purzlbaum on Unsplash

I was looking for a method to restart or reload my Flutter app when I start up it up, tried many ways and pub package and found this way to be the best to control the state and reload your app using just a few blocks of codes. To cut short your development time, I decided to write it down here to help anyone and myself who wants to quickly get this reload done.

When to reload your app on startup?

1. Re-authenticate your user.
2. Update new data or content from the server.
3. Sync configuration from the server.
4. Sync data from multiple devices from the server.
5. etc…..

Solution:

1. Create a StatefulWidget .

import 'package:flutter/material.dart';
import 'package:project/home.dart';
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}
class _AppState extends State<App> {
  @override
  Widget build(context) {
    return Home();
  }
}

2. Add WidgetsBindingObserver to your class, so that you can use didChangeAppLifecycleState function without error.

import 'package:flutter/material.dart';
import 'package:project/home.dart';
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}
class _AppState extends State<App> with WidgetsBindingObserver
  @override
  Widget build(context) {
    return Home();
  }
}

3. Initialize WidgetsBindingObserver by adding WidgetsBindings.instance.addObserver(this); in initState() .

import 'package:flutter/material.dart';
import 'package:project/home.dart';
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}
class _AppState extends State<App> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }
  @override
  Widget build(context) {
    return Home();
  }
}

3. Add WidgetsBindings.instance.removeObserver(this); in dispose() to clean up when this object is removed from the tree permanently.

import 'package:flutter/material.dart';
import 'package:project/home.dart';
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}
class _AppState extends State<App> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
  @override
  Widget build(context) {
    return Home();
  }
}

5. Add didChangeAppLifecycleState function, then add runApp(App()); to re-run the App widget.

import 'package:flutter/material.dart';
import 'package:project/home.dart';
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}
class _AppState extends State<App> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }
  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }
@override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('MyApp state = $state');
    if (state == AppLifecycleState.inactive) {
       // app transitioning to other state.
    } else if (state == AppLifecycleState.paused) {
       // app is on the background.
    } else if (state == AppLifecycleState.detached) {
       // flutter engine is running but detached from views 
    } else if (state == AppLifecycleState.resumed) {
       // app is visible and running. 
       runApp(App()); // run your App class again
    }
  }
  @override
  Widget build(context) {
    return Home();
  }
}

Let me know if you have better way to reload or restart an app on Flutter! Thanks, everyone 😁! Drop me some claps if you like this article! 👏👏👏