List with spaced items

 import "package:flutter/material.dart";


void main()
{
runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "List with spaced items",
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.grey,
colorScheme: ColorScheme.fromSeed(seedColor: Colors.grey),
cardTheme: const CardTheme(color: Colors.grey),
useMaterial3: true,
),
home: ListWithSpacedItems(),
);
}
}
class ListWithSpacedItems extends StatelessWidget
{
ListWithSpacedItems({super.key});
var items = 20;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("List with spaced items", style: TextStyle(fontWeight: FontWeight.bold),),
centerTitle: true,
backgroundColor: Colors.grey,
),
body: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraints.maxHeight),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: List.generate(items, (index) {
return ItemWidget(text: "Item $index");
},),
),
),
);
},
),
);
}
}
class ItemWidget extends StatelessWidget
{
const ItemWidget({super.key, required this.text});
final String text;

@override
Widget build(BuildContext context) {
return Card(
child: SizedBox(
height: 100.0,
child: Center(child: Text(text,
style: const TextStyle(color: Colors.white, fontSize: 30.0),),),
),
);
}
}

Comments

Popular posts from this blog

Second GET API Calling with Bloc simple Example in Flutter

Stack Container Scrollable Card widget UI with Custom Widget

Pagination with Bloc Pattern in Flutter