How to build this view for n number of removable cards? - flutter

Question

Which widget would be best to use? If listview.builder then can you please share a sample code? This is the UI.

Answer 1

GridView is the widget you're looking for. Just use GridView.count will give you the desired result
Implementation of GridView.count()
#override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
children: List.generate(10, (index) => const DemoCard()));
}
And here the full example:
import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2,
children: List.generate(10, (index) => const DemoCard()));
}
}
class DemoCard extends StatelessWidget {
const DemoCard({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.all(8),
width: 200,
height: 200,
child: Card(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
elevation: 10,
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(
Icons.developer_mode,
color: Colors.blue,
size: 50,
),
const SizedBox(height: 10),
Text(
'Demo Text',
style: Theme.of(context)
.textTheme
.titleMedium!
.copyWith(fontWeight: FontWeight.bold),
),
const SizedBox(height: 2),
Text(
'Sub-Demo Text',
style: Theme.of(context).textTheme.titleMedium!.copyWith(
fontWeight: FontWeight.w600, color: Colors.lightBlue),
),
const Expanded(child: SizedBox()),
Row(
children: [
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: TextButton(
child: const Text('Edit Privilage'),
onPressed: () {},
),
),
),
const Icon(Icons.delete, color: Colors.red),
],
),
],
),
),
),
);
}
}
The result would be:

Answer 2

You can implement it in two ways:
GridView Widget
flutter_staggered_grid_view Package