Flutter Widget之Wrap

Widget：https://flutter.io/docs/development/ui/widgets
Wrap：https://docs.flutter.io/flutter/widgets/Wrap-class.html

import 'package:flutter/material.dart';

class WrapDemoPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _WrapDemoPagePageState();
}

class _WrapDemoPagePageState extends State<WrapDemoPage> {
  @override
  void initState() {
    super.initState();
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Wrap Demo'),
      ),
//      body: Wrap(
//        spacing: 8.0, // gap between adjacent chips
//        runSpacing: 4.0, // gap between lines
//        children: <Widget>[
//          Chip(
//            avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('A')),
//            label: Text('Android'),
//          ),
//          Chip(
//            avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('I')),
//            label: Text('iOS'),
//          ),
//          Chip(
//            avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('A')),
//            label: Text('AppBlog.CN'),
//          ),
//          Chip(
//            avatar: CircleAvatar(backgroundColor: Colors.blue.shade900, child: Text('W')),
//            label: Text('Windows'),
//          ),
//        ],
//      )
      body: Align(
        alignment: Alignment.topCenter,
        child: Wrap(
          spacing: 10.0,
          runSpacing: 5.0,
          direction: Axis.horizontal,
          alignment: WrapAlignment.start,
          children: <Widget>[
            MyButton("西游记"),
            MyButton("三国演义"),
            MyButton("红楼梦"),
            MyButton("水浒传"),
            MyButton("史记"),
            MyButton("资治通鉴"),
            MyButton("天龙八部"),
          ],
          )),
    );
  }
}

class MyButton extends StatelessWidget {
  final text;

  MyButton(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(left: 3.0, right: 3.0),
        child: OutlineButton(
          borderSide: BorderSide(
            color: Colors.blueAccent, width: 2.0, style: BorderStyle.solid),
            disabledBorderColor: Colors.grey,
            highlightedBorderColor: Colors.redAccent,
            onPressed: () {
              Scaffold.of(context).showSnackBar(new SnackBar(
                content: new Text(text),
                action: new SnackBarAction(
                  label: "撤回",
                  onPressed: () {},
                ),
              ));
            },
          child: Text(text),
        ));
  }
}