The Flutter AboutDialog widget is a pop-up dialog that displays information about an application. It provides a brief overview of the app and its features, along with details such as the app version, developer information, and any relevant licensing information. This widget is part of the Flutter Material library and is easy to use in any Flutter project. With its customizable properties, it is a helpful tool for providing important information to users and displaying details of your brand.

Properties

The Flutter AboutDialog widget has several properties that allow you to customize its appearance and behaviour:

• applicationName: Here we pass a string that displays the name of the application.

• applicationVersion: A string is provided that displays the version number of the application.

• applicationIcon: It is an Icon widget that displays an icon that represents the application.

• applicationLegalese: It is a string that displays legal information about the application.

• children: It is a list of widgets that can be added to the AboutDialog for additional information.

• showApplicationName: A boolean value determines whether the applicationName is displayed.

• showLegalese: A boolean value determines whether the applicationLegalese is displayed.

• macContentPadding: It is the EdgeInsets value that sets the padding around the content of the dialog on macOS.

• onCloseButtonPressed: It is the callback function that is called when the close button is pressed.

Using these properties, you can customize the appearance and behaviour of the AboutDialog to meet your specific needs. Additionally, you can use the showAboutDialog method to display the dialog and provide additional context, such as the context of the current screen.

Example

In this example, we are going to create a basic application without any plugins and display the AboutDialog widget.

First Create a Basic Stateless/Stateful widget class with an ElevatedButton.

Scaffold(
  appBar: AppBar(
    title: const Text('About Dialog Tutorial'),
  ),
  body: Center(
    child: ElevatedButton(
      onPressed: () {},
      child: const Text('Show About Dialog'),
    ),
  ),
);

Inside the ELevatedButton onPressed callback function, we need to trigger the showDialog widget.

onPressed: () {
  showDialog(context: context, builder: builder);
},

In place of the builder, we will pass the AboutDialog widget.

showDialog(context: context, builder: (context) => AboutDialog());

Now we can use the different properties to customize the AboutDialog.

showDialog(
  context: context,
  builder: (context) => AboutDialog(
    applicationName: 'AllAboutFlutter',
    applicationVersion: '1.0.0',
    applicationIcon: CircleAvatar(
      child: Image.network(
          'url'),
    ),
    applicationLegalese:
        '© 2023 AllAboutFlutter. All rights reserved.',
    children: const [
      Text(
          'AllAboutFlutter is a website that provides tutorials on Flutter and Dart.'),
    ],
  ),
);

Output

Here is the full code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AboutDialogTutorial(),
    );
  }
}
class AboutDialogTutorial extends StatelessWidget {
  const AboutDialogTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('About Dialog Tutorial'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) => AboutDialog(
                applicationName: 'AllAboutFlutter',
                applicationVersion: '1.0.0',
                applicationIcon: CircleAvatar(
                  child: Image.network(
                      'https://static.wixstatic.com/media/73e5ab_e0a33a24b96c4e09a876668a29fd73c4~mv2.png'),
                ),
                applicationLegalese:
                    '© 2023 AllAboutFlutter. All rights reserved.',
                children: const [
                  Text(
                      'AllAboutFlutter is a website that provides tutorials on Flutter and Dart.'),
                ],
              ),
            );
          },
          child: const Text('Show About Dialog'),
        ),
      ),
    );
  }
}

Here is the code link.

https://dartpad.dev/?id=9734ab5ee782023cbddf5dd7ca073cf5