MDC-102 Flutter：Material 结构和布局（Flutter）

在Flutter中，Material组件和结构主要是通过Widgets来实现的。这些Widgets可以用来创建UI界面，并且它们遵循Material Design规范。

在Flutter中，有一些主要的Material组件，例如Buttons（按钮），Inputs（输入框），Cards（卡片），Progress Indicators（进度指示器），Menus（菜单），Dialogs（对话框），ListTiles（列表条目）等等。

以下是一个简单的例子，展示了如何在Flutter中使用Material组件：

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 Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '0',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

在这个例子中，我们使用了MaterialApp作为根Widget，它会创建一个遵循Material Design的应用程序。在Scaffold中，我们使用了一个AppBar作为顶部的导航栏，在body属性中，我们使用了Center Widget来居中显示两个Text Widget，并且在底部有一个浮动的FloatingActionButton。

这只是一个基本的例子，实际上你可以创建更复杂的布局，并使用更多的Material组件来满足你的设计需求。