How to implement the AboutListTile widget?

• General

The AboutListTile widget is a ListTile that displays about box. Therefore, in this article, we will look at how the AboutListTile widget is implemented.

How to implement the AboutListTile widget?

You can add this widget to an app’s Drawer. When tapped it shows an about box dialog with showAboutDialog. So, the about box will include a button that shows licenses for software used by the application. Also, the licenses shown are those returned by the LicenseRegistry API, which can be used to add more licenses to the list. Moreover, if your application does not have a Drawer, you should provide an affordance to call showAboutDialog.

Properties:

Example:

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final TextStyle textStyle = theme.textTheme.bodyText2!;
    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://flutter.dev'),
          TextSpan(style: textStyle, text: '.'),
        ],
      ),
    ),
  ];

  return Scaffold(
    appBar: AppBar(
      title: const Text('Flutter Agency'),
    ),
    drawer: Drawer(
      child: SingleChildScrollView(
        child: SafeArea(
          child: AboutListTile(
            icon: const Icon(Icons.info),
            applicationIcon: const FlutterLogo(),
            applicationName: 'Example',
            applicationVersion: 'October 2021',
            aboutBoxChildren: aboutBoxChildren,
          ),
        ),
      ),
    ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Show the Example'),
          onPressed: () {
            showAboutDialog(
              context: context,
              applicationIcon: const FlutterLogo(),
              applicationName: 'Example',
              applicationVersion: 'October 2021',
              children: aboutBoxChildren,
            );
          },
        ),
      ),
    );
  }
}

Output:

Conclusion:

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.