一. 创建Flutter项目

1.1. 创建

命令行方式

flutter create learn_flutter

注意：

• Flutter的名称不要包含特殊的字符，另外 <font color=red>不可以使用驼峰，不支持大写，尽量不要使用一些符号</font> 标识
• 创建完之后使用自己喜欢的开发工具打开即可
• xxx_xxx 下划线格式较多一些

工具创建

如：android studio - Start a new Flutter project

1.2. 运行

运行

• 命令行方式，进入flutter项目目录：flutter run即可

• android studio 打开项目，可以使用ide提供的快捷工具直接运行，as也是可以运行ios模拟器的

• 也可以通过as或xcode分别打开flutter项目中的android或ios代码，直接运行即可。

• as也可以直接打开整个flutter项目代码

断点

vscode dart代码支持断点调试的，也是代码面板左边点击某行代码打上断点，然后run - start debugging

二. 目录结构

重要的文件就以下几个：

• lib

我们日常开发的dart语言代码都放在这里，可以说是我们的“核心工作文件夹”

• iOS

这里面包含了iOS项目相关的配置和文件，当我们的项目需要打包上线的时候，需要打开该文件内的Runner.xcworkspace文件进行编译和打包工作。

• android

与ios文件夹一样，在android项目需要打包上架的时候，也需要使用此文件夹里面的文件。同样的如果我们需要原生代码的支持，原生代码也是放在这里。

• test

这里存放了我们在项目开发过程中的测试代码，良好的测试习惯是保证代码质量的必要手段，希望大家在test文件里写更多的代码！

• pubspec.yaml

就好比开发原生，你总要知道工程如何配置，依赖三方，资源文件等

2.1. main.dart

flutter 默认入口文件，内部main函数是flutter解析的入口

关于默认的main.dart文件：

1、程序默认入口文件，这个是可配置的，如as开发环境：可以通过Edti Configuratios来修改入口文件。。。也可以通过命令行：flutter run -t lib/entry.dart

2、虽然入口文件能修改，但是一般不用，并且注意，入口文件内必须有main函数主入口的，这个跟android，ios之类的一样

三. hot reload & hot restart

冷启动

从零编译运行，耗时

hot reload

主要执行build:

@override
  Widget build(BuildContext context) {

意思就是如果修改的是build方法体内的内容，只需要hot reload即可

hot restart

重新运行整个app，如果修改的是非build内容，则需要hot restart

四. flutter

4.1. 基本页面

firstapp_helloworld.png

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('title'),
        ),
        body: Center(
            child: Text(
              'hello world',
              style: TextStyle(
                  color: Colors.amber,
                  fontSize: 50
              ),
              strutStyle: StrutStyle(
                fontSize: 10,
                fontStyle: FontStyle.italic,
              ),
              textDirection: TextDirection.ltr,
              // textScaleFactor: 2,
            )
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.red,
          child: Text(
            'bottom'
          ),
        ),
      )
    )
  );
}

4.2. 代码分析

runApp

runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的

• 我们可以点到runApp的源码，查看到该函数

该函数让我们传入一个东西：Widget？

widget

• 我们学习Flutter，从一开始就可以有一个基本的认识：Flutter中万物皆Widget（万物皆可盘）；
• 在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；
• 但是在Flutter中，这些东西都是不同的Widget而已；
• 也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；

material

• material是Google公司推行的一套设计风格，或者叫设计语言、设计规范等；
• 里面有非常多的设计规范，比如颜色、文字的排版、响应动画与过度、填充等等；
• 在Flutter中高度集成了Material风格的Widget；
• 在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；

cupertino.dart 风格

前端开发，ui是主要部分，上面的Material提供了丰富的ui组件，cupertino风格是苹果风格的，但不是很丰富，可以尝试用

Scaffold 脚手架

• 翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；
• 所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为- 启动显示的Widget；
• Scaffold也有一些属性，比如appBar和body；
• appBar是用于设计导航栏的，我们传入了一个title属性；
• body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

4.3. 代码重构

一个简单的页面，嵌套写了那么多层的代码，很不友好，所以，正常的代码怎么做的？

flutter中万物皆widget，也即分析页面后，可以将页面元素拆分，比如：导航条，body体，底部视图等。然后各个部分抽离出来封装为新的组件

4.3.1. 封装widget

首先，新入门语言，都会觉得有些不是因，要做的是需要熟悉写法，学会该语言的代码结构，然后熟练就好了。

关于flutter的widget，先说明一下：

• Flutter整个开发过程中就是形成一个Widget树，所以形成嵌套是很正常的。
• 封装widget有两种类型，可以继承自StatelessWidget或者StatefulWidget

这里先不深入如何完全自定义widget，先学会小视图组合方式的封装，把代码重构清晰

4.3.1.1. StatelessWidget

StatelessWidget是没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；

• 它们的数据通常是直接写死（放在Widget中的数据，必须被定义为final）
  • StatelessWidget所继承的Widget被@immutable标记，表示不可变，不可变是指该widget内所有的变量是不可变的，所以，你的widget内声明状态是不合理的。所以印证了上面的话：StatelessWidget类型的widget只做一些纯展示
• 很重要的一点是：自定义widget内没有setState方法，所以，没法进行widget状态管理，触发重新渲染更新
• 从parent widget中传入的而且一旦传入就不可以修改；
• 从InheritedWidget获取来使用的数据；

//1、继承自StatelessWidget
//2、重写的方法：build方法
class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return <返回我们的Widget要渲染的Widget，比如一个Text Widget>;
  }
}

build

• Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；
• 我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；
• StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；

build 什么情况会执行：

• 1、当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）；
• 2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；
• 3、如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；

重构结果

篇幅原因，部分代码就不展示了

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyHomePage()
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
      ),
      body: HomeBody(),
      bottomNavigationBar: HomeBottomBar(),
    );
  }
}

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Text(
          'hello world',
          ...
        )
    );
  }
}

class HomeBottomBar extends StatelessWidget {...}

4.3.1.2. StatefulWidget

StatefulWidget是需要保存状态，并且可能出现状态改变的Widget；前面说了，StatelessWidget是纯展示的一个widget，也即其是没办法做状态管理的，所以，其上内容是没法更新的。就做一些静态展示。。与其相对的额StatefulWidget就包含了状态管理，做数据展示和数据操作

StatefulWidget学习