Flutter - Using AboutDialog Widget Examples

This tutorial shows you how to use AboutDialog widget in Flutter

If your application is made by using Flutter and you need to display information such as application version, legalese, and licenses, Flutter already has a widget that allows you to display that information easily. The widget is AboutDialog.

Showing AboutDialog Widget

To show AboutDialog, call showAboutDialog method, which is available after importing 'package:flutter/material.dart'. Below is the method you need to invoke.

  void showAboutDialog({
    @required BuildContext context,
    String applicationName,
    String applicationVersion,
    Widget applicationIcon,
    String applicationLegalese,
    List<Widget> children,
    bool useRootNavigator = true,
    RouteSettings routeSettings,
  })

Here's the description of each parameter

• BuildContext context: The build context.
• String applicationName: The name of the application..
• String applicationVersion: The build version of the application.
• Widget applicationIcon: The icon to show next to the application name.
• String applicationLegalese: A string to show in small print.
• List<Widget> children: Widgets to add to the dialog box below the name, version, and legalese.
• bool useRootNavigator: Whether to use root navigator.
• RouteSettings routeSettings: Contains data that might be useful in constructing a Route.

In the below example, an about dialog popup will be shown by clicking a button

  RaisedButton(
    child: Text('Show AboutDialog'),
    onPressed: () {
      showAboutDialog(
        context: context,
        applicationIcon: FlutterLogo(),
        applicationName: 'Woolha.com App',
        applicationVersion: '0.0.1',
        applicationLegalese: '©2020 Woolha.com',
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(top: 15),
            child: Text('This is an about dialog in Flutter')
          )
        ],
      );
    },
  )

Output:

Adding Licenses

As you can see in the above example, Flutter automatically adds the licenses of all libraries used to create the application. What if you need to add an additional license. You can do it using LicenseRegistry.addLicense. For testing purpose, you can call LicenseRegistry.reset(); before to clear other licenses first.

  void initMyLibrary() {
    LicenseRegistry.reset();
    LicenseRegistry.addLicense(() async* {
      yield LicenseEntryWithLineBreaks(['ACustomLibrary'], '''
Copyright 2016 Woolha.com. All rights reserved.

   * Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
 
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS''');
    });
  }

Output:

Full Code

Below is the full code of this tutorial.

  import 'package:flutter/foundation.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: _MyAppContent(),
      );
    }
  }
  
  
  class _MyAppContent extends StatefulWidget {
    @override
    _MyAppContentState createState() => new _MyAppContentState();
  }
  
  class _MyAppContentState extends State<_MyAppContent> {
  
    @override
    void initState() {
      super.initState();
      this.initMyLibrary();
    }
  
    void initMyLibrary() {
      LicenseRegistry.reset();
      LicenseRegistry.addLicense(() async* {
        yield LicenseEntryWithLineBreaks(<String>['ACustomLibrary'], '''
  Copyright 2016 Woolha.com. All rights reserved.
  
     * Redistributions of source code must retain the above copyright
  notice, this list of conditions and the following disclaimer.
   
  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS''');
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Show AboutDialog'),
            onPressed: () {
              showAboutDialog(
                context: context,
                applicationIcon: FlutterLogo(),
                applicationName: 'Woolha.com App',
                applicationVersion: '0.0.1',
                applicationLegalese: '©2020 Woolha.com',
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 15),
                    child: Text('This is an about dialog in Flutter')
                  )
                ],
              );
            },
          ),
        ),
      );
    }
  }