
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