ListView dynamic data display
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
//STATUS BAR SET
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.light,
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
@override
createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<StudentResponse> studentList = []; //EMPTY LIST
@override
void initState() {
super.initState();
setState(() {
studentList = studentData();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('ListView Student')),
body: ListView(children: [
...studentList
.map((e) => Card(
child: Container(
padding: EdgeInsets.all(10),
child: Row(children: [
//FIRST CHARACTER
CircleAvatar(
radius: 24,
child: Text(e.name[0],
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500))),
SizedBox(width: 10),
//NAME, ADDRESS
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(e.name,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w500)),
SizedBox(height: 5),
Text(e.address,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500))
])),
//FAVOURITE
IconButton(
onPressed: () {
int findIndex = studentList.indexWhere(
(element) => element.userId == e.userId);
setState(() {
studentList[findIndex].isFavourite =
!studentList[findIndex].isFavourite;
});
},
icon: Icon(
e.isFavourite
? Icons.favorite
: Icons.favorite_border,
color: Colors.grey))
]))))
.toList()
])
);
}
}
//STUDENT MODEL CLASS
class StudentResponse {
int userId;
String name, address;
bool isFavourite;
StudentResponse(
{this.userId, this.name, this.address, this.isFavourite = false});
}
//STUDENT STORE DATA RETURN List<StudentResponse>
studentData() => [
StudentResponse(
userId: 1,
name: 'Kamlesh',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh'),
StudentResponse(
userId: 2,
name: 'Nayan',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh'),
StudentResponse(
userId: 3,
name: 'Hirva',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh '),
];
ListView using Favourite Null Safety
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
//STATUS BAR SET
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.light,
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
@override
createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late List<StudentResponse> studentList = []; //EMPTY LIST
@override
void initState() {
super.initState();
setState(() {
studentList = studentData();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('ListView Student')),
body: ListView(children: [
...studentList
.map((e) => studentWidget(
name: e.name,
address: e.address,
favourite: e.isFavourite,
onTapFavourite: () {
int findIndex = studentList
.indexWhere((element) => element.userId == e.userId);
setState(() {
studentList[findIndex].isFavourite =
!studentList[findIndex].isFavourite!;
});
}))
.toList()
]));
}
studentWidget(
{String? name,
String? address,
bool? favourite,
Function()? onTapFavourite}) =>
Card(
child: Container(
padding: EdgeInsets.all(10),
child: Row(children: [
//FIRST CHARACTER
CircleAvatar(
radius: 24,
child: Text(name![0],
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.w500))),
SizedBox(width: 10),
//NAME, ADDRESS
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(name,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w500)),
SizedBox(height: 5),
Text(address!,
style: TextStyle(
fontSize: 14, fontWeight: FontWeight.w500))
])),
//FAVOURITE
IconButton(
onPressed: onTapFavourite,
icon: Icon(
favourite! ? Icons.favorite : Icons.favorite_border,
color: Colors.grey))
])));
}
//STUDENT MODEL CLASS
class StudentResponse {
int? userId;
String? name, address;
bool? isFavourite;
StudentResponse(
{this.userId, this.name, this.address, this.isFavourite = false});
}
//STUDENT STORE DATA RETURN List<StudentResponse>
studentData() => [
StudentResponse(
userId: 1,
name: 'Kamlesh',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh'),
StudentResponse(
userId: 2,
name: 'Nayan',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh'),
StudentResponse(
userId: 3,
name: 'Hirva',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh '),
];
Also Read :Animated ListView In Flutter
ListView with Common Student Widget
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
//STATUS BAR SET
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarBrightness: Brightness.light,
statusBarIconBrightness: Brightness.light,
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
@override
createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<StudentResponse> studentList = []; //EMPTY LIST
@override
void initState() {
super.initState();
setState(() {
studentList = studentData();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('ListView Student')),
body: ListView(children: [
...studentList
.map((e) => studentWidget(
name: e.name,
address: e.address,
favourite: e.isFavourite,
onTapFavourite: () {
int findIndex = studentList
.indexWhere((element) => element.userId == e.userId);
setState(() {
studentList[findIndex].isFavourite =
!studentList[findIndex].isFavourite;
});
}))
.toList()
]));
}
studentWidget(
{String name,
String address,
bool favourite,
Function() onTapFavourite}) =>
Card(
child: Container(
padding: EdgeInsets.all(10),
child: Row(children: [
//FIRST CHARACTER
CircleAvatar(
radius: 24,
child: Text(name[0],
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.w500))),
SizedBox(width: 10),
//NAME, ADDRESS
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(name,
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.w500)),
SizedBox(height: 5),
Text(address,
style: TextStyle(
fontSize: 14, fontWeight: FontWeight.w500))
])),
//FAVOURITE
IconButton(
onPressed: onTapFavourite,
icon: Icon(
favourite ? Icons.favorite : Icons.favorite_border,
color: Colors.grey))
])));
}
//STUDENT MODEL CLASS
class StudentResponse {
int userId;
String name, address;
bool isFavourite;
StudentResponse(
{this.userId, this.name, this.address, this.isFavourite = false});
}
//STUDENT STORE DATA RETURN List<StudentResponse>
studentData() => [
StudentResponse(
userId: 1,
name: 'Kamlesh',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh'),
StudentResponse(
userId: 2,
name: 'Nayan',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh'),
StudentResponse(
userId: 3,
name: 'Hirva',
address: 'To. Ravani Ta.Visavadar Dis.Junagadh '),
];
Now you can understand how ListView SetState Custom Widget and Null Safety works for more tutorial stay connected
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
