In the previous section we’ve learned what is AboutDialog and how to use it to show a license page.
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.
Certainly, the AboutDialog is a solution as it allows the users to see the license page by calling showLicensePage.
This showLicensePage shows the licenses for software used by our Flutter application on the LicensePage. It is provided by the LicenseRegistry API. Moreover, we can use the LicenseRegistry API to add more licenses to the List. And, remember, it’s important for any Flutter application.
In fact, AboutListTile widget does the same thing in a more stylish way. We’ll see in a minute how it works.
Before that, let’s make it clear that AboutListTile widget is a ListTile that shows an about box.
It’s a good practice that we add AboutListTile widget to an Flutter application’s Drawer. Let’s take a look at the following screenshot.
As a result, we can either open the about dialog box from AppBar Drawer or we can open it by clicking the TextButton.
As we just told, it’s a good practice we should open About Dialog Box from Drawer.
Now, we can click the link and that opens up the About Dialog Box.
As a consequence, users can read about the Flutter Application. Not only that, moreover, they can now read the license page or simply close the About Dialog Box.
If they click the “VIEW LICENSES”, Flutter takes care to show the license page.
Next, we’ll take a look at the code snippet, and see how we can make it happen.
Firstly, we’ve used a custom Global ThemeData object with the help of Provider package. Next, we’ve provided the custom theme based on Pink color across the whole Flutter application.
Therefore, we start our Flutter application this way.
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 AboutListTileBody(),
theme: globalTheme,
);
}
}In the widget tree, we start building our Flutter application from AboutListTileBody widget. In this stateless widget we’re going to define the Drawer where we’ll use AboutListTile widget. And in the body section, we’ll define the ElevatedButton onPressed method, which will call the showAboutDialog. The speciality of the showAboutDialog is that when it is tapped it shows an about box dialog. Just like the AboutListTile widget.
In that way, they are similar in nature, although there are some differences that we’re going to view in a minute.
class AboutListTileBody extends StatelessWidget {
const AboutListTileBody({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('About sanjibsinha.com'),
),
drawer: const Drawer(
child: SingleChildScrollView(
child: SafeArea(
child: AboutListTile(
icon: Icon(Icons.info),
applicationIcon: FlutterLogo(),
applicationName: 'sanjibsinha.com',
applicationVersion: '0.0.1',
applicationLegalese: 'CopyLeft sanjibsinha.com',
aboutBoxChildren: [
SizedBox(height: 30),
AboutSanjibSinha(),
],
),
),
),
),
body: Center(
child: ElevatedButton(
child: const Text('About sanjibsinha.com'),
onPressed: () {
showAboutDialog(
context: context,
applicationIcon: const FlutterLogo(),
applicationName: 'sanjibsinha.com',
applicationVersion: '0.0.1',
applicationLegalese: 'CopyLeft sanjibsinha.com',
children: [
const SizedBox(height: 30),
const AboutSanjibSinha(),
],
);
},
),
),
);
}
}We can clearly differentiate between AboutListTile widget and showAboutDialog. They have at least four common parameters. However, the way they are displaying the children is different.
aboutBoxChildren: [
SizedBox(height: 30),
AboutSanjibSinha(),
],
...
children: [
const SizedBox(height: 30),
const AboutSanjibSinha(),
],Anyway, both display the same widget AboutSanjibSinha, which in return use RichText and TextSpan to display what the users will when the tapped any one of them.
class AboutSanjibSinha extends StatelessWidget {
const AboutSanjibSinha({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
style: Theme.of(context).textTheme.bodyText1,
text: 'sanjibsinha.com is a learning place for beginners. '
'Learn how to build Flutter applications for mobile, web, and desktop '
'from a single codebase. Get updated articles on Flutter at '),
TextSpan(
style: Theme.of(context).textTheme.caption,
text: 'https://sanjibsinha.com'),
TextSpan(style: Theme.of(context).textTheme.bodyText1, text: '.'),
],
),
);
}
}There is nothing new to explain in the above code, except that we’ve used the custom global ThemeData object and apply that style across the application.
We need to remember, one key point regarding showing the licenses.
Using Drawer is the best choice; however, if we don’t use that, then we need to take any other route to call the showAboutDialog or display the showLicensePage.
If you have interest in knowing how we’ve used a custom global ThemeData object, please visit the respective GitHub Repository.
Leave a Reply