Flutter wrap組件的應用

（一）效果圖

（二）實現要點
按鈕可以使用構造函數

（三）代碼實現

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('甜寵軟妹'),
        centerTitle: true,
      ),
      body: WrapDemo(),
    ));
  }
}

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(//流佈局
      spacing: 10,//水平間距
      runSpacing: 10,//縱軸間距，一般有默認間距，不用設置太大
      children: <Widget>[
        MyButton("master"),
        MyButton("master mine"),
        MyButton("master"),
        MyButton("master you"),
        MyButton("master"),
        MyButton("master lucky"),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;
  //構造函數
  const MyButton(this.text, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(text),
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
}