Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 29, 2021 11:18 am

How to Create Lists in Your App WithFlutter

A list is a key UI element for mobile apps. You'll learn all about how to create lists in your Flutter app in this tutorial.

You don't need to be an expert developer to create lists in your Flutter app. If you've developed apps for Android or iOS in the past, Flutter’s ListView should seem like a piece of cake to you. And if you're just getting started with Flutter development, just follow along and you'll see how easy it can be.

In this tutorial, I'll show you examples of a few common Flutter ListView patterns. You can easily reuse these for your own amazing app.

Flutter ListView Examples

Now, let’s start a project using Android Studio with Flutter 1.0 and call it Flutter_view.

Keep in mind that this code works as a head for all the code snippets of ListsViews mentioned after this.

Essentially, there a few types of ListView that can be used for a Flutter project. The choice of lists is dependent upon the aesthetic vision and the user interface of the app. Developers are often asked to find a balance between creativity and practicality for the menu bars and option lists in the app.

Let's look at the different kinds of lists you can have in your Flutter app.

Static Lists

When you have limited options, you can use static lists found in the default Flutter ListView builder. Static lists are ideal for creating a menu page.

Here is a snippet of code that you can use:

And here's what it will look like:

app screenshot showing a list of colorsapp screenshot showing a list of colorsapp screenshot showing a list of colors

This list of colors only includes titles. But you can customize the ListTile with subtitles, images, and even icons. 

Dynamic Lists

When you create a static list, all the elements are created at once. Short lists benefit from this technique. However, when you offer a long list of options, like for choosing the country for an international shipment, then you need the ListView.builder() constructor for a dynamic list.

Replace myListView() with this snippet:

Your app will now offer a list like this:

app showing long list of countriesapp showing long list of countriesapp showing long list of countries

When you enter an itemCount in the code, the ListView builder on Flutter prepares a specific number of options at a time. The itemBuilder can also be used to view each ListTile individually. The use of an index makes it easier to extract data from the list of European country names that have been used as the backing information here.

Infinite Lists

Many applications require infinite lists—this was always challenging for Android and iOS in the past. However, with Flutter, you can simply alter the itemCount parameter and change the ListTile to display the row index like this:

infinite listinfinite listinfinite list

Here's the snippet of code:

This code just dynamically generates each ListTile when it is needed, so the list view can have as many rows as you need. The ListView will intelligently decide when to generate each tile so that it is available when that part of the list is visible.

If you want to take this a step further, you can add dividers in the dynamic list to give your app a more organized look. Here’s how you can do it:

And here's how the list looks with dividers:

list with dividerslist with dividerslist with dividers

The height and color of these dividers can be changed with arguments to the Divider() constructor.

Horizontal Lists

While all the previous lists have been on the y axis, you can easily create a list horizontally on Flutter! A simple specification of the scrollDirection can be used on a custom layout to accommodate a horizontal list.

This is how you can do it:

And here's what the list looks like on the horizontal axis:

horizontal listhorizontal listhorizontal list

Custom ListTiles

Now that we have covered the most common types of ListViews, it's time to spruce up the aesthetics of the application. Flutter ensures that your mobile app looks easy on the eye and offers a wide variety of widgets to accommodate the needs of the developer.

The ListTile widget is used to handle normal content displayed in lists. This works well when there are no customizations involved in the layout.

When we made the first list of colors, only the ListView was used. But now, we can introduce details such as images, subtitles, and even icons.

Follow along: 

This code would achieve this look:

list with custom ListTileslist with custom ListTileslist with custom ListTiles

While the touch-ability of the list can be toggled with onTap, we will take the customization of the list a little further. If you want to add images instead of icons to personalize the app, then the recommended widget is the CircleAvatar.

Custom icons with CircleAvatarCustom icons with CircleAvatarCustom icons with CircleAvatar

You could use the NetworkImage(imageUrl) and ditch the AssetImage(path), but remember, when you need the images to remain self-contained, the latter is a better option.

Register the location of the assets in pubspec.yaml:

Restart the app, and you are all good to go!

Flutter Lists and Data Sources‏

Let's finish with something interesting: did you know that Flutter allows you to create a data source with various types of items, and it also facilitates the conversion of the data source into a large list of widgets?

So you can use a Flutter list to display a heading with a list of options or expand upon the specifications of product details, heading by heading.

First let's take a look at the completed list: 

complete Flutter app listcomplete Flutter app listcomplete Flutter app list

And here's the code that generated that list:

The code for this example is a bit more complicated than the others, and I won't explain it in detail. But feel free to play around with the code and see if you can get it to work the way you want for your app! This element offers you a great way to keep a massive amount of content on your app organized. 

Final Thoughts

With ListViews, you can add subtitles and cards to enhance the aesthetics and even opt for far-fetched maximalist ideas for your app as well. However, I would suggest you keep your design minimal as that is the design trend for the year.

But the choice is all yours!

I hope this has helped you understand the basics of lists and a little customization along the way. In the end, it all depends on how creative you want to get, because the possibilities Flutter offers are limitless. 

Original Link:

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code