Wrap widget aligns the widgets in a horizontal and vertical manner. Generally, we use Rows and Columns to do that but if we have some widgets which are not able to fit in the Row/Column then it will give us Overflow Message ( for ex: Right Overflowed by 570 pixels).
Constructor of Wrap class:
Wrap({Key key,
Axis direction,
WrapAlignment alignment,
double spacing,
WrapAlignment runAlignment,
double runSpacing,
WrapCrossAlignment crossAxisAlignment,
TextDirection textDirection,
VerticalDirection verticalDirection,
List<Widget> children})Properties:
- direction: By default, the axis is horizontal but we can make it vertical by changing the axis from Axis.horizontal to Axis.vertical.
- alignment: We can set the alignment property to align widgets. (for ex : alignment : WrapAlignment.center).
- spacing: We can give space between the children.
- runAlignment: It shows how runs themselves should be placed in the cross axis. By default, we have runAlignment as WrapAlignment.start.
- runSpacing: We can give runSpacing between the runs. (ex: runSpacing:5.0).
- crossAxisAlignment: We can align the children relative to each other in cross Axis.
- textDirection : We can arrange children in a row using textDirection (for ex : textDirection: TextDirection.rtl to arrange from right to left).
- clipBehaviour: This property takes in Clip enum as the object to decide whether the content inside the Wrap widget will be clipped or not.
- children: The children property takes in a list of widgets as the object to show inside the Wrap widget or below the Wrap widget in the widget tree.
- verticalDirection: This property takes in VerticalDirection enum as the object to. This property decides the order in which each children widget will be painted on the screen in a vertical sense.
- runtimeType: Type class is the object given to the runtimeType property. It determines the type of the Wrap widget at the run time.
- key: This property decides how one widget will replace another widget on the screen.
- haskCode: This property takes in an int value as the object which represents the state of the widget.
Implementation with Example:
main.dart
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "GFG",
theme: new ThemeData(
primarySwatch: Colors.green
),
debugShowCheckedModeBanner: false,
home: WrapW()
);
}
}class WrapW extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text("GeeksForGeeks"),
),
body: Wrap(
// direction: Axis.vertical,
// alignment: WrapAlignment.center,
// spacing:8.0,
// runAlignment:WrapAlignment.center,
// runSpacing: 8.0,
// crossAxisAlignment: WrapCrossAlignment.center,
// textDirection: TextDirection.rtl,
// verticalDirection: VerticalDirection.up,
children: <Widget>[
Container(
color: Colors.blue,
width: 100,
height: 100,
child:Center(child: Text("W1",textScaleFactor: 2.5,))
),
Container(
color: Colors.red,
width: 100,
height: 100,
child:Center(child: Text("W2",textScaleFactor: 2.5,))
),
Container(
color: Colors.teal,
width: 100,
height: 100,
child:Center(child: Text("W3",textScaleFactor: 2.5,))
),
Container(
color: Colors.indigo,
width: 100,
height: 100,
child:Center(child: Text("W4",textScaleFactor: 2.5,))
),
Container(
color: Colors.orange,
width: 100,
height: 100,
child:Center(child: Text("W5",textScaleFactor: 2.5,))
),
],
),
);
}
} |
Explanation:
direction: Axis.horizontal // default
Output:
direction: Axis.vertical
Output:
alignment: WrapAlignment.center
Output:
alignment: WrapAlignment.center, spacing:8.0,
Output:
alignment: WrapAlignment.center, spacing:8.0, runSpacing: 8.0,
Output:
spacing:8.0, runSpacing: 8.0, textDirection: TextDirection.rtl,
Output:
spacing:8.0, runSpacing: 8.0, verticalDirection: VerticalDirection.up,
Output: