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
- constants
- data
- 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
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.