ListView SetState Custom Widget and Null Safety

ListView SetState Custom Widget and Null Safety

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