Flutter 项目介绍及体验

Flutter项目目录结构介绍

以我新创建的myflutter项目为例，用vscode打开是这样：

image.png

文件/文件夹	介绍
.idea	IDE自动生成，来存放项目的配置信息。其中包括版本控制信息、历史记录等
android	android平台相关代码
build	上线多个新功能模块，并且对当前版本已有功能会有影响时
ios	iOS平台相关代码
lib	flutter开发工作目录，我们主要编写的代码就在这个文件夹
test	测试代码目录
.gitignore	git管理文件忽略配置文件
.metadata	项目属性追踪文件，自动生成，不可编辑
.packages	开发相关工具路径配置文件
myflutter.iml	暂时我也不清楚
pubspec.lock	记录已安装第三方依赖库的版本信息
pubspec.yaml	第三方依赖库的配置文件，或者指定本地资源（图片、字体、音频、视频等）。
README.md	项目说明文件

Flutter 入口文件

lib目录里面的 main.dart 文件就是 flutter项目的入口文件,
其中的 main 方法是 dart 的入口方法。runApp 方法是 flutter 的入口方法。 MyApp 是自定义的一个组件。

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

一个最简单的Flutter应用程序，只需一个widget即可！如上面示例：将一个widget传给runApp函数即可。

该runApp函数接受给定的Widget并使其成为widget树的根。在此示例中，widget树由两个widget:Center(及其子widget)和Text组成。框架强制根widget覆盖整个屏幕，这意味着文本“Hello, world”会居中显示在屏幕上。文本显示的方向需要在Text实例中指定，当使用MaterialApp时，文本的方向将自动设定，稍后将进行演示。
在编写应用程序时，通常会创建新的widget，这些widget是无状态的StatelessWidget或者是有状态的StatefulWidget，具体的选择取决于您的widget是否需要管理一些状态。widget的主要工作是实现一个build函数，用以构建自身。一个widget通常由一些较低级别widget组成。Flutter框架将依次构建这些widget，直到构建到最底层的子widget时，这些最低层的widget通常为RenderObject，它会计算并描述widget的几何形状。

基础 Widget

Flutter有一套丰富、强大的基础widget，其中以下是很常用的：

Text：该 widget 可让创建一个带格式的文本。
Row、 Column：这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。其设计是基于web开发中的Flexbox布局模型。
Stack：取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠，你可以使用Positioned 来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。
Container： Container 可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container可以使用矩阵在三维空间中对其进行变换。

MaterialApp

Flutter提供了许多widgets，可帮助您构建遵循Material Design的应用程序。Material应用程序以MaterialAppwidget开始，该widget在应用程序的根部创建了一些有用的widget，其中包括一个Navigator，它管理由字符串标识的Widget栈（即页面路由栈）。Navigator可以让您的应用程序在页面之间的平滑的过渡。是否使用MaterialApp完全是可选的，但是使用它是一个很好的做法。

常用的属性:
home(主页) title(标题) color(颜色) theme(主题) routes(路由) ...

Scaffold

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。

Scaffold 有下面几个主要属性:
appBar - 显示在界面顶部的一个 AppBar
body - 当前界面所显示的主要内容 Widget
drawer - 抽屉菜单控件。
...

demo代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '首页',
      home: Scaffold(
        appBar: AppBar(
          title: Text('data'),
          elevation: 30,//设置标题阴影，默认0.0
        ),
        body: MyHome(),
        // drawer: ,
      ),
      theme: ThemeData(//主题颜色
        primarySwatch: Colors.yellow,
      ),
    );
  }
}

class MyHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        '首页内容'
      ),
    );
  }
}

demo效果