Flutter 新手实践笔记

关于

🤹‍ ️Wow!!! 这是一个用来给 Flutter 新手进行实践，对比的学习项目。

如何使用

本项目的结构和开源电子书 https://github.com/flutterchina/flutter-in-action 目录保持一致，学习的时候可以一边学习书籍内容，一边参考此项目进行代码实践。

Flutter 知识结构思维脑图

目录

1. 基础 Widgets
2. 布局类 Widgets
3. 容器类 Widgets
4. 可滚动 Widgets
5. 功能型 Widgets
6. 事件处理与通知
7. 动画
8. 自定义 Widgets
9. 文件操作与网络请求
10.1 插件开发
- 9.1 文件操作
11. 国际化
- 11.1 实现 Localizations
- 11.2 使用 Intl 包
贡献

1. 基础 Widgets

1.1. 文本、字体样式

SouceCode: TextAbout.dart

BookLink: 文本、字体样式

1.2. 按钮

SouceCode: ButtonAbout.dart

BookLink: 按钮

1.3. 图片和 Icon

SouceCode: ImageAndIconAbout.dart

BookLink: 图片和 Icon

1.4. 单选开关和复选框

SouceCode: SwitchAndCheckBoxAbout.dart

BookLink: 单选开关和复选框

1.5. 输入框及表单

SouceCode: InputAndFormAbout.dart

BookLink: 输入框及表单

2. 布局类 Widgets

2.1. 线性布局 Row、Column

SouceCode: RowAndColumnAbout.dart

BookLink: 线性布局 Row、Column

2.2. 弹性布局 Flex

SouceCode: FlexAbout.dart

BookLink: 弹性布局 Flex

2.3. 流式布局Wrap、Flow

SouceCode: WrapAndFlowAbout.dart

BookLink: 流式布局Wrap、Flow

2.4. 层叠布局 Stack、Positioned

SouceCode: StackAndPositionedAbout.dart

BookLink: 层叠布局 Stack、Positioned

3. 容器类 Widgets

3.1 Padding

SouceCode: PaddingAbout.dart

BookLink: Padding

3.2 布局限制类容器 ConstrainedBox、SizeBox

SouceCode: BoxAbout.dart

BookLink: 布局限制类容器 ConstrainedBox、SizeBox

3.3 装饰容器 DecoratedBox

SouceCode: DecoratedBoxAbout.dart

BookLink: 装饰容器 DecoratedBox

3.4 变换 Transform

SouceCode: TransformAbout.dart

BookLink: 变换 Transform

3.5 Container

SouceCode: ContainerAbout.dart

BookLink: Container

3.6 Scaffold、TabBar、底部导航

SouceCode: MaterialContainerAbout.dart

BookLink: Scaffold、TabBar、底部导航

4. 可滚动 Widgets

4.1 SingleChildScrollView

SouceCode: SingleChildScrollAbout.dart

BookLink: SingleChildScrollView

4.2 ListView

SouceCode: ListViewAbout.dart

BookLink: ListView

4.3 GridView

SouceCode: GridViewAbout.dart

BookLink: GridView

4.4 CustomScrollView

SouceCode: CustomScrollViewAbout.dart

BookLink: CustomScrollView

4.5 滚动监听及控制 ScrollController

SouceCode: ScrollControllerAbout.dart

BookLink: 滚动监听及控制 ScrollController

5. 功能型 Widgets

5.1 导航返回拦截-WillPopScope

SouceCode: WillPopScopeAbout.dart

BookLink: 导航返回拦截-WillPopScope

5.2 数据共享-InheritedWidget

SouceCode: InheritedWidgetAbout.dart

BookLink: 数据共享-InheritedWidget

5.3 主题-Theme

SouceCode: ThemeAbout.dart

BookLink: 主题-Theme

6. 事件处理与通知

6.1 原始指针事件处理

SouceCode: PointerEventAbout.dart

BookLink: 原始指针事件处理

6.2 手势识别

SouceCode: GestureAbout.dart

BookLink: 手势识别

6.3 全局事件总线

SouceCode: EventBusAbout.dart

BookLink: 全局事件总线

6.4 通知Notification

SouceCode: NotificationAbout.dart

BookLink: 通知Notification

7. 动画

7.1 动画结构

SouceCode: BasicAnimationStructureAbout.dart

BookLink: 动画结构

7.2 自定义路由过渡动画

SouceCode: PageChangeAnimationAbout.dart

BookLink: 自定义路由过渡动画

7.3 Hero动画

SouceCode: HeroAnimationAbout.dart

BookLink: 自定义路由过渡动画

7.4 交错动画

SouceCode: StaggeredAnimationAbout.dart

BookLink: 交错动画

8. 自定义 Widgets

8.1 通过组合现有 Widget 实现

SouceCode: CombinationWidgetAbout.dart

BookLink: 通过组合现有 Widget 实现

8.2 实例：TurnBox

SouceCode: TurnBoxAbout.dart

BookLink: 实例：TurnBox

8.3 CustomPaint 与 Canvas

SouceCode: CustomPaintAbout.dart

BookLink: CustomPaint 与 Canvas

8.4 实例：圆形渐变进度条(自绘)

SouceCode: CircleProgressWidgetAbout.dart

BookLink: 实例：圆形渐变进度条(自绘)

9. 文件操作与网络请求

9.1 文件操作

SouceCode: FileOperationAbout.dart

BookLink: 文件操作

9.2 Http请求-HttpClient

SouceCode: HttpClientAbout.dart

BookLink: Http请求-HttpClient

9.3 Http请求-Dio package

SouceCode: DioAbout.dart

BookLink: Http请求-Dio package

9.4 WebSocket

SouceCode: WebSocketAbout.dart

BookLink: WebSocket

9.5 使用Socket API

SouceCode: SocketAbout.dart

BookLink: 使用Socket API

10. 包与插件

10.1 插件开发

SouceCode: PluginDevelopAbout.dart

BookLink: 插件开发

11. 国际化

11.1 实现 Localizations

SouceCode: LocalizationAbout.dart

BookLink: 实现 Localizations

11.2 使用 Intl 包

SouceCode: IntlAbout.dart

BookLink: 使用 Intl 包

贡献

👏👏👏 欢迎参与项目的开源贡献！欢迎 Star 🌟 和 PR ～