Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Widgets

Understanding The Flutter ListView Widget

August 3, 2020
in Flutter Widgets
5 min read
fLUTTER ListView builder seperated

Here, You’ll understand all the types of ListView widget/constructor available in the Flutter Library, but before then, we need to know what a ListView widget is and what it does. According to the Flutter.dev official website;

RELATED FLUTTER RESOURCES

How To Build A Code Editor App In Flutter with code_editor Plugin

Flutter Form & FormField Widget – Implementation & Example

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

The ListView is one of the most commonly used widgets for scrolling and building lists. It actually displays its children/other widgets one after another in the scroll direction according to your instruction. In Flutter, you have the ability to set a scroll direction for your ListView.

ADVERTISEMENT

How to set the direction of your ListView in Flutter, See below;

Widget _build(BuildContext context) {
     return ListView.builder(
          scrollDirection: Axis.vertical, //You can also use the Axis.horizontal
          itemCount: _people.length,
          itemBuilder: (BuildContext context, int i) {
            return PersonCard(_peopleList[i]);
    },
     );
}

The ListView widget in Flutter actually has 4 different ways to use it:

The 4 types of ListView in FLutter

  1. new ListView

    Normal use. It has a children property that takes a collection of static widgets.

  2. ListView.builder

    For dynamically creating children from a list of items.

  3. ListView.separated

    Like builder but also puts a widget ∗between∗ each item. Great for inserting ads in the list periodically. Read more at http://bit.ly/flutter_listview_separated.

  4. ListView.custom

    For rolling your own advanced listviews. Read more at http://bit.ly/flutter_listview_custom.

Let’s take a look at the first two options starting with the regular ListView.

Regular ListView: When you have a few widgets to display

Generically, a ListView takes a small number of other widgets and makes it scrollable. Why a “small number”? Because this is designed to be a static list, one that you, the developer, simply types into the build() method by hand. In fact, oftentimes the way you discover you’ll need a regular ListView is when your column overflows. The fix is either to remove children, resize the children, or simply change the Column to a ListView. Columns and ListViews both have a children property:

Widget _build(BuildContext context) {
  return ListView(
   children: <Widget>[
    FirstWidget(),
    SecondWidget(),
    ThirdWidget(),
  ],
 );
}

This version of ListView is great for a small number of widgets to display, but where ListView really shines is when you want to display a list of things – people, products, stores – anything you’d retrieve from a database or Ajax service. For displaying an indeterminate number of scrollable items, we’ll want the ListView.builder constructor.

ListView.builder: When you’re building widgets from a list of objects

ListView’s alternative constructor, ListView.builder receives two parameters, an itemCount and an itemBuilder property that is a function. This makes the ListView lazy-loaded. The itemBuilder function dynamically creates children widgets on demand. As the user scrolls close to the bottom of the list, itemBuilder creates new items to be scrolled into view.
And when we scroll something far enough off the screen, it is paged out of memory and disposed of. Pretty cool.

Widget _build(BuildContext context) {
     return ListView.builder(
          scrollDirection: Axis.vertical, //You can also use the Axis.horizontal
          itemCount: _people.length,
          itemBuilder: (BuildContext context, int i) {
            return PersonCard(_peopleList[i]);
    },
     );
}

The itemCount property is an integer that tells us how many things we’re going to draw so we usually set it to the length of the array/collection of things we’re scrolling through. The itemBuilder function receives two parameters: the context and an integer which is 0 for the first item and increments each time it is run.

We’ve covered laying out the scene including what to do if there is extra space on the scene or there isn’t enough of it. So let’s cover the last of our five topics, how to fine-tune the spacing and position of widgets. We’ll do this by exploring the box model.

RelatedFlutter Resource

Code Editor Package Flutter
Dart

How To Build A Code Editor App In Flutter with code_editor Plugin

August 3, 2020
Flutter Form & FormField Widget - Implementation & Example
Flutter Packages

Flutter Form & FormField Widget – Implementation & Example

July 30, 2020
flutter buttons, materialbutton, flatbutton, cupertinobutton, dismissible, iconbutton
Flutter Widgets

All Flutter Buttons – [RaisedButton, FlatButton, IconButton, FloatingActionButton, Dismissible]

July 27, 2020
custom fonts text style flutter
Flutter Widgets

Flutter Custom Fonts and How to Style Text

July 24, 2020
Understanding the Flutter COntainer
Flutter Widgets

Container Widget & Box Model in Flutter – All You Need To Know

July 22, 2020
gridview widget flutter
Flutter Widgets

How to use the Flutter GridView.count, GridView.extent

July 20, 2020
Next Post
forEach map where flutter

Understanding Flutter forEach(), map(), where()

Flutter Simple Weather App + Source Code

Flutter Simple Weather App + Source Code

Leave a Reply Cancel reply

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

Recommended Stories

Flutter Simple Weather App + Source Code

Flutter Simple Weather App + Source Code

August 6, 2020
Flutter Tab Bar

How to Create a Tab Bar/Tab Controller/Bottom TabBar in Flutter

July 14, 2020
What Is A “Completer” in Flutter Dart

What Is A “Completer” in Flutter Dart

June 24, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In