Wrap Widget

 import "package:flutter/material.dart";


void main() {
runApp(MyApp(),);
}
class MyApp extends StatelessWidget {
MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Wrap Widget demo",
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: WrapDemo(),
);
}
}
class WrapDemo extends StatelessWidget {
WrapDemo({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wrap Widget"),
),
body: Container(
width: double.infinity,
height: double.infinity,
child: Wrap(
// direction: Axis.horizontal,
direction: Axis.vertical,
// alignment: WrapAlignment.center,
alignment: WrapAlignment.spaceEvenly,
// alignment: WrapAlignment.spaceBetween,
// alignment: WrapAlignment.spaceEvenly,
spacing: 11.0,
runSpacing: 11.0,
children: [
Container(
width: 100,
height: 100,
color: Colors.deepOrange,
),
Container(
width: 100,
height: 100,
color: Colors.deepPurple,
),
Container(
width: 100,
height: 100,
color: Colors.green,
),
Container(
width: 100,
height: 100,
color: Colors.lightGreen,
),
Container(
width: 100,
height: 100,
color: Colors.indigo,
),
Container(
width: 100,
height: 100,
color: Colors.pink,
),
Container(
width: 100,
height: 100,
color: Colors.cyan,
),
Container(
width: 100,
height: 100,
color: Colors.greenAccent,
),
Container(
width: 100,
height: 100,
color: Colors.black,
),
Container(
width: 100,
height: 100,
color: Colors.lightGreenAccent,
),
Container(
width: 100,
height: 100,
color: Colors.purpleAccent,
),
Container(
width: 100,
height: 100,
color: Colors.orangeAccent,
),
Container(
width: 100,
height: 100,
color: Colors.teal,
),
Container(
width: 100,
height: 100,
color: Colors.grey,
),
],
),
),
);
}
}

Comments

Popular posts from this blog

Pagination with Bloc Pattern in Flutter

Pagination First Practical in Flutter

ExpansionPanel with ExpansionPanelList with Complete Collapse Operation in Flutter