Flutter 新手实践笔记

关于

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

如何使用

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

Flutter 知识结构思维脑图

目录

• 1. 基础 Widgets
  • 1.1. 文本、字体样式
  • 1.2. 按钮
  • 1.3. 图片和 Icon
  • 1.4. 单选开关和复选框
  • 1.5. 输入框及表单
• 2. 布局类 Widgets
  • 2.1. 线性布局 Row、Column
  • 2.2. 弹性布局 Flex
  • 2.3. 流式布局Wrap、Flow
  • 2.4. 层叠布局 Stack、Positioned
• 3. 容器类 Widgets
  • 3.1. Padding
  • 3.2. 布局限制类容器 ConstrainedBox、SizeBox
  • 3.3. 装饰容器 DecoratedBox
  • 3.4. 变换 Transform
  • 3.5. Container
  • 3.6. Scaffold、TabBar、底部导航
• 4. 可滚动 Widgets
  • 4.1. SingleChildScrollView
  • 4.2. ListView
  • 4.3. GridView
  • 4.4. CustomScrollView
  • 4.5. 滚动监听及控制 ScrollController
• 5. 功能型 Widgets
  • 5.1. 导航返回拦截-WillPopScope
  • 5.2. 数据共享-InheritedWidget
  • 5.3. 主题-Theme
• 6. 事件处理与通知
  • 6.1. 原始指针事件处理
  • 6.2. 手势识别
  • 6.3. 全局事件总线
  • 6.4. 通知Notification
• 7. 动画
  • 7.1. 动画结构
  • 7.2. 自定义路由过渡动画
  • 7.3. Hero 动画
  • 7.4. 交错动画
• 8. 自定义 Widgets
  • 8.1. 通过组合现有Widget实现
  • 8.2. 实例：TurnBox
  • 8.3. CustomPaint与Canvas
  • 8.4. 实例：圆形渐变进度条(自绘)
• 9. 文件操作与网络请求
  • 9.1 文件操作
  • 9.2 Http请求-HttpClient
  • 9.3 Http请求-Dio package
  • 9.4 WebSocket
  • 9.5 使用Socket API
• 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 ～