CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-web
robert patrik
robert patrik

Reputation: 89

Multiple cards inside a listview in flutter

I am a beginner in Flutter. I want to add another card in the listview mentioned in the following code.

  Widget section4 = Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
);

I tried with this but it is showing error. Also, is there a way where I can create this list using a loop in Flutter?

Widget section4 = Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
  ),
);

Upvotes: 1

Views: 7373

Answers (1)

Unbreachable
Unbreachable

Reputation: 744

You can simply use a ListView.builder() like so:

ListView.builder(
            itemCount: 3, // the length
            itemBuilder: (context, index) {
              return Container(
                padding: const EdgeInsets.only(bottom: 8),
                child: Card(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const ListTile(
                        leading: FlutterLogo(size: 56.0),
                        title: Text('Item 1'),
                        subtitle: Text('Item 1 subtitle'),
                        trailing: Icon(Icons.access_alarm),
                      ),
                    ],
                  ),
                ),
              );
            })

or if you want to keep the Widgets in a separate list, you can also do this:

 List<Widget> section4 = [
     Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
),
      Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
),
      Container(
  padding: const EdgeInsets.only(bottom: 8),
  child:Card(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: FlutterLogo(size: 56.0),
          title: Text('Item 1'),
          subtitle: Text('Item 1 subtitle'),
          trailing: Icon(Icons.access_alarm),
        ),
      ],
    ),
    
  ),
)
     ];

Then just put it inside a widget that has the children property:

 body:  Column(
                children: section4
          
)

Upvotes: 2

Related Questions