Wrap Widget

Wrap Widget

..........................................................................................................................................................................................................................................
Example :#1[spacing, runSpacing]

import 'package:flutter/cupertino.dart';
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) {
    final data = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text('Offers',
                  style: TextStyle(
                      fontSize: 28,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                  textAlign: TextAlign.center),
            ),
          ),
          //chips
         Wrap(
           direction: Axis.horizontal,
            spacing: 10.0,
           runSpacing: 5.0,
           children: <Widget>[
             myChips('Discount'),
             myChips('Sales'),
             myChips('Clearns'),
             myChips('Items'),
             myChips('Gifts'),


           ],
         )
        ],
      ),
    );
  }
  Container myChips (String chipName){
    return Container(
      child: RaisedButton(
        child: Text(chipName, style: TextStyle(fontWeight: FontWeight.bold, color: Colors.indigo[800], ),),
        onPressed: (){},
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
      ),
    );
  }
}

..........................................................................................................................................................................................................................................
Example :#2

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: MyHome(),
    );
  }
}
class MyHome extends StatefulWidget{
  @override
  MyHomeState createState()=>MyHomeState();
}
class MyHomeState extends State<MyHome>{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          width: 400,
          height: 200,
          color: Colors.purple,
          child: Wrap(
            direction: Axis.horizontal,
            textDirection: TextDirection.rtl,
            runAlignment: WrapAlignment.center,
            alignment: WrapAlignment.spaceAround,
           verticalDirection: VerticalDirection.up,
           // alignment: WrapAlignment.center,
            spacing: 10.0,
            runSpacing: 5.0,
            children: <Widget>[
              MyButton('Btn 1'),
              MyButton('Btn 2'),
              MyButton('Btn 3'),
              MyButton('Btn 4'),
              MyButton('Btn 5'),
            //  MyButton('Btn 6'),

            ],
          ),
        ),
      ),
    );
  }
  Container MyButton(String text){
    return Container(
      child: RaisedButton(
        onPressed: (){},
        child: Text(text),
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
      ),
    );
  }
}

..........................................................................................................................................................................................................................................
Example :#3[spacing, runspacing]

..........................................................................................................................................................................................................................................
Example :#4[spacing, runspacing]