Wrap Widget in Flutter - GeeksforGeeks

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 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).

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,))
          ),
        ],
      ),
    );
  }
}

Explaination:

direction: Axis.horizontal // default

Output:

wrap wiggets

direction: Axis.vertical

Output:

wrap wiggets

alignment: WrapAlignment.center

Output:

wrap wiggets

alignment: WrapAlignment.center,
spacing:8.0,

Output:

wrap wiggets

alignment: WrapAlignment.center,
spacing:8.0,
runSpacing: 8.0,

Output:

wrap wiggets

spacing:8.0,
runSpacing: 8.0,
textDirection: TextDirection.rtl,

Output:

wrap wiggets

spacing:8.0,
runSpacing: 8.0,
verticalDirection: VerticalDirection.up,

Output:

wrap wiggets

My Personal Notes

Properties:

Implementation with Example:

Dart

Explaination:

Recommended Posts: