flutter 学习 Warp布局

效果：

import 'package:flutter/material.dart';
import 'warp_demo.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light(),
      home: WarpDemo(),
    );
  }
}

warp_demo

import 'package:flutter/material.dart';

class WarpDemo extends StatefulWidget {
  WarpDemo({Key key}) : super(key: key);

  @override
  _WarpDemoState createState() => _WarpDemoState();
}

class _WarpDemoState extends State<WarpDemo> {
  List <Widget>list;
  
  @override
  void initState() {
    // TODO: implement initState
    list = List<Widget>()..add(buildAddButton());
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {

    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(title: Text('Warp frame'),),
      body: Center(
        child: Opacity(
          opacity: 0.8,
          child: Container(
            width: width,
            height: height/2,
            color: Colors.grey,
            child: Wrap(
              children:list,
              spacing:26.0,
            ),
          ),
        ),
      ),
    );
  }

  Widget buildAddButton(){
    return GestureDetector(
      onTap: (){
        if(list.length<9){
          setState(() {
            list.insert(list.length-1, buildPhoto());
          });
        }
      },
      child:Padding(
        padding: const EdgeInsets.all(8.9),
        child: Container(
          width: 80.0,
          height: 80.0,
          color: Colors.black54,
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  Widget buildPhoto(){
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 80.0,
        height: 80.0,
        color: Colors.yellow,
        child: Center(
          child: Text('照片'),
        ),
      ),
    );
  }
}