Now that you have gone through a handful of Widgets that will help you create really amazing Ui’s in Flutter, its time to expand your knowledge to some more important widgets and concepts. In this tutorial you will learn how to create a list in Flutter and how to open up a new page, while passing data to it.

ListView in Flutter

Flutter provides a ListView widget which helps making lists as easy as it can get. It’s a straight forward widget, so lets directly look at the code.

We have used the ListView.builder constructor to build the list.

itemCount is the length of the list to be built.

itemBuilderΒ is a simple callback provided by you that is called to build every item.

This is what it looks like when ran on a device.

flutter

ListView also provides another named constructor called ListView.separated. This allows you to also provide a builder for an item separator between two items.

separatorBuilder is called between every two items. Let’s say you have a list of 2 Items. So first itemBuilder will be called to get the first Item (#1) then separatorBuilder is called to get the separator and finally itemBuilder is called again to build the second Item (#2). So if you have N number of items, the separatorBuilder will be called N-1 number of times. We are using Flutter’s out of the box Divider widget as our separator between items.

flutter-list-view-separator

Let’s give a different background colour to every other item in the list.

Basics of Routing

Till now you have been displaying data on a single screen. Let’s expand our horizons and learn how to launch a new page.

Let’s prepare our Home widget to open up a new page. We will add a simple button, which when clicked will open our new page. Remove the ListView for now, we will add it back later.

You can write the code for second page in the same main.dart file, but I don’t want you to do that. Let’s be good devs, create a new file named second_page.dart and write the code in it.

As you know everything in Flutter is a Widget, so is our new page. It’s just another “Widget”.

Never miss a post from TheTechnoCafe


Now that is done, how to open a new page? Well, Flutter provides Navigator (also a widget πŸ˜‰) to manage opening and closing pages. Back to our Home widget, let’s add the code to open new page.

You might feel alienated looking at this code, but don’t worry, it’s quite simple. Let’s break it down.

  • Navigator: Gives you the functionality to open/close pages in Flutter, and various methods related to managing pages. I highly encourage you to take a look at the Navigator documentationΒ to learn more and play around.
  • MaterialPageRoute: Navigator takes something called Route. MaterialPageRoute is an implementation of it. All it does it provides you with beautiful default transition animations and other Material goodness. In the builder property of MaterialPageRoute you return your SecondPage widget, which is what you want to build in the new page!Β Your widget is essentially “wrapped” in a PageRoute. You can extend one of the PageRoute or PageRouteBuilder to provide your own custom transitions, padding, background colour and other cool stuff.

Run the app, press the button and watch the second page in action!

flutter

Now let’s bring our ListView back in our Home widget, we will open the second page on click of any item in the List. To add tap functionality, let us use GestureDetector. Wrap the Container with a GestureDetector.

Click on any item and second page will pop up. Hmmm, let’s do something more exciting, let’s pass some data to second page, particularly, pass the index of clicked item to the next page. Well there is not magic, nothing like Intent or anything (if you are from an Android background), data can be passed simply with constructor args.

Modify the SecondPage widget to take an integer.

In Home widget, modify to pass in the current clicked in index.

Click on any item!

flutter

Next Tutorial – Flutter Crash Course – 6 – Networking Basics >>

<< Previous Tutorial – Flutter Crash Course – 4 – Dive into more Flutter Widgets


Gurleen Sethi

How can I tell you about myself in just a few lines, to get to know me you can reach out to me, email, text, call, or any other method of communication you like. I am always there for you!

2 Comments

MostHated · July 17, 2019 at 1:21 am

Great articles. I just started using Dart/Flutter a few days ago and I learned how I have every other language, just finding several different examples that try to accomplish the same goal and then compare how each goes about it. That helps me dissect what each thing does and helps me learn different ways of doing things.

The problem with that though, is you miss out on a lot of little intricacies that you might not realize are there because none of the peoples examples made use of them, so I just end up using the things in similar manners that I have seen them used.

I love coming across in depth / deep dives into each component like this *after* I have given it a go and have a decent understanding of what each thing does, I guess it helps me remember as the bits of info have something in which I am already aware to be associated with.

That being said, you are doing great work here and I definitely will be checking back to see if you make more, as this is really helping to bring a lot of things together for me.

Thanks!
-MH

    Gurleen Sethi · July 22, 2019 at 11:03 pm

    Appreciate your support. More content coming soon.

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × four =