flutter 布局简介

 import 'package:flutter/material.dart';

 class LayoutDemo extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         // aspectratio会自动填充父元素宽度，根据设定的宽高比自动扩充高度。
         AspectRatio(
           aspectRatio: /,
           child: Container(
             color: Colors.black87,
           ),
         ),
         SizedBox(
           height: ,
           width: ,
           child: Container(
             child: Icon(Icons.poll, size: ),
             alignment: Alignment.topRight,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(),
               gradient: LinearGradient(
                 colors: [
                   Color.fromRGBO(, , , 0.9),
                   Color.fromRGBO(, , , 0.95),
                 ],
               ),
               boxShadow: [
                 BoxShadow(
                   color: Colors.black87,
                   offset: Offset(, ),
                   blurRadius: ,
                   spreadRadius: -
                 )
               ]
             ),
           ),
         ),
         // 这里的sizedbox可当divider用
         SizedBox(
           height: ,
         ),
         SizedBox(
           height: ,
           width: ,
           child: Container(
             decoration: BoxDecoration(
               gradient: LinearGradient(
                 colors: [
                   Color.fromRGBO(, , , ),
                   Color.fromRGBO(, , , ),
                 ],
               ),
             ),
           ),
         )
       ],
     );
   }
 }

比较常用的就是Row()、Colmun()，具体的用法参考css的flexbox布局，比较相似。