Flutter tutorial on ListView || Android, iOS ListView

 

Flutter Listview :

In this part of the tutorial we will be dealing with the flutter ListView a very basic requirement of every app we deal now a days.

So to make it much easier i have taken a simple context where we will be displaying a user list with contact numbers and email id as a basic information of a user in the form of a flutter ListView i.e., using dart language.

As we are all familiar with the concept of flutter for new beginner’s may visit what is flutter?

In the initial stage we start as usually designing the screen widgets but before to that we are using a simple user image in this tutorial so for that we need to added it to our project and also specify it in the ‘pubspec.yaml’ file as below

 

-> Add a folder named ‘images’ in your project and add your images under that folder.

-> Next important step is to specify it ‘pubspec.yaml’

-> Under flutter section you will find the sub section ‘assets’ which is commented initially so make use of it and specify your assets

 

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - images/user.png

 

Now your image assets is ready to use in your project.

 

Project Modules

  1. constants
  2. data
  3. screens

 

 colors.dart

Under the constants module we are specifying the colors we are going to use in the project so that we can use them through out the project maintaining the consistency.

 

import 'package:flutter/material.dart';

final primary = Colors.indigo;
final secondary = Colors.black;
final background = Colors.white10;

 

data.dart

Users details are specified in the form of a map using which we can generate a flutter listview.

we are dealing with basic details of user like name, contact number and email.

{
  "name": "Abhi",
  "country": "India",
  "mobile": "9876543210",
  "email": "abhi@email.com"
},

 

You may add few more fields depending on your requirement but make sure to update code accordingly.

 

final List<Map> details = [
  {
    "name": "Abhi",
    "country": "India",
    "mobile": "9876543210",
    "email": "abhi@email.com"
  },
  {
    "name": "Raj",
    "country": "India",
    "mobile": "1234567890",
    "email": "raj@email.com"
  },
  {
    "name": "Vikram",
    "country": "India",
    "mobile": "5432167890",
    "email": "vikram@email.com"
  },
  {
    "name": "Nick",
    "country": "India",
    "mobile": "9876543210",
    "email": "nick@email.com"
  },
  {
    "name": "John",
    "country": "India",
    "mobile": "7654321890",
    "email": "john@email.com"
  },
  {
    "name": "Jack",
    "country": "India",
    "mobile": "4321012345",
    "email": "jack@email.com"
  },
];

 

Flutter listview :

main.dart

Specify the basic details of app like app bar title, body and also removing the debug banner. In a class extending the Statelesswidget.

 

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Listview'),
        ),
        body: MyApp(),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

 

Now create a StatefulWidget and create a state  for class

 

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  _MyAppState createState() => _MyAppState();
}

using this state create a class which extends the state

 

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: background,
     
    );
  }
}

 

Adding body to the class which has scroll effect so that list can be scroll-able using SingleChildScrollView. Also specify the height and width for the container.

Using a Stack layout widget add a container which contains ListView.builder

SingleChildScrollView(
  child: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: Stack(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(top: 25),
          height: MediaQuery.of(context).size.height,
          width: double.infinity,
          child: ListView.builder(
              itemCount: details.length,
              itemBuilder: (BuildContext context, int index) {
                return userList(context, index);
              }),
        ),
      ],
    ),
  ),
),

 

userlist.dart

We design flutter listview which we specified in main.dart.

A basic user icon is specified

Center(
  child: Container(
      width: 70,
      height: 70,
      margin: EdgeInsets.only(right: 15),
      child: Image(image: AssetImage('images/user.png'))),
),

 

Then details view is specified using Expanded widget.

Expanded(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text(
        details[index]['name'],
        style: TextStyle(
            color: primary, fontWeight: FontWeight.bold, fontSize: 18),
      ),
      SizedBox(
        height: 6,
      ),
      Row(
        children: <Widget>[
          Icon(
            Icons.location_on,
            color: secondary,
            size: 20,
          ),
          SizedBox(
            width: 5,
          ),
          Text(details[index]['country'],
              style: TextStyle(
                  color: primary, fontSize: 13, letterSpacing: .3)),
        ],
      ),
      SizedBox(
        height: 6,
      ),
      Row(
        children: <Widget>[
          Icon(
            Icons.call,
            color: secondary,
            size: 20,
          ),
          SizedBox(
            width: 5,
          ),
          Text(details[index]['mobile'],
              style: TextStyle(
                  color: primary, fontSize: 13, letterSpacing: .3)),
        ],
      ),
    ],
  ),
),

 

Complete Code:

Providing the complete code for flutter listview for implementation

main.dart
import 'package:flutter/material.dart';
import 'package:flutter_listview/data/data.dart';
import '../constants/colors.dart';
import 'userlist.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Listview'),
        ),
        body: MyApp(),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: background,
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          child: Stack(
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(top: 25),
                height: MediaQuery.of(context).size.height,
                width: double.infinity,
                child: ListView.builder(
                    itemCount: details.length,
                    itemBuilder: (BuildContext context, int index) {
                      return userList(context, index);
                    }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
userlist.dart
import 'package:flutter/material.dart';
import 'package:flutter_listview/data/data.dart';
import '../constants/colors.dart';

Widget userList(BuildContext context, int index) {
  return Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), bottomRight: Radius.circular(10)),
      color: Colors.black12,
    ),
    width: double.infinity,
    height: 120,
    margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
    padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Center(
          child: Container(
              width: 70,
              height: 70,
              margin: EdgeInsets.only(right: 15),
              child: Image(image: AssetImage('images/user.png'))),
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                details[index]['name'],
                style: TextStyle(
                    color: primary, fontWeight: FontWeight.bold, fontSize: 18),
              ),
              SizedBox(
                height: 6,
              ),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.location_on,
                    color: secondary,
                    size: 20,
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Text(details[index]['country'],
                      style: TextStyle(
                          color: primary, fontSize: 13, letterSpacing: .3)),
                ],
              ),
              SizedBox(
                height: 6,
              ),
              Row(
                children: <Widget>[
                  Icon(
                    Icons.call,
                    color: secondary,
                    size: 20,
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Text(details[index]['mobile'],
                      style: TextStyle(
                          color: primary, fontSize: 13, letterSpacing: .3)),
                ],
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

 

Output:

This screen depicts the flutter listview for more info on flutter

flutter listview

 

 

If you have any queries in this tutorial on flutter listview do let us know in the comment below also do like and share this tutorial for more interesting updates.

 

 

 

 

Show Buttons
Hide Buttons
Read previous post:
Android tutorial on fragments || Android Fragments

  Introduction: Android fragment is light weight UI components providing you a flexible within a activity it can also be...

Close