Skip to main content

All about ListView

ListView InDepth Review - Flutter



When we need widgets stacked up one below another, we use ListView. There are four ways in which you can use a ListView.

We will see each of them in use one by one.


First Method : Normally Calling ListView widget.



class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            color: Colors.red,
            child: Text('Element 1'),
          ),
          Container(
            color: Colors.blue,
            child: Text('Element 2'),
          ),
          Container(
            color: Colors.green,
            child: Text('Element 3'),
          ),
          Container(
            color: Colors.orange,
            child: Text('Element 4'),
          ),
        ],
      ),
    );
  }
}


So in FirstMethod we simply use ListView Widget and use the children property to add in the children's.

Second Method : Using ListView.builder()


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> myList = ['Element 1', 'Element 2', 'Element 3', 'Element 4'];
  List<Color> mycolor = [Colors.red, Colors.blue, Colors.green, Colors.orange];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: myList.length,
        itemBuilder: (context, index) {
          return Container(
            color: mycolor[index],
            child: Text(myList[index]),
          );
        },
      ),
    );
  }
}


In Second method we create list of widgets dynamically we need to pass the item count and create a build method which has two parameters
  1. Context
  2. Index
Context is basically the screen on which the item will be returned and index is basically a number using which we will access the list's. So let us take the list myList as mentioned in code, index will basically run through as 0, 1, 2 and 3 because we had set the count to the length of myList. suppose we set the item count to 2 then the index will run through 0 and 1. We use the index number to access the elements in the list but well you can do anything you like with it.

Third Method : Using ListView.separated()


class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<String> myList = ['Element 1', 'Element 2', 'Element 3', 'Element 4'];
  List<Color> mycolor = [Colors.red, Colors.blue, Colors.green, Colors.orange];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.separated(
        itemCount: myList.length,
        itemBuilder: (context, index) {
          return Container(
            color: mycolor[index],
            child: Text(myList[index]),
          );
        },
        separatorBuilder: (BuildContext context, int index) {
          return Container(
            child: Text('This Widget is called to separate'),
          );
        },
      ),
    );
  }
}

ListView.separated provides us with another parameter which is a separatorBuilder. it also takes in a context and an index. The child is basically a separator which separates the list items.


Output for 1st & 2nd Method:


Output for 3rd Method:




If you enjoyed, subscribe for more. Check out for In Depth Review of Text Widget & Stateless Vs Stateful Widgets.

Labels:

Popular posts from this blog

All about GridView - Flutter

GridView in Flutter - Learn About GridView In Depth When we need widgets stacked like in a grid, we use GridView. There are two main ways in which you can use a GridView.  First Method, Using GridView.count() GridView.count requires 2 things, the first is cross axis count which tells how many boxes or grids will be there in one row. The second is children property which takes in  a list of widget. Second Method, Using GridView.builder() GridView.builder() takes in various parameters, one is itemCount which takes in number of items we want to display. Other required property is gridDelegate controls the layout of the tiles in gridView and the last property which we will talk about is itemBuilder which is similar to the one used in  List View . itemBuilder takes in a function with two parameters, context and index. context tells where to place the child on screen or basically which context to place the child in and index is a number which runs through 0 to itemCount - 1. If...
Read more

Text Widget In Depth - Flutter

What's the most used widget in flutter? Text Widget. We use Text Widget in flutter to render text to our application. Text widget is very commonly used as an independent widget or as a sub widget in some other widget. E.g. as a child to a RaisedButton. Here is a small code which uses almost all the properties you might use when developing flutter application for Text Widget and also shows how you can use Text.rich() for multiple formatting of the text. import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @ override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , home: HomePage(), ); } } class HomePage extends StatefulWidget { @ override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @ override Widget build(BuildContext context) { return Scaffold( bo...
Read more