AboutDialog Widget - Flutter API Documentation

The AboutDialog widget presents a dialog with application information, including the application name, version, copyright, and links to the licenses for the software used by the application. The dialog can be customized with additional information and actions.

about_license.dart

import 'package:flutter/material.dart';

class AboutLicenseWidget extends StatelessWidget {
  const AboutLicenseWidget({super.key});

  @override
  Widget build(BuildContext context) {

    // Get the current theme from the context
    final ThemeData theme = Theme.of(context);

    // Define the text style for the about dialog
    final TextStyle textStyle = theme.textTheme.bodyMedium!;

    // Define the children to show inside the about dialog
    final List<Widget> aboutBoxChildren = <Widget>[
      const SizedBox(height: 24),
      RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
                style: textStyle,
                text: "Flutter is Google's UI toolkit for building beautiful, "
                    'natively compiled applications for mobile, web, and desktop '
                    'from a single codebase. Learn more about Flutter at '),
            TextSpan(
                style: textStyle.copyWith(color: theme.colorScheme.primary),
                text: 'https://www.boltuix.com'),
            TextSpan(style: textStyle, text: '.'),
          ],
        ),
      ),
    ];

    // Return the widget tree
    return Scaffold(
      // Define the drawer with an AboutListTile
      drawer: Drawer(
        child: SingleChildScrollView(
          child: SafeArea(
            child: AboutListTile(
              icon: const Icon(Icons.info),
              applicationIcon: const FlutterLogo(),
              applicationName: 'Flutter UIX',
              applicationVersion: 'August 2024',
              applicationLegalese: '\u{a9} 2024 The Flutter Authors',
              aboutBoxChildren: aboutBoxChildren,
            ),
          ),
        ),
      ),
      // Define the body with a button that shows the about dialog when pressed
      body: Center(
        child: ElevatedButton(
          child: const Text('Show About Example'),
          onPressed: ()  {
            showAboutDialog(
              context: context,
              applicationIcon: const FlutterLogo(),
              applicationName: 'Flutter UIX',
              applicationVersion: 'August 2024',
              applicationLegalese: '\u{a9} 2024 The Flutter Authors',
              children: aboutBoxChildren,
            );
          },
        ),
      ),
    );
  }
}

..

Code Explanation:

showAboutDialog(
              context: context,
              applicationIcon: const FlutterLogo(),
              applicationName: 'Flutter UIX',
              applicationVersion: 'August 2024',
              applicationLegalese: '\u{a9} 2024 The Flutter Authors',
              children: aboutBoxChildren,
            );  

This code is showing the About Dialog Box by calling the showAboutDialog method.

context: This is a required parameter that specifies the BuildContext.

applicationIcon: This parameter specifies the application's icon to be displayed in the About dialog box.

applicationName: This parameter specifies the name of the application to be displayed in the About dialog box.

applicationVersion: This parameter specifies the version of the application to be displayed in the About dialog box.

applicationLegalese: This parameter specifies the legal message of the application to be displayed in the About dialog box.

children: This is a required parameter that specifies the additional widgets to be displayed in the About dialog box.

The code example above shows an About dialog box that includes a Flutter logo, the application name "Flutter UIX", version "August 2024", a legal message, and additional children widgets that display information about the Flutter toolkit and a link to learn more about it.

..

In Drawer:

   drawer: Drawer(
        child: SingleChildScrollView(
          child: SafeArea(
            child: AboutListTile(
              icon: const Icon(Icons.info),
              applicationIcon: const FlutterLogo(),
              applicationName: 'Flutter UIX',
              applicationVersion: 'August 2024',
              applicationLegalese: '\u{a9} 2024 The Flutter Authors',
              aboutBoxChildren: aboutBoxChildren,
            ),
          ),
        ),
      ), 

The AboutListTile widget is used to create a ListTile that opens an AboutDialog when clicked. The icon property is used to specify the icon that appears in the drawer menu next to the "About" label. The applicationIcon property is used to specify the app's icon that appears in the AboutDialog. The applicationName, applicationVersion, and applicationLegalese properties are used to specify the app's name, version, and legal notice that appear in the AboutDialog. Finally, aboutBoxChildren is used to specify the custom content that appears below the default content in the AboutDialog.

The SafeArea widget is used to ensure that the AboutDialog content is not obscured by the device's status bar or notch, while SingleChildScrollView ensures that the content can be scrolled if it exceeds the available screen space.

..

Define the children to show inside the about dialog:

The aboutBoxChildren list contains a SizedBox with a height of 24 pixels for spacing, and a RichText widget with three TextSpans. The first TextSpan contains a brief description of Flutter, the second TextSpan contains a hyperlink to the Flutter website, and the third TextSpan contains a period to end the sentence.

// Define the children to show inside the about dialog
    final List<Widget> aboutBoxChildren = <Widget>[
      const SizedBox(height: 24),
      RichText(
        text: TextSpan(
          children: <TextSpan>[
            TextSpan(
                style: textStyle,
                text: "Flutter is Google's UI toolkit for building beautiful, "
                    'natively compiled applications for mobile, web, and desktop '
                    'from a single codebase. Learn more about Flutter at '),
            TextSpan(
                style: textStyle.copyWith(color: theme.colorScheme.primary),
                text: 'https://www.boltuix.com'),
            TextSpan(style: textStyle, text: '.'),
          ],
        ),
      ),
    ];

..