Flutter – Lists and Dialogs

Hi Friends,

In this post, let’s see how to create a basic list & an alert dialog. Going forth I’ll not be discussing how to create a new flutter app. If you would like to get started with the basics, kindly refer to my post – here.

To learn basics of flutter get my course at a discounted price – here.

Other courses on flutter – here. (Affliate link – keeps my site alive by helping me pay for hosting)

Let’s begin.

A screencast of this post.

 

I presume you have read my previous post on flutter basics. In this post let’s continue exactly from where we left off.

Lists:

We’ll see how to create a very very basic list. Open up the main.dart file and modify it as shown below.

This will return the text Some data printed in three lines. This is a simple list. That’s it., end of story. Nah ! I am just kidding.. Let’ build up a bit more on that.

Now this is not clean coding right ? Let’s extract the list and have a class for it.

Modify main.dart again to look like this.

Now the class _MyList returns a list. We are building up the list using the ListView.builder method. We also added some padding to the list. This list will contain a name, a small subtitle, and an icon on the left.

Leading attribute denotes the start or to the left of the content in the Tile while trailing denotes the end or the extreme right of the tile. A list tile is a single element in the List. Here the code we have written would generate an infinite list as shown below.

Screenshot_2018-05-12-21-34-48

Cool right.. ? This is a very basic implementation of a list. There’s a lot more cool stuff that you could do with lists in Flutter.

Dialogs:

We’ll see how to create a basic alert Dialog. Open up main.dart again and modify it as shown below.

We have written a separate deleteDialog class that will create a confirmation dialog. This dialog will have 2 options namely Yes or No. The barrierDismissable attribute is used to prevent dismissing the dialog by tapping elsewhere on the screen. i.e., the user has to choose either yes or no to dismiss the dialog.

Now run the app. You will see a screen as shown below.

Screenshot_2018-05-12-21-34-14

Nice right ? This is just a basic dialog that you can throw up on your screen in Flutter. Now, we could go deep into this and create dialogs that return all kinds of values back to the main app., but let’s not overload ourselves with too much info.

Hope this helped you guys. If you found this helpful kindly share it with someone and help them too.

If you would like to ask me something or be involved in flutter discussions,

Join our community FlutterBeam by clicking – here.

Thanks for reading. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!