How to use About Dialog in Flutter

In this section, we’ll learn how to use About Dialog in Flutter. Firstly, let us know why we need a AboutDialog. Secondly, we’ll learn how to use this class.

First thing first.

In any Flutter application, we need to show or provide a license page. We can either build a custom License page, or we can take help from Flutter.

The AboutDialog allows the users to see the license page by calling showLicensePage.

This showLicensePage shows the licenses for software used by the application on the LicensePage. It is provided by the LicenseRegistry API. Now, we can use the LicenseRegistry API to add more licenses to the List.

We’ve learned why we need the AboutDialog.

Now, we’ll learn how to use AboutDialog.

The AboutDialog uses a method, showAboutDialog that includes a button that calls showLicensePage. Flutter manages the whole mechanism through Material App.

Let’s see the first screenshot, and the related code first, so that we can understand it better.

As the above screenshot shows a TextButton, we can click on that show that the dialog box is opened.

As a result, we can either close the dialog box, or we can click the “VIEW LICENSES” button that takes us to the LicensePage.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_artisan/models/global_pink_theme.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    /// Providers are above [Root App] instead of inside it, so that tests
    /// can use [Root App] while mocking the providers
    MultiProvider(
      providers: [
        Provider<GlobalPinkTheme>(
          create: (context) => GlobalPinkTheme(),
        )
      ],
      child: const AboutDialogHome(),
    ),
  );
}

class AboutDialogHome extends StatelessWidget {
  const AboutDialogHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ThemeData globalTheme =
        Provider.of<GlobalPinkTheme>(context).globalTheme;
    return MaterialApp(
      title: 'About Dialog Sample',
      debugShowCheckedModeBanner: false,
      home: const AboutDialogBody(),
      theme: globalTheme,
    );
  }
}

class AboutDialogBody extends StatelessWidget {
  const AboutDialogBody({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'About Dialog Sample',
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
      ),
      body: Center(
        child: TextButton(
          child: Text(
            'Show AboutDialog',
            style: Theme.of(context).textTheme.bodyText1,
          ),
          onPressed: () {
            showAboutDialog(
              context: context,
              applicationIcon: const FlutterLogo(),
              applicationName: 'sanjibsinha.com',
              applicationVersion: '0.0.1',
              applicationLegalese: 'CopyLeft sanjibsinha.com',
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 15),
                  child: Text('About Us',
                      style: Theme.of(context).textTheme.button),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}

The showAboutDialog uses the context, and many other parameters to show the dialog box in a proper manner.

However, we can override the properties and make our own licenses. Certainly, we’ll discuss it in a separate section as we progress to learn more about Flutter Material Design widgets.

showAboutDialog(
              context: context,
              applicationIcon: const FlutterLogo(),
              applicationName: 'sanjibsinha.com',
              applicationVersion: '0.0.1',
              applicationLegalese: 'CopyLeft sanjibsinha.com',
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(top: 15),
                  child: Text('About Us',
                      style: Theme.of(context).textTheme.button),
                )
              ],
            );

If we want to view the license page, Flutter LicenseRegistry API takes care about it.

We can scroll to view the all licenses.

To view the entire code please visit the respective GitHub repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter