# learn_flutter

**Repository Path**: maishucode/learn_flutter

## Basic Information

- **Project Name**: learn_flutter
- **Description**: No description available
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2021-10-08
- **Last Updated**: 2025-03-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 4个项目快速入门Flutter开发

[TOC]

## 4个项目

1. **Hello Flutter**

   目标：学习Flutter项目的基本结构和Dart的基本语法。

2. **点击计数器**

   目标：学习Stateless组件和Stateful组件的区别，基本的事件处理和组件的内部状态更新，进一步熟悉Dart语法。

3. **心爱配对**

   目标：学习ListView，首次使用Navigator做页面导航，学习更复杂的状态管理。

4.  **技能商城**

   目标：学习使用provider做状态管理，Router和命名式导航，多页面复杂项目的结构。

![image-20211006142909443](https://pic.maishu.qingke.me/tpr-imgs/1633501750.png)



##  课程讲义

### 1. 课程介绍

- Flitter的优缺点
- 4个项目和各自的学习目标
- 学习资料和学习群
- 最好已经懂其他的一门编程语言，比如Java，C#，Python，C++等。要懂得面相对象。如果不懂，就更加认真的听我讲吧，一遍听不懂就多听几遍。

关注公众号**麦叔编程**，回复：**flutter**

- 本视频的参考代码																	
- 本视频的讲义文档
- 学习交流微信群

### 2. 开发环境

![image-20211006080325001](https://pic.maishu.qingke.me/tpr-imgs/1633478605.png)

- flutter sdk下载

  国内：https://flutter.cn/docs/get-started/install

  

- 设置pub sub镜像

  和其他编程语言一样，flutter在开发过程中会依赖一些第三方软件包，dart的官方软件包管理平台是：

  https://pub.dev/

  但国外的站点对国内不友好，需要使用VPN或者使用国内的镜像站点，具体步骤见下面的链接

  https://flutter.cn/community/china

### 3. Hello Flutter 1 - 创建项目

- 创建第一个项目

  ```
  flutter create helloflutter
  ```

  创建之前请设置好VPN或者国内镜像，否则可能会停在这一步：

  ```
  Running "flutter pub get" in counter...                             
  ```

  成功创建后的结果：

  ![image-20211006084513541](https://pic.maishu.qingke.me/tpr-imgs/1633481114.png)

  

- Flutter架构

  ![image-20211006082050766](https://pic.maishu.qingke.me/tpr-imgs/1633479651.png)

  https://flutter.dev/docs/resources/architectural-overview

- 一切都是Widget，就连布局本身都是Widget

  https://flutter.dev/docs/development/ui/widgets

  

### 4. Hello Flutter 2 - 加点样式

- Center组件的使用
- 理解Theme的使用，实际项目中我们会在独立的文件中定义一个Theme，然后在各个Widget中使用

### 5. Hello Flutter 3 - Dart语言的构造函数

深入理解下面的代码：

```
const MyApp({Key? key}) : super(key: key);
```

- 这是MyApp的构造函数

- 加了const表示它的实例是一个常量，一旦构造就不会改变

- 其中大括号表示里面的参数可以为空，同时加了问号表示变量可以为空

- 后面的super部分是初始化列表，英文叫做initilizer list，是运行在函数body之前的一部分代码。

- Key是widget的唯一性标示，flutter框架需要它来识别各个widget。

  

### 6. 点击计数器1 - 框架

官方提供了很多参考项目：https://github.com/flutter/samples



### 7. 点击计数器2 - 增加计数



### 8. 点击计数器3 - 传参数

这节课要做两个改动：

1. 我们假设HomePage是一个可重用的组件，它的标题可以由父组件传入。这里的目的是为了学习如何传递参数。
2. 另外，我们要动态设定点击增加的次数，这是为了学习如何在回调函数中传递参数。

改动1的关键代码：

```c#
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '点击计数器',
      theme: ThemeData(primarySwatch: Colors.green),
      home: const HomePage(title: '麦叔的点击计数器'),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key, required this.title}) : super(key: key);

  final title;

  @override
  State<StatefulWidget> createState() => _HomePageState();
}
```

改动2的关键代码：

```python
class _HomePageState extends State<HomePage> {
  int _count = 0;

  void increase(int n) {
    setState(() {
      _count += n;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
        ),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text('点击就会增加数字', style: Theme.of(context).textTheme.headline4),
          Text('$_count', style: Theme.of(context).textTheme.headline3)
        ]),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => {increase(3)},
        child: const Icon(Icons.add),
      ),
    );
  }
}
```





### 9. 爱心配对1  -  创建基础项目

本项目是基于官方项目的改进，官方项目文档地址：https://flutter.dev/docs/get-started/codelab



### 10. 爱心配对2 - 使用外部包

### 11. 爱心配对3 - 创建Stateful组件

### 12. 爱心配对4 - 用ListView创建静态列表

### 13. 爱心配对5 - 用ListView显示配对列表

### 14. 爱心配对6 - 添加爱心图标

### 15. 爱心配对7 - 添加爱心图标互动效果

### 16. 爱心配对8 - 导航去新页面

### 17. 爱心配对9 - 实现爱心列表

### 18.  编程商城1 - 使用routes

![技能商城](https://flutter.dev/assets/images/docs/development/data-and-backend/state-mgmt/model-shopper-screencast.gif)

### 19.  编程商城2 - 登录页面

### 20.  编程商城3 - 技能列表























##   参考阅读

1. Dart语言精要

   https://dart.dev/guides/language/language-tour/

2. 技能商城参考官方项目

   https://github.com/flutter/samples/tree/master/provider_shopper

3. 





## 状态管理

### 1. StatefullWidget自己管理

通过setState()修改状态会触发widget重新build

### 2. 使用Provider

1. 数据源的定义
   - 定义ChangeNotifier
   - 用Provider包住某个Widget，这个Widget下的所有组件都可以访问Provider中的数据。

2. 数据的消费

   数据的消费有4种方式：

   - 使用Provider.of<DataProvider>(context)，还可以指定listen:false参数。
   - context.read(): 对数据只读，不建议在build函数中使用
   - context.watch(): 读取和监听，类似于上面的Provider.of
   - 使用Consumer可以只更新局部组件。

   说说他们的异同点：

   - 第一种是最根本的，下面的三种是对第一种的包装。
   - 其中2和3是第一种的简单写法。
   - 而第4种的有两个独特优势，一是可以做局部的更新，二是在自己提供自己消费的时候使用。



## 其他

1. 如果给oppressed等callback传递参数

   这时候要创建一个匿名函数，代码参考：

   ```c#
         floatingActionButton: FloatingActionButton(
             onPressed: () => _counter.increase(3),
             child: const Icon(Icons.add),
             tooltip: 'Press Me'),
   ```

   

2.