rounded card list in Flutter

In Flutter, you can create a rounded card list using a 'ListView' and 'Card' widgets.

Here's an example of how you can do it:

import 'package:flutter/material.dart';

class RoundedCardList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                Text('Card Title'),
                Text('Card Subtitle'),
              ],
            ),
          ),
        ),
        // Add more Card widgets here
      ],
    );
  }
}

In this example, a ListView is used to display a list of Card widgets. Each Card widget has a shape property set to RoundedRectangleBorder with a borderRadius of 10.0. This creates a rounded border on the card. You can adjust the borderRadius value to change the roundness of the card. You can add more Card widgets to the ListView as needed.

You can also use a Card widget as child of a ListView.builder and put the list of items you want to show in a list and pass it to the ListView.builder function.

 

class RoundedCardList extends StatelessWidget {
  final List<String> items;
  RoundedCardList({@required this.items});
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Column(
              children: <Widget>[
                Text(items[index]),
              ],
            ),
          ),
        );
      },
    );
  }
}

You can use this RoundedCardList as a normal widget in any other widgets passing the list of items you want to show.

RoundedCardList(items:["Item 1", "Item 2"])

You can customize the Card widget further by adding additional properties such as an elevation to create a shadow effect, and an onTap callback function to handle user interactions with the card.