Mastering App Update Alert with Dialog Boxes in Flutter

App Update Alert :

App Update Alert, Every app has new updates coming up every period of time or sometimes due to technical issues / bugs which in turn return in app uploads.

So when you make a app upload you need to make sure your users update the app to the latest available so for which we can make use of a alert box showing the recent changes in app and provide them asking user to update their app.

For this scenario we generally make use of a api to do so but again its a difficult task i.e., every one cannot do so because it involves server side coding.

To handle this scenario we use firebase remote config such that we provide info regarding the app update and based on which we ask user to update their app.

App Update Alert Video tutorial :

Watch the following video tutorial for a more comprehensive step-by-step guide.

pubspec.yaml :

To enable the functionality for the app update alert using remote config, we’ve incorporated the dependencies for Firebase Core and Remote Config into our project.

Make sure to include the latest version numbers to prevent any potential conflicts and ensure a smooth integration process.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.10.6
  firebase_remote_config: ^1.0.3

main.dart :

Before we can utilize the services offered by Firebase, it’s imperative to initialize Firebase within our application, much like we did within the void main() function.

Following initialization, we proceed to fetch the necessary data that will determine whether the update alert dialog should be displayed to users.

However, it’s important to note that our current demonstration is purely for tutorial purposes, so we’re simply showcasing the functionality of an alert dialog without the full implementation of version code analysis or real-time update checking.

In real-time scenarios, it’s crucial to utilize version codes to determine if users have updated the app. Based on this analysis, we can display the App Update Alert accordingly.

Here’s the complete code for implementing the update alert box

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_remote_config/firebase_remote_config.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Remote Config",
    home: FutureBuilder<RemoteConfig>(
      future: setupRemoteConfig(),
      builder: (BuildContext context, AsyncSnapshot<RemoteConfig> snapshot) {
        return Home(remoteConfig: snapshot.requireData);
      },
    ),
  ));
}

class Home extends StatefulWidget {
  final RemoteConfig remoteConfig;

  const Home({Key? key, required this.remoteConfig}) : super(key: key);

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    var update = widget.remoteConfig.getBool("Update");

    return Scaffold(
      appBar: AppBar(
        title: const Text("Remote Config"),
      ),
      body: update
          ? showAlertDialog(context, widget.remoteConfig)
          : const Center(
              child: Text("Dashboard")),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          try {
            await widget.remoteConfig.setConfigSettings(RemoteConfigSettings(
                fetchTimeout: Duration(seconds: 10),
                minimumFetchInterval: Duration.zero
            ));
            await widget.remoteConfig.fetchAndActivate();
            setState(() {});
          } catch (e) {
            print(e.toString());
          }
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

Future<RemoteConfig> setupRemoteConfig() async {
  final RemoteConfig remoteConfig = RemoteConfig.instance;

  await remoteConfig.fetch();
  await remoteConfig.activate();

  return remoteConfig;
}

AlertDialog showAlertDialog(BuildContext context, RemoteConfig remoteConfig) {
  Widget cancel = TextButton(onPressed: () {}, child: const Text("Cancel"));
  Widget update = TextButton(onPressed: () {}, child: const Text("Update"));

  return AlertDialog(
    title: Text(remoteConfig.getString("Title")),
    content: Text(remoteConfig.getString("Message")),
    actions: <Widget>[cancel, update],
  );
}

Output :

The following screen demonstrates how to utilize an update alert dialog using Firebase Remote Config.

If you have any questions regarding the update alert implementation covered in this tutorial section, please feel free to ask in the comments below.

If you found this tutorial helpful, we appreciate your likes and shares to stay updated with more interesting content.