How to make custom widget with some dynamic child in flutter?

Question

I am making a demo for learning basis...where I have created a Custom widget with the use of LISTTILE..

I have actually 3 BottomNvigatationBarItem [ alimonies, favmovies and deletedMovies] which all showing list of movies

but I want trailing different in all 3 screens like

all movies with Delete and Fav icon, Fav movies with only Fav Icon, and Deleted Movies with restore and delete icon

here is my custom widget code

class MyCard extends StatelessWidget {

  final Movie e;
  final VoidCallback taponfav;
  final VoidCallback tapondel;
  //todo delete should be optional
  MyCard({required this.e,required this.taponfav,required this.tapondel});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(e.name.toString()),
        subtitle: Text(e.language),
        trailing: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
                icon: userlist[0].favmovies.contains(e) == true
                    ? Icon(Icons.favorite)
                    : Icon(Icons.favorite_outline),
                onPressed: taponfav),

            IconButton(
                icon: Icon(Icons.delete),
                onPressed: tapondel),
          ],
        ),
        leading: CircleAvatar(
          backgroundImage: NetworkImage(e.imageurl),
        ),
      ),
    );
  }
}

and here is a single screen code to show how I use my card

 body: ListView(
        children: movielist
            .map((e) => MyCard(e: e, taponfav: (){
          if(userlist[0].favmovies.contains(e)==true)
            userlist[0].favmovies.remove(e);
          else
            userlist[0].favmovies.add(e);

          setState(() {
          });
        },tapondel: (){

              showDialog(context: context, builder: (ctx){

                return AlertDialog(
                  title: Text('Are u sure to delete?...'),
                  actions: [TextButton(onPressed: (){
                    Navigator.of(ctx).pop();
                    userlist[0].deletedmovies.add(e);

                    movielist.remove(e);
                    setState(() {

                    });

                    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                      duration: Duration(seconds: 4),
                      content: Text(e.name+' Is Deleted'),));

                  },child: Text('Yes'),),
                  TextButton(onPressed: (){
                    Navigator.of(ctx).pop();
                  }, child: Text('No')),

                  ],
                );
              });
             setState(() {
             });

        },),)
            .toList(),
      ),

In my list tile...number of trailing icon button can be different In all screen where this widget is used...so how to make it dynamic — Irfan Ganatra
– Irfan Ganatra, Commented Jul 18, 2022 at 13:13

Prabhakaran · Accepted Answer · 2022-07-19 07:41:18Z

I hope this helps.

Create a CardButton class like this.

class CardButton {
  final IconData icon;
  final VoidCallback onTap;
  CardButton({required this.icon, required this.onTap});
}

Modify your card widget like this

class MyCard extends StatelessWidget {
  const MyCard({Key? key, required this.movie, required this.cardButtons})
      : super(key: key);

  final Movie movie;
  final List<CardButton> cardButtons;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(movie.name.toString()),
        subtitle: Text(movie.language),
        trailing: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            for (int i = 0; i < cardButtons.length; i++)
              IconButton(
                  onPressed: cardButtons[i].onTap,
                  icon: Icon(cardButtons[i].icon))
          ],
        ),
        leading: CircleAvatar(
          backgroundImage: NetworkImage(movie.imageurl),
        ),
      ),
    );
  }
}

Access it like this on your main Page

ListView(
        children: movielist.map((movie) {
          List<CardButton> cardButtons = [
            CardButton(
                icon: Icons.add,
                onTap: () {
                  print('add');
                }),
            CardButton(
                icon: Icons.delete,
                onTap: () {
                  print('del');
                })
          ];
          return MyCard(movie: movie, cardButtons: cardButtons);
        }).toList(),
      )

And you can add or remove or change icons based on the condition on the main page.

Hamed Rezaee · Accepted Answer · 2022-07-19 02:21:43Z

0

You can remove this Row Widget: Code Snippet and pass Widget instead. Then implement Your Row Widget As you want every time you call Your custom Widget MyCard.

edited Jul 19, 2022 at 2:21

Hamed Rezaee

7,2986 gold badges44 silver badges63 bronze badges

answered Jul 16, 2022 at 14:49

Eman Hamad

11 bronze badge

2 Comments

Irfan Ganatra Over a year ago

That's okay..removing is a solution but what if I want to keep it...is it not possible by keeping it...I am confuse with function list..how I can know in advance what row children going to come...

Irfan Ganatra Over a year ago

like array of VoidCallBack

Collectives™ on Stack Overflow

How to make custom widget with some dynamic child in flutter?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related