Flutter 布局真经，Android架构师之路

在Flutter中，构建布局通常使用Widgets来实现。以下是一个简单的Flutter布局示例，它展示了如何使用Column、Row和Container来创建一个简单的用户界面。

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('Flutter 布局示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.all(10.0),
                    color: Colors.lightBlue,
                    padding: EdgeInsets.all(15.0),
                    child: Text('Android', style: TextStyle(color: Colors.white)),
                  ),
                  Container(
                    margin: EdgeInsets.all(10.0),
                    color: Colors.lightGreen,
                    padding: EdgeInsets.all(15.0),
                    child: Text('Flutter', style: TextStyle(color: Colors.white)),
                  ),
                ],
              ),
              Container(
                margin: EdgeInsets.symmetric(vertical: 20.0),
                color: Colors.lightBlueAccent,
                padding: EdgeInsets.all(15.0),
                child: Text('开发者路线图', style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这段代码首先导入了Flutter的material包，然后创建了一个MyApp类，该类继承自StatelessWidget。在build方法中，我们使用Scaffold来构建一个带有AppBar和主体的界面。主体部分使用Center来包裹一个Column，Column包含一个Row和一个Container。Row内有两个Container，它们分别包含文本。每个Container都有自己的颜色、边距和填充，以及要显示的文本。这样就形成了一个简单的布局，展示了Android和Flutter以及“开发者路线图”的概念。