flutter 佈局簡介

 1 import 'package:flutter/material.dart';
 2 
 3 class LayoutDemo extends StatelessWidget {
 4   @override
 5   Widget build(BuildContext context) {
 6     return Column(
 7       mainAxisAlignment: MainAxisAlignment.center,
 8       children: <Widget>[
 9         // aspectratio會自動填充父元素寬度，根據設定的寬高比自動擴充高度。
10         AspectRatio(
11           aspectRatio: 16/9,
12           child: Container(
13             color: Colors.black87,
14           ),
15         ),
16         SizedBox(
17           height: 100,
18           width: 200,
19           child: Container(
20             child: Icon(Icons.poll, size: 50),
21             alignment: Alignment.topRight,
22             decoration: BoxDecoration(
23               borderRadius: BorderRadius.circular(10),
24               gradient: LinearGradient(
25                 colors: [
26                   Color.fromRGBO(255, 75, 43, 0.9),
27                   Color.fromRGBO(255, 65, 108, 0.95),
28                 ],
29               ),
30               boxShadow: [
31                 BoxShadow(
32                   color: Colors.black87,
33                   offset: Offset(0, 10),
34                   blurRadius: 10,
35                   spreadRadius: -3
36                 )
37               ]
38             ),
39           ),
40         ),
41         // 這裏的sizedbox可當divider用
42         SizedBox(
43           height: 20,
44         ),
45         SizedBox(
46           height: 100,
47           width: 200,
48           child: Container(
49             decoration: BoxDecoration(
50               gradient: LinearGradient(
51                 colors: [
52                   Color.fromRGBO(255, 75, 43, 1),
53                   Color.fromRGBO(255, 65, 108, 1),
54                 ],
55               ),
56             ),
57           ),
58         )
59       ],
60     );
61   }
62 }

 比較經常使用的就是Row()、Colmun()，具體的用法參考css的flexbox佈局，比較類似。