A Quick Guide to ListView In Flutter – Hupen Design

A Quick Guide to ListView In Flutter – Hupen Design

A Quick Guide to ListView In Flutter – Hupen Design
Published At By Hupen Pun

Flutter is an open source Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter is fast in the development process, can give native performance and can have flexible and adoptable ui components. Here, in this blog we are going to look at ListView widget in detail.

“ListView Widget comes in when you are to show a list of scrolling items on your application.”

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView. This ListView widget will be so helpful when you are to show different widgets in a scrollable list. The list can either be in vertical or horizontal direction. All you need to do is play with some words inside the ListView widget.

There are four options for constructing a ListView: (Here, we will cover only the first three methods.)

  • The default constructor takes an explicit List<Widget> of children. This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.
  • The ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. If you have long lists of items or you are creating a list dynamically, you can use this version of ListView Widget. 
  • The ListView.separated constructor takes two IndexedWidgetBuilders: itemBuilder builds child items on demand, and separatorBuilder similarly builds separator children which appear in between the child items. This constructor is appropriate for list views with a fixed number of children. This version is just the same as ListView.builder but it adds white space between each list item with the Divider widget. 
  • The ListView.custom constructor takes a SliverChildDelegate, which provides the ability to customize additional aspects of the child model. For example, a SliverChildDelegate can control the algorithm used to estimate the size of children that are not actually visible.

Let’s dive into code.

1. ListView

– It takes a children attribute with a list of items for the ListView. And those items will be widgets. Here, I have three ListTile widgets.

        ListView(
          children: [
            ListTile(
              leading: Icon(Icons.arrow_right),
              title: Text("January"),
            ),
            ListTile(
              leading: Icon(Icons.arrow_right),
              title: Text("February"),
            ),
            ListTile(
              leading: Icon(Icons.arrow_right),
              title: Text("March"),
            ),
         ),
         ],

Output Looks like This:

2. ListView.builder

– It will have an itemCount attribute, which tells ListView how many items will be in the ListView. Additionally, it will have an itemBuilder function with BuildContext and iterator and returns a Widget. Here, the itemBuilder is returning a ListTile widget.

            List months = ['January', 'February', 'March', 'April', 'May'];
                        
            ListView.builder(
              itemCount: months.length,
              itemBuilder: (BuildContext context, index) {
                return ListTile(
                  leading: Icon(Icons.arrow_right),
                  title: Text(months[index]),
                );
              },
            ),

Output Looks like This:

3. ListView.separated

-It is very similar to the ListView.builder but it will insert some widget like Divider (in this example) as a separator between each of the items. The separating widget will be in the separatorBuilder function.

            List months = ['January', 'February', 'March', 'April', 'May'];
                        
            ListView.separated(         
              itemCount: months.length,
              separatorBuilder: (BuildContext context, int index) =>
                  const Divider(
                color: Colors.blue,
              ),
              itemBuilder: (BuildContext context, index) {
                return ListTile(
                  leading: Icon(Icons.arrow_right),
                  title: Text(months[index]),
                );
              },
            ),

Output Looks like This:

Let’s have more control over the ListView widget.

  • You can make your List scroll vertical or horizontal with the following command.
  • scrollDirection: Axis.horizontal,
    scrollDirection: Axit.vertical,
  • If you want to just reverse your list.
  • reverse: true,
  • If you want to adjust physics on your list.
  • physics: NeverScrollableScrollPhysics(), 
  • If you want to keep the list items alive when they are off screen.
  • addAutomaticKeepAlives: false,

    You can have in detail information on the ListView widget in this official Flutter Widget Of The Week from Google Flutter Team.

    Five useful flutter commands – Flutter development

    Five useful flutter commands – Flutter development

    Five useful flutter commands – Flutter development
    Published At By Hupen Pun

    Flutter is an open source Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Flutter is fast in the development process, can give native performance and can have flexible and adoptable ui components.

    Flutter was first released in 2017 and since then it’s getting huge popularity and adaptation in mobile development communities. The best part of flutter is you can build apps for different variants with a single codebase that means you don’t have to write a single application in different codebases. Now, with the stable release of version 2.13 flutter is now supporting a web feature that will enable you to have a website with the same code. Hence, you can have mobile apps and web apps with a single codebase. 

    Enough talking on background, let’s focus on the main topic, i.e. useful flutter commands in flutter development. Here in this blog I have included five flutter commands with a detailed description.

    1. Flutter emulators

    This command helps you show the emulators you had created on your device. It will show the device name with its unique id through which you can access your emulator.

    flutter emulators
    

    2. Flutter emulators –launch

    This command is very helpful and saves a lot of time. Basically, this command helps you launch an emulator right from your command prompt. Here, –launch flag with the emulator id that you had in the previous command will launch the emulator.

    flutter emulators --launch 'emulator_id'
    

    3. Flutter clean

    This is one of my favourite commands in flutter. If you need to delete a previously built/compiled app, it will help you out like a magic snap.

    flutter clean
    

    4. Flutter run

    Flutter run command helps you build your app and run on a connected device. This command first fetches dependencies with flutter pub get command, builds/compiles and then runs on the connected device.

    flutter run
    

    5. Flutter doctor

    This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform. For example, android studio is installed or not, which flutter version you are currently using on, android SDK installed or not etc.

    flutter doctor
    

    There are other tons of commands though. I have included some here.

    flutter create 'project_name'
    
    flutter pub get
    
    flutter pub add 'package_name'
    
    flutter build appbundle / flutter build apk
    

    Flutter development is so interesting, easy and fast. I was previously used to developing apps using android studio and Java, but when flutter was first released, it started switching to flutter and now I have all my apps with flutter. Thank you for reading my blog.