How To Create ‘About App’ in Just 2 Minutes in Flutter
Use Flutter’s ready-made widget ‘AboutListTile’ to show all ‘about the app’ and stay focused on the core feature of the app.
Sometimes we may need to see the extra information of the app like its Version, Privacy policy, Official website, etc. Some developers put effort to add this extra piece of information and some stay away. Maybe due to time crunch or utilizing all resources to develop core features would be more important than this in the initial launch.
If you have seen the default Flutter Gallary app. You can see all about this app on clicking ‘About Flutter Gallery’ item from Navigation Drawer.
How about developing the same in your Flutter app?
It’s very easy.😎 Right?
You add one more ListTile in Navigation Drawer and open the dialog filled with all information onTap of it.
Now what if I tell you that there is a ready-made Widget that exists for it
Do you want to stay updated in Flutter world? Please click on subscribe button to get an email when the new tutorial is published or visit the https://flutterbeads.com
Presenting AboutListTile Widget 🎤
It is actually a ListTile which shows the About box
- The main difference between normal ListTile and AboutListTile is that when you click on AboutListTile, You can see a dialog box with some information.
- It is mostly added in the Drawer of the app.
- Internally it calls showAboutDialog which opens up AboutDialog.
🏗 Basic UI structure
AboutListTile(
icon: Icon(Icons.info,),
child: Text('About app'),
applicationIcon: Icon(Icons.local_play,),
applicationName: 'My Cool App',
applicationVersion: '1.0.25',
applicationLegalese: '© 2019 Company',
aboutBoxChildren: [
///Content goes here...
],
)Let’s see its properties quickly -
ⓘcon:
Displays icon for the ListTile item
ⓒhild:
Displays label for the ListTile item
If a child is not given then default text like ‘About AppName’ will appear. where AppName is the name given to applicationName property which is explained next.
ⓐpplicationName:
Displays given text as Title of the dialog.
ⓐpplicationIcon:
Displays icon before the application name in the dialog
ⓐpplicationVersion:
Displays Version number or Build number of the app.
ⓐpplicationLegalese:
Used to displays ©️ notice here.
ⓐboutBoxChildren:
The main content goes here like App information, Credits, Thanks, links etc
ⓓense:
Accepts boolean and if set to true it decreases the height of ListTile.
Did you notice this ‘VIEW LICENSES’ button inside dialog?
So what happens when you click on it?
Let’s watch it.
It actually opens LicensePage Widget which displays a list of all softwares used by the application.
Is there any other way of opening this AboutDialog?
Yes, you can always call showAboutDialog directly like this.
Full code can be found here 👇
Goodbye
Thanks for reading. If you found this article to be helpful please share it with your friends.
Little about me
Hi, Myself Pinkesh Darji. I love to solve problems using technology that improves user’s life on a major scale. Over the last several years, I have been developing and leading various mobile apps in different areas. More than just programming, I love to write technical articles.
I write about Flutter at https://flutterbeads.com/. A place to learn Flutter from high-quality tutorials.
