本头条核心宗旨

欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本文核心要点

我们还需要了解 Material Components，也就是 Material 组件。它提供了实现 Material Design 准则的视觉、行为和动作的 Widget。
官方将 Material 组件分为为几个类型：

• 应用程序结构和导航
• Button
• 输入和选择
• 对话框，警告弹框和面板
• 信息显示
• 布局

主要介绍应用程序结构和导航，会分为两篇文章进行介绍，这一篇介绍应用程序结构和导航分类中的 MaterialApp、Scaffold、AppBar。

1.MaterialApp

说到 Material 组件，不得不提到 MaterialApp，它包含了许多 Widget，这些 Widget 通常是实现 Material Design 的应用程序所必需的。
MaterialApp 在此前的文章都用过，简单的使用这里就不介绍了，这里主要介绍下路由。
移动 App 中通常通过全屏元素 “屏幕” 或 “页面” 来显示内容。在 Flutter 中，这些元素被称为 route（路由），它们由 Navigator 管理。Navigator 不仅管理了一堆 route，还提供管理堆栈的方法 Navigator.push 和 Navigator.pop，通过路由对象的进出栈来控制页面的跳转。

flutter 路由的使用方式主要有两种，一种是新建路由，一种是注册路由。我们分别用这两种方式写例子：
首屏是第一个界面，通过第一个界面的按钮跳转到第二页，点击第二页的按钮回到第一页。

1.1 新建路由

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: 'Material Components',
 home: FirstPage(),
 );
 }
}

class FirstPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('第一页'),
 ),
 body: Padding(
 padding: EdgeInsets.all(30.0),
 child: RaisedButton(
 child: Text('跳转到第二页'),
 onPressed: () {
 Navigator.push(//1
 context,
 MaterialPageRoute(builder: (context) => SecondPage()),
 );
 },
 ),
 ),
 );
 }
}

class SecondPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('第二页'),
 ),
 body: Padding(
 padding: EdgeInsets.all(30.0),
 child: RaisedButton(
 child: Text('回到上一页'),
 onPressed: () {
 Navigator.pop(context);//2
 }),
 ),
 );
 }
}

一个简单的flutter结构

import 'package:flutter/material.dart';

void main() {
 runApp(MaterialApp(
 // Title
 title: "Simple Material App",
 // Home
 home: Scaffold(
 // Appbar
 appBar: AppBar(
 // Title
 title: Text("Simple Material App"),
 ),
 // Body
 body: Container(
 // Center the content
 child: Center(
 // Add Text
 child: Text("Hello World!"),
 ),
 ),
 )));
}

总结

这个结构就是一个基本的Flutter项目结构，有部分人问我Flutter项目结构问题。

谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。