How to Align Child Widgets in Wrap() in Flutter

In this post, will show you how to align the child widgets and elements on Wrap() widget. You can align the center, justify, left, right or space between widget. See the example below for more details:

How to Align Children in Wrap():

Wrap(
    alignment: WrapAlignment.start,
    children:[]
)

This will align children to the top left, or the start corner of the widget. Alternatively, you can use Align() widget too like below:

Align( 
  alignment: Alignment.topLeft,
  child:Wrap(
    children:[]
  )
)

Full Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          body: Container(
            padding: EdgeInsets.only(top:80, left:20, right:20),
            child: Wrap(
                alignment: WrapAlignment.start,
                children: [
                  
                  Container( 
                     color:Colors.black,
                     height:100, width:100
                  ),

                  Container( 
                     color:Colors.blue,
                     height:100, width:100
                  ),

                  Container( 
                     color:Colors.red,
                     height:100, width:100
                  ),

                  Container( 
                     color:Colors.red,
                     height:100, width:100
                  ),
            ],)
          )
       );
  }
}

The output of this Code:

In this way, you can align the children widget in Wrap() widget in Flutter.