diff --git a/.gitignore b/.gitignore
index 36ad4901d..fe733f8be 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,7 +14,7 @@
*.ipr
*.iws
.idea/
-
+/lib/temp
# The .vscode folder contains launch configuration and tasks you configure in
# VS Code which you may wish to be included in version control, so this line
# is commented out by default.
@@ -29,7 +29,13 @@
.pub-cache/
.pub/
/build/
+/android/app/.cxx/
/lib/tools/
/lib/res/constant/github_client_config.dart
# Exceptions to above rules.
!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
+
+/build_tools
+/libs
+/pubspec_overrides.yaml
+modules/game_system
diff --git a/.metadata b/.metadata
index b510f8bd6..95f73f55c 100644
--- a/.metadata
+++ b/.metadata
@@ -1,11 +1,45 @@
# This file tracks properties of this Flutter project.
# Used by Flutter tool to assess capabilities and perform upgrades etc.
#
-# This file should be version controlled and should not be manually edited.
-
+# This file should be version controlled.
version:
- revision: 0b8abb4724aa590dd0f429683339b1e045a1594d
+ revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
channel: stable
project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+ platforms:
+ - platform: root
+ create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ - platform: android
+ create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ - platform: ios
+ create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ - platform: linux
+ create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ - platform: macos
+ create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ - platform: web
+ create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ - platform: windows
+ create_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+ base_revision: fb57da5f945d02ef4f98dfd9409a72b7cce74268
+
+ # User provided section
+
+ # List of Local paths (relative to this file) that should be
+ # ignored by the migrate tool.
+ #
+ # Files that are not part of the templates will be ignored by default.
+ unmanaged_files:
+ - 'lib/main.dart'
+ - 'ios/Runner.xcodeproj/project.pbxproj'
diff --git a/README-EN.md b/README-EN.md
new file mode 100644
index 000000000..13cf46805
--- /dev/null
+++ b/README-EN.md
@@ -0,0 +1,239 @@
+
+
+ FlutterUnit🔖
+
+ ⭐️ All Platform Flutter Experience App ⭐️
+
+
+
+FlutterUnit is a cross-platform experience app, Here, you can fully explore the creativity that Flutter offers.
+
+
+
+
+
+
+
+
+
+ Download v3.0.0 :
+ [Android] •
+ [iOS] •
+ [MacOS] •
+ [Windows] •
+ [Web]
+
+
+
+
+---
+
+
+### Env and Build
+
+#### Flutter Version
+
+```
+·]>> flutter --version
+Flutter 3.35.1 • channel stable • https://github.com/flutter/flutter.git
+Framework • revision 20f8274939 (6 days ago) • 2025-08-14 10:53:09 -0700
+Engine • hash 6cd51c08a88e7bbe848a762c20ad3ecb8b063c0e (revision 1e9a811bf8) (7 days ago) • 2025-08-13 23:35:25.000Z
+Tools • Dart 3.9.0 • DevTools 2.48.0
+```
+
+#### Build Application
+
+```
+·]>> git clone https://github.com/toly1994328/FlutterUnit.git
+·]>> cd FlutterUnit
+
+Build Android:
+·]>> flutter build apk --target-platform --split-per-abi
+Build iOS:
+·]>> flutter build ios
+Build Windows:
+·]>> flutter build windows
+Build Linux:
+·]>> flutter build linux
+Build web:
+·]>> flutter build web
+```
+
+
+#### My Flutter Books
+- 🔥 [免费] [掘金小册 -《Flutter 入门教程》](https://juejin.cn/book/7212822723330834487)
+- 🔥 [掘金小册 -《Flutter 语言基础 - 梦始之地》](https://juejin.cn/book/6844733827617652750)
+- 🔥 [掘金小册 -《Flutter 绘制指南 - 妙笔生花》](https://juejin.im/book/6844733827265331214)
+- 🔥 [掘金小册 -《Flutter 手势探索 - 执掌天下》](https://juejin.cn/book/6896378716427911181)
+- 🔥 [掘金小册 -《Flutter 动画探索 - 流光幻影》](https://juejin.cn/book/6965102582473687071)
+- 🔥 [掘金小册 -《Flutter 滑动探索 - 珠联璧合》](https://juejin.cn/book/6984685333312962573)
+- 🔥 [掘金小册 -《Flutter 布局探索 - 薪火相传》](https://juejin.cn/book/7075958265250578469)
+- 🔥 [掘金小册 -《Flutter 渲染机制 - 聚沙成塔》](https://juejin.cn/book/6965102582473687071)
+
+---
+
+- [Flutter环境配置](https://github.com/toly1994328/FlutterUnit/issues/22)
+- [Flutter实用插件集录 ](https://github.com/toly1994328/FlutterUnit/issues/41)
+- [Flutter要点集录 ](https://github.com/toly1994328/FlutterUnit/labels/point)
+
+
+---
+
+
+#### MacOS 桌面版本组件界面
+
+
+
+#### Windows 桌面版本组件界面
+
+
+
+
+> 开源不易,请我喝咖啡 ~
+
+
+
+
+
+#### Star History
+
+[](https://star-history.com/#toly1994328/FlutterUnit&Date)
+
+### 一、组件的展示页面
+
+#### 1. `300+组件收录`
+
+> Flutter源码中的可用的组件一共350个左右,纷繁复杂,也没有明确的分类标准
+FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。并`根据个人感觉进行评星 `
+`目前收录组件306个`,每个都有至少一个演示展现和代码展示。
+
+| . | . | . |
+|------|------------|------------|
+| | |  |
+
+---
+
+#### 2. 组件详情页
+
+> `213个组件`全部都有详情页。对于重要的组件会详细展现
+一般都会有某个演示对应的组件和属性,尽量做到细致,如果有需要补充,欢迎联系我。
+`最重要的是: 所有的演示展现都是Flutter的组件形成的,而非图片,这就意味着可操作性更高。`
+
+| . | . | . |
+|------|------------|------------|
+| | |  |
+|  |  ||
+
+---
+
+#### 3. 组件的可操作性
+
+> 对一些操作交互的组件或有可操作性的某些组件,`提供操作演示`
+
+| . | . | . |
+|------|------------|------------|
+| | | |
+|  |  ||
+
+---
+
+#### 4. 相关组件的关联切换
+> `相关组件通过link to 可以进行切换, 满足你的探索欲。`
+如果有的关联未加入,欢迎联系我,对我来说,加个数字就行了。
+
+| . | . | . |
+|------|------------|------------|
+||| |
+
+
+---
+
+#### 5. 代码的查看和分享
+> 激动人心的是,你可以通过右侧的图标`展开/隐藏 实现下面效果的代码`
+并且`支持分享`,如果你想亲自体验,so,easy ! 而且`代码高亮样式可以自定义`。
+
+
+| . | . | . |
+|------|------------|------------|
+| | | |
+
+---
+
+
+### 二、全局配置
+
+#### 1. 颜色主题
+> 只提供八种颜色,可在`右滑菜单页`的`我的主题`配置,`可以拓展`
+
+| . | . | . |
+|------|------------|------------|
+| |  |  |
+
+---
+
+
+#### 2.字体配置
+
+> 支持全局字体设置,`可以拓展`
+
+| . | . | . |
+|------|------------|------------|
+| |  | |
+---
+
+
+#### 3.item样式设置
+
+> 支持item样式设置,`可以拓展,支持征集`,详见`Flutter Unit 1.0 征集方案`
+
+| . | . | . |
+|------|------------|------------|
+|| | |
+---
+
+#### 4.代码面板风格设置
+
+> 支持代码风格设置,`可以拓展,支持征集`,详见`Flutter Unit 1.0 征集方案`
+
+| . | . |
+|------|------------|
+|| |
+||
+
+---
+
+
+
+### 三、搜索与收藏功能
+
+
+#### 1.搜索功能
+
+> 由于Flutter中Widget比较杂乱,不太好分类,所以搜索是非常重要的
+另外可以根据星级进行过滤,支持多选。目前正在考虑根据功能分类,之后会有所完善。
+
+
+| . | . | . |
+|------|------------|------------|
+| | |  |
+
+---
+
+#### 2.收藏功能
+
+| 添加收藏集 | 修改收藏集 | 删除收藏集 |
+|------|------------|------------|
+|  |  |  |
+
+| 长按右菜单滑页 | 长按左菜单滑页 | 详情内长按展示收藏菜单 |
+|------|------------|------------|
+|  | |  |
+
+| 删除与数据同步 | 组件加入收藏集 | 收藏集支持多选 |
+|------|------------|------------|
+|  |  |  |
+
+> `FlutterUnit 2.0 `目前基本就是这么多功能,可以在Github中下载打包后的apk玩玩
+希望能对你的Flutter学习有所帮助。
+
+---
diff --git a/README.md b/README.md
index 3fe4edea3..0881234c8 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,100 @@
+
+
+ FlutterUnit
+
+ ⭐️ 全平台 Flutter 探索应用 ⭐️
+
+
+
+FlutterUnit 是一个全平台体验应用,你可以在这里尽情体验 Flutter 带来的创造力。
+
+
+
+
+
+
+
+
+
+ 下载 App:
+ [Android] •
+ [iOS] •
+ [MacOS] •
+ [Windows] •
+ [Web]
+
+
+
+
+---
+
+### 环境与构建
+
+#### Flutter 版本
+
+```
+·]>> flutter --version
+Flutter 3.35.1 • channel stable • https://github.com/flutter/flutter.git
+Framework • revision 20f8274939 (6 days ago) • 2025-08-14 10:53:09 -0700
+Engine • hash 6cd51c08a88e7bbe848a762c20ad3ecb8b063c0e (revision 1e9a811bf8) (7 days ago) • 2025-08-13 23:35:25.000Z
+Tools • Dart 3.9.0 • DevTools 2.48.0
+```
+
+#### 构建应用
+
+```
+·]>> git clone https://github.com/toly1994328/FlutterUnit.git
+·]>> cd FlutterUnit
+
+Build Android:
+·]>> flutter build apk --target-platform --split-per-abi
+Build iOS:
+·]>> flutter build ios
+Build Windows:
+·]>> flutter build windows
+Build Linux:
+·]>> flutter build linux
+Build web:
+·]>> flutter build web
+```
#### Flutter Unit 周边
-- 🔥 [实体书 - 《Flutter之旅》源码下载地址 ](https://gitee.com/toly1994328/FlutterUnit/attach_files/466731/download)
+- 🔥 [免费] [掘金小册 -《Flutter 入门教程》](https://juejin.cn/book/7212822723330834487)
+- 🔥 [掘金小册 -《Flutter 语言基础 - 梦始之地》](https://juejin.cn/book/6844733827617652750)
- 🔥 [掘金小册 -《Flutter 绘制指南 - 妙笔生花》](https://juejin.im/book/6844733827265331214)
- 🔥 [掘金小册 -《Flutter 手势探索 - 执掌天下》](https://juejin.cn/book/6896378716427911181)
- 🔥 [掘金小册 -《Flutter 动画探索 - 流光幻影》](https://juejin.cn/book/6965102582473687071)
-- [Flutter环境配置](https://github.com/toly1994328/FlutterUnit/issues/22)
-- [Flutter实用插件集录 ](https://github.com/toly1994328/FlutterUnit/issues/41)
-- [Flutter要点集录 ](https://github.com/toly1994328/FlutterUnit/labels/point)
+- 🔥 [掘金小册 -《Flutter 滑动探索 - 珠联璧合》](https://juejin.cn/book/6984685333312962573)
+- 🔥 [掘金小册 -《Flutter 布局探索 - 薪火相传》](https://juejin.cn/book/7075958265250578469)
+- 🔥 [掘金小册 -《Flutter 渲染机制 - 聚沙成塔》](https://juejin.cn/book/6965102582473687071)
+---
-### FlutterUnit 下载体验: 复制链接,在浏览器下载~
+- [Flutter环境配置](https://github.com/toly1994328/FlutterUnit/issues/22)
+- [Flutter实用插件集录 ](https://github.com/toly1994328/FlutterUnit/issues/41)
+- [Flutter要点集录 ](https://github.com/toly1994328/FlutterUnit/labels/point)
+---
-| 平台类型 | 下载地址 | 项目分支地址 | 相关文章 |
-|------|------------|------|------------|
-| Android版 | http://toly1994.com/file/FlutterUnit.apk |[flutter_unit](https://github.com/toly1994328/FlutterUnit)| [《FlutterUnit食用指南》](https://juejin.im/post/6844904147045597191)|
-| iOS版 | 暂未提供,可自己下载项目运行 |[flutter_unit](https://github.com/toly1994328/FlutterUnit)| [《FlutterUnit 食用指南》](https://juejin.im/post/6844904147045597191)|
-| MacOS版 | http://toly1994.com/file/flutter_unit_mac.zip |[flutter_unit_desk](https://github.com/toly1994328/FlutterUnit/tree/flutter_unit_desk)| [《mac版闪亮登场》](https://juejin.im/post/6844904147817332743)|
-| Windows版 |http://toly1994.com/file/FlutterUnitWin.zip | [flutter_unit_desk](https://github.com/toly1994328/FlutterUnit/tree/flutter_unit_desk) | [《win版闪亮登场》](https://juejin.im/post/6847902222626488327)|
-| Web版 | http://toly1994328.gitee.io/flutter_web | [ flutter_unit_web ](https://github.com/toly1994328/FlutterUnit/tree/flutter_unit_web) | [《web版闪亮登场》](https://juejin.im/post/6859888713980182541)|
+#### MacOS 桌面版本组件界面
----
+
-> 当前Flutter 版本
+#### Windows 桌面版本组件界面
-```
-Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git
-Framework • revision f4abaa0735 (5 weeks ago) • 2021-07-01 12:46:11 -0700
-Engine • revision 241c87ad80
-Tools • Dart 2.13.4
+
-```
----
+> 开源不易,请我喝咖啡 ~
+
+
+
+#### Star History
+
+[](https://star-history.com/#toly1994328/FlutterUnit&Date)
+
### 一、组件的展示页面
#### 1. `300+组件收录`
@@ -45,9 +105,7 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . | . |
|------|------------|------------|
-| | |  |
-|  |  | |
-
+| | |  |
---
@@ -59,9 +117,8 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . | . |
|------|------------|------------|
-| | |  |
-|  |  ||
-
+| | |  |
+|  |  ||
---
@@ -71,7 +128,8 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . | . |
|------|------------|------------|
-| | | |
+| | | |
+|  |  ||
---
@@ -79,11 +137,10 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
> `相关组件通过link to 可以进行切换, 满足你的探索欲。`
如果有的关联未加入,欢迎联系我,对我来说,加个数字就行了。
-
-
| . | . | . |
|------|------------|------------|
-||| |
+||| |
+
---
@@ -91,10 +148,10 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
> 激动人心的是,你可以通过右侧的图标`展开/隐藏 实现下面效果的代码`
并且`支持分享`,如果你想亲自体验,so,easy ! 而且`代码高亮样式可以自定义`。
+
| . | . | . |
|------|------------|------------|
-| | | |
-
+| | | |
---
@@ -106,9 +163,7 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . | . |
|------|------------|------------|
-| |  |  |
-
-
+| |  |  |
---
@@ -119,8 +174,7 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . | . |
|------|------------|------------|
-| |  | |
-
+| |  | |
---
@@ -130,8 +184,7 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . | . |
|------|------------|------------|
-|| | |
-
+|| | |
---
#### 4.代码面板风格设置
@@ -140,7 +193,8 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . |
|------|------------|
-|| |
+|| |
+||
---
@@ -157,7 +211,7 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| . | . | . |
|------|------------|------------|
-| | |  |
+| | |  |
---
@@ -165,25 +219,17 @@ FlutterUnit 对`大大小小,常用不常用`的组件能收的尽量收录。
| 添加收藏集 | 修改收藏集 | 删除收藏集 |
|------|------------|------------|
-|  |  |  |
+|  |  |  |
-| 长按左菜单滑页 | 长按右菜单滑页 | 详情内长按展示收藏菜单 |
+| 长按右菜单滑页 | 长按左菜单滑页 | 详情内长按展示收藏菜单 |
|------|------------|------------|
-|  | |  |
+|  | |  |
| 删除与数据同步 | 组件加入收藏集 | 收藏集支持多选 |
|------|------------|------------|
-|  |  |  |
+|  |  |  |
-> `FlutterUnit 1.0 `目前基本就是这么多功能,可以在Github中下载打包后的apk玩玩
+> `FlutterUnit 2.0 `目前基本就是这么多功能,可以在Github中下载打包后的apk玩玩
希望能对你的Flutter学习有所帮助。
---
-
-#### 3.关于我与项目
-> 不多说,都在图里。
-
-| . | . | . |
-|------|------------|------------|
-||| 
-|
diff --git a/analysis_options.yaml b/analysis_options.yaml
new file mode 100644
index 000000000..d54e87f36
--- /dev/null
+++ b/analysis_options.yaml
@@ -0,0 +1,22 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+ rules:
+ avoid_print: false # Uncomment to disable the `avoid_print` rule
+ file_names: false
+
+analyzer:
+# exclude:
+# - modules/widget_system/widgets/**
+
+
+
diff --git a/android/.gitignore b/android/.gitignore
index bc2100d8f..6f568019d 100644
--- a/android/.gitignore
+++ b/android/.gitignore
@@ -5,3 +5,9 @@ gradle-wrapper.jar
/gradlew.bat
/local.properties
GeneratedPluginRegistrant.java
+
+# Remember to never publicly share your keystore.
+# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
+key.properties
+**/*.keystore
+**/*.jks
diff --git a/android/app/build.gradle b/android/app/build.gradle
deleted file mode 100644
index 2486e7fb7..000000000
--- a/android/app/build.gradle
+++ /dev/null
@@ -1,89 +0,0 @@
-def localProperties = new Properties()
-def localPropertiesFile = rootProject.file('local.properties')
-if (localPropertiesFile.exists()) {
- localPropertiesFile.withReader('UTF-8') { reader ->
- localProperties.load(reader)
- }
-}
-
-def flutterRoot = localProperties.getProperty('flutter.sdk')
-if (flutterRoot == null) {
- throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
-}
-
-def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
-if (flutterVersionCode == null) {
- flutterVersionCode = '1'
-}
-
-def flutterVersionName = localProperties.getProperty('flutter.versionName')
-if (flutterVersionName == null) {
- flutterVersionName = '1.0'
-}
-
-apply plugin: 'com.android.application'
-apply plugin: 'kotlin-android'
-apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
-
-//add------------------start
-def keystorePropertiesFile = rootProject.file("key.properties")
-def keystoreProperties = new Properties()
-keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
-//add------------------end
-
-android {
- compileSdkVersion 28
-
- sourceSets {
- main.java.srcDirs += 'src/main/kotlin'
- }
-
- lintOptions {
- disable 'InvalidPackage'
- }
-
- defaultConfig {
- // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
- applicationId "com.toly1994.flutter_unit"
- minSdkVersion 16
- targetSdkVersion 28
- versionCode flutterVersionCode.toInteger()
- versionName flutterVersionName
- testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
- }
-
- signingConfigs {
- release {
- keyAlias keystoreProperties['keyAlias']
- keyPassword keystoreProperties['keyPassword']
- storeFile file(keystoreProperties['storeFile'])
- storePassword keystoreProperties['storePassword']
- }
- }
- buildTypes {
- release {
- // TODO: Add your own signing config for the release build.
- // Signing with the debug keys for now, so `flutter run --release` works.
- signingConfig signingConfigs.release
- //开启混淆
- minifyEnabled true
- //开启资源压缩
- shrinkResources true
- //开启zip对齐
- zipAlignEnabled true
- //如果开启混淆,记得在混淆文件中添加混淆规则
- proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
- }
- }
-}
-
-flutter {
- source '../..'
-}
-
-dependencies {
- implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
- testImplementation 'junit:junit:4.12'
- androidTestImplementation 'androidx.test:runner:1.1.1'
- androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
-}
diff --git a/android/app/build.gradle.kts b/android/app/build.gradle.kts
new file mode 100644
index 000000000..d73f8c2d9
--- /dev/null
+++ b/android/app/build.gradle.kts
@@ -0,0 +1,53 @@
+plugins {
+ id("com.android.application")
+ id("kotlin-android")
+ // The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
+ id("dev.flutter.flutter-gradle-plugin")
+}
+
+android {
+ namespace = "com.toly1994.flutter_unit"
+ compileSdk = flutter.compileSdkVersion
+ ndkVersion = flutter.ndkVersion
+
+ compileOptions {
+ sourceCompatibility = JavaVersion.VERSION_11
+ targetCompatibility = JavaVersion.VERSION_11
+ }
+
+ kotlinOptions {
+ jvmTarget = JavaVersion.VERSION_11.toString()
+ }
+
+ defaultConfig {
+ // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
+ applicationId = "com.toly1994.flutter_unit"
+ // You can update the following values to match your application needs.
+ // For more information, see: https://flutter.dev/to/review-gradle-config.
+ minSdk = flutter.minSdkVersion
+ targetSdk = flutter.targetSdkVersion
+ versionCode = flutter.versionCode
+ versionName = flutter.versionName
+ }
+
+ buildTypes {
+ getByName("release") {
+ // TODO: Add your own signing config for the release build.
+ // Signing with the debug keys for now, so `flutter run --release` works.
+ signingConfig = signingConfigs.getByName("debug")
+ isShrinkResources = true // 移除未使用的资源
+ isMinifyEnabled = true // 启用 R8 代码压缩
+ proguardFiles(
+ getDefaultProguardFile("proguard-android-optimize.txt"),
+ "proguard-rules.pro"
+ )
+ ndk {
+ debugSymbolLevel = "none"
+ }
+ }
+ }
+}
+
+flutter {
+ source = "../.."
+}
diff --git a/android/app/proguard-rules.pro b/android/app/proguard-rules.pro
new file mode 100644
index 000000000..e9ffa01ad
--- /dev/null
+++ b/android/app/proguard-rules.pro
@@ -0,0 +1,2 @@
+-dontwarn javax.annotation.**
+-keep class javax.annotation.** { *; }
\ No newline at end of file
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 1d5b54c6e..678734418 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,20 +1,28 @@
-
-
-
+
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -33,5 +59,8 @@
+
diff --git a/android/app/src/main/kotlin/com/toly1994/flutter_unit/MainActivity.kt b/android/app/src/main/kotlin/com/toly1994/flutter_unit/MainActivity.kt
index 40bf8609b..8b30f15be 100644
--- a/android/app/src/main/kotlin/com/toly1994/flutter_unit/MainActivity.kt
+++ b/android/app/src/main/kotlin/com/toly1994/flutter_unit/MainActivity.kt
@@ -1,12 +1,6 @@
package com.toly1994.flutter_unit
-import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity
-import io.flutter.embedding.engine.FlutterEngine
-import io.flutter.plugins.GeneratedPluginRegistrant
class MainActivity: FlutterActivity() {
- override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
- GeneratedPluginRegistrant.registerWith(flutterEngine);
- }
}
diff --git a/android/app/src/main/res/drawable-v21/launch_background.xml b/android/app/src/main/res/drawable-v21/launch_background.xml
new file mode 100644
index 000000000..f74085f3f
--- /dev/null
+++ b/android/app/src/main/res/drawable-v21/launch_background.xml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
diff --git a/android/app/src/main/res/values-night/styles.xml b/android/app/src/main/res/values-night/styles.xml
new file mode 100644
index 000000000..449a9f930
--- /dev/null
+++ b/android/app/src/main/res/values-night/styles.xml
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index 00fa4417c..d74aa35c2 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -1,8 +1,18 @@
-
+
+
diff --git a/android/build.gradle b/android/build.gradle
deleted file mode 100644
index 68727617d..000000000
--- a/android/build.gradle
+++ /dev/null
@@ -1,32 +0,0 @@
-buildscript {
- ext.kotlin_version = '1.3.50'
- repositories {
- google()
- jcenter()
- }
-
- dependencies {
- classpath 'com.android.tools.build:gradle:3.5.0'
- classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
- }
-}
-
-
-allprojects {
- repositories {
- google()
- jcenter()
- }
-}
-
-rootProject.buildDir = '../build'
-subprojects {
- project.buildDir = "${rootProject.buildDir}/${project.name}"
-}
-subprojects {
- project.evaluationDependsOn(':app')
-}
-
-task clean(type: Delete) {
- delete rootProject.buildDir
-}
diff --git a/android/build.gradle.kts b/android/build.gradle.kts
new file mode 100644
index 000000000..89176ef44
--- /dev/null
+++ b/android/build.gradle.kts
@@ -0,0 +1,21 @@
+allprojects {
+ repositories {
+ google()
+ mavenCentral()
+ }
+}
+
+val newBuildDir: Directory = rootProject.layout.buildDirectory.dir("../../build").get()
+rootProject.layout.buildDirectory.value(newBuildDir)
+
+subprojects {
+ val newSubprojectBuildDir: Directory = newBuildDir.dir(project.name)
+ project.layout.buildDirectory.value(newSubprojectBuildDir)
+}
+subprojects {
+ project.evaluationDependsOn(":app")
+}
+
+tasks.register("clean") {
+ delete(rootProject.layout.buildDirectory)
+}
diff --git a/android/gradle.properties b/android/gradle.properties
index 38c8d4544..259717082 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -1,4 +1,3 @@
-org.gradle.jvmargs=-Xmx1536M
-android.enableR8=true
+org.gradle.jvmargs=-Xmx4G -XX:MaxMetaspaceSize=2G -XX:+HeapDumpOnOutOfMemoryError
android.useAndroidX=true
android.enableJetifier=true
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 296b146b7..80765cdf0 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -3,4 +3,6 @@ distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.12-all.zip
+
+
diff --git a/android/key.properties b/android/key.properties
deleted file mode 100644
index c78b0c53f..000000000
--- a/android/key.properties
+++ /dev/null
@@ -1,4 +0,0 @@
-storePassword=toly1994
-keyPassword=toly1994328
-keyAlias= king
-storeFile=/Users/mac/Coder/files/key/toly1994.jks
\ No newline at end of file
diff --git a/android/settings.gradle b/android/settings.gradle
deleted file mode 100644
index 5a2f14fb1..000000000
--- a/android/settings.gradle
+++ /dev/null
@@ -1,15 +0,0 @@
-include ':app'
-
-def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
-
-def plugins = new Properties()
-def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
-if (pluginsFile.exists()) {
- pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) }
-}
-
-plugins.each { name, path ->
- def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
- include ":$name"
- project(":$name").projectDir = pluginDirectory
-}
diff --git a/android/settings.gradle.kts b/android/settings.gradle.kts
new file mode 100644
index 000000000..ab39a10a2
--- /dev/null
+++ b/android/settings.gradle.kts
@@ -0,0 +1,25 @@
+pluginManagement {
+ val flutterSdkPath = run {
+ val properties = java.util.Properties()
+ file("local.properties").inputStream().use { properties.load(it) }
+ val flutterSdkPath = properties.getProperty("flutter.sdk")
+ require(flutterSdkPath != null) { "flutter.sdk not set in local.properties" }
+ flutterSdkPath
+ }
+
+ includeBuild("$flutterSdkPath/packages/flutter_tools/gradle")
+
+ repositories {
+ google()
+ mavenCentral()
+ gradlePluginPortal()
+ }
+}
+
+plugins {
+ id("dev.flutter.flutter-plugin-loader") version "1.0.0"
+ id("com.android.application") version "8.7.3" apply false
+ id("org.jetbrains.kotlin.android") version "2.1.0" apply false
+}
+
+include(":app")
diff --git a/android/settings_aar.gradle b/android/settings_aar.gradle
deleted file mode 100644
index e7b4def49..000000000
--- a/android/settings_aar.gradle
+++ /dev/null
@@ -1 +0,0 @@
-include ':app'
diff --git a/assets/article.db b/assets/article.db
new file mode 100644
index 000000000..2d4ee64f0
Binary files /dev/null and b/assets/article.db differ
diff --git a/assets/data/gallery_info.json b/assets/data/gallery_info.json
new file mode 100644
index 000000000..eb44916bc
--- /dev/null
+++ b/assets/data/gallery_info.json
@@ -0,0 +1,27 @@
+[
+ {
+ "image": "assets/images/anim_draw.webp",
+ "name": "基础绘制",
+ "info": "收录一些基础图形绘制案例,这些案例对初涉绘制的编程者会非常友好。通过这些案例,可以学会点、线、矩形、圆、圆弧、文字、图片等基本图形的绘制方法,了解 Canvas、Paint、Path 等绘制中核心对象的使用。"
+ },
+ {
+ "image": "assets/images/draw_bg3.webp",
+ "name": "动画手势",
+ "info": "收录一些动画和手势的绘制案例,这些案例会让绘制更具有操作性。通过这些案例,可以学会动画和手势的使用,如滑动、旋转、缩放、移动等效果,让绘制不再只是静态展现。"
+ },
+ {
+ "image": "assets/images/base_draw.webp",
+ "name": "粒子绘制",
+ "info": "收录一些粒子相关的绘制案例,这些案例将是绘制的顶级操作。通过这些案例,可以学会如何使用粒子来绘制惊艳的视觉效果,如粒子时钟、粒子爆炸、粒子背景等效果,让绘制拥有无限可能。"
+ },
+ {
+ "image": "assets/images/draw_bg4.webp",
+ "name": "趣味绘制",
+ "info": "收录一些比较有趣的绘制案例,让我们一起在这里一起体验绘制的乐趣、编程的乐趣和智慧的乐趣吧。"
+ },
+ {
+ "image": "assets/images/caver.webp",
+ "name": "艺术画廊",
+ "info": "收录一些殿堂级的绘制案例,这些案例将是绘制的巅峰作品,它们的没有任何的实用性,也不为任何需求而生,它们仅是因为存在而存在,是人类智慧和表达的媒介,称谓艺术。"
+ }
+]
\ No newline at end of file
diff --git a/assets/data/web/node.json b/assets/data/web/node.json
new file mode 100644
index 000000000..b27cbda5e
--- /dev/null
+++ b/assets/data/web/node.json
@@ -0,0 +1 @@
+[{"id":null,"widgetId":9,"name":"CircleAvatar的表现","priority":1,"subtitle":"【radius】 : 半径 【double】\n【backgroundImage】 : 图片资源 【ImageProvider】\n【foregroundColor】: 前景色 【Color】\n【backgroundColor】: 背景色 【Color】\n【minRadius】: 最小半径 【double】\n【maxRadius】: 最大半径 【double】\n【child】: 孩子组件 【Child】","code":"import 'package:flutter/material.dart';\nclass CustomCircleAvatar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return CircleAvatar(\n radius: 50,\n backgroundImage: AssetImage(\"assets/images/wy_200x300.jpg\"),\n foregroundColor: Colors.white,\n child: Icon(\n Icons.check,\n size: 50,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":19,"name":"RadioListTile需要一个泛型T","priority":1,"subtitle":"【value】 : 条目对象 【T】\n【groupValue】 : 选中对象 【T】\n【selected】: 是否选中 【bool】\n【secondary】: 右侧组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【onChanged】: 切换事件 【Function(T)】","code":"import 'package:flutter/material.dart';\nclass ItemBean {\n final String title;\n final String subTitle;\n final String imgUrl;\n\n ItemBean(this.title, this.subTitle, this.imgUrl);\n}\n\nclass CustomRadioListTile extends StatefulWidget {\n @override\n _CustomRadioListTileState createState() => _CustomRadioListTileState();\n}\n\nclass _CustomRadioListTileState extends State {\n final Map languages = {\n ItemType.java:\n ItemBean(\"Java\", \"曾经世界上最流行的语言\", \"assets/images/java.jpeg\"),\n ItemType.kotlin:\n ItemBean(\"Kotlin\", \"未来世界上最流行的语言\", \"assets/images/kotlin.jpg\"),\n ItemType.dart:\n ItemBean(\"Dart\", \"世界上最优雅的语言\", \"assets/images/dart.jpg\"),\n };\n var _type = ItemType.java;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(11),\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: languages.keys\n .map((type) => RadioListTile(\n value: type,\n groupValue: _type,\n title: Text(languages[type].title),\n subtitle: Text(languages[type].subTitle),\n selected: _type == type,\n secondary: CircleAvatar(\n backgroundImage: AssetImage(languages[type].imgUrl),\n ),\n onChanged: (type) => setState(() => _type = type),\n ))\n .toList()),\n );\n }\n}\n"},{"id":null,"widgetId":19,"name":"RadioListTile选中色和密排","priority":2,"subtitle":"【activeColor】 : 选中时颜色 【Color】\n【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass ItemBean {\n final String title;\n final String subTitle;\n final String imgUrl;\n\n ItemBean(this.title, this.subTitle, this.imgUrl);\n}\n\nclass DenseRadioListTile extends StatefulWidget {\n @override\n _DenseRadioListTileState createState() => _DenseRadioListTileState();\n}\n\nclass _DenseRadioListTileState extends State {\n final Map languages = {\n ItemType.java:\n ItemBean(\"Java\", \"曾经世界上最流行的语言\", \"assets/images/java.jpeg\"),\n ItemType.kotlin:\n ItemBean(\"Kotlin\", \"未来世界上最流行的语言\", \"assets/images/kotlin.jpg\"),\n ItemType.dart:\n ItemBean(\"Dart\", \"世界上最优雅的语言\", \"assets/images/dart.jpg\"),\n };\n var _type = ItemType.java;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(11),\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: languages.keys\n .map((type) => RadioListTile(\n value: type,\n groupValue: _type,\n title: Text(languages[type].title),\n activeColor: Colors.orangeAccent,\n dense: true,\n subtitle: Text(languages[type].subTitle),\n selected: _type == type,\n secondary: CircleAvatar(\n backgroundImage: AssetImage(languages[type].imgUrl),\n ),\n onChanged: (type) => setState(() => _type = type),\n ))\n .toList()),\n );\n }\n}"},{"id":null,"widgetId":28,"name":"mini属性","priority":2,"subtitle":"【mini】: 是否是迷你 【bool】","code":"import 'package:flutter/material.dart';\nclass MiniFAB extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.red: Icons.add,\n Colors.blue: Icons.bluetooth,\n Colors.green: Icons.android,\n };\n return Wrap(\n spacing: 20,\n children: data.keys\n .map((e) => FloatingActionButton(\n heroTag: e.toString()+\"b\",\n onPressed: () {},\n backgroundColor: e,\n mini: true,\n foregroundColor: Colors.white,\n child: Icon(data[e]),\n tooltip: \"android\",\n elevation: 5, //z-阴影盖度\n ))\n .toList());\n }\n}"},{"id":null,"widgetId":28,"name":"FloatingActionButton点击事件","priority":1,"subtitle":"【child】: 子组件 【Widget】\n【tooltip】: 长按时提示文字 【String】\n【backgroundColor】: 背景色 【Color】\n【foregroundColor】: 前景色 【Color】\n【elevation】: 影深 【double】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomFAB extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.red: Icons.add,\n Colors.blue: Icons.bluetooth,\n Colors.green: Icons.android,\n };\n return Wrap(\n spacing: 20,\n children: data.keys\n .map((e) => FloatingActionButton(\n heroTag: e.toString()+\"a\",\n onPressed: () {},\n backgroundColor: e,\n foregroundColor: Colors.white,\n child: Icon(data[e]),\n tooltip: \"android\",\n elevation: 5, //z-阴影盖度\n ))\n .toList());\n }\n}"},{"id":null,"widgetId":28,"name":"shape属性","priority":3,"subtitle":"【shape】: 形状 【ShapeBorder】","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nimport '../../../../app/utils/pather.dart';\nclass ShapeFAB extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.red: Icons.add,\n Colors.blue: Icons.bluetooth,\n Colors.green: Icons.android,\n };\n return Wrap(\n spacing: 20,\n children: data.keys\n .map((e) => FloatingActionButton(\n heroTag: e.toString()+\"c\",\n onPressed: () {},\n backgroundColor: e,\n shape: StarBorder(),\n foregroundColor: Colors.white,\n child: Icon(data[e]),\n tooltip: \"android\",\n elevation: 5,\n ))\n .toList());\n }\n}\n\n/// 边线形状类\nclass StarBorder extends ShapeBorder {\n @override\n EdgeInsetsGeometry get dimensions => null;\n\n @override\n Path getInnerPath(Rect rect, {TextDirection textDirection}) {\n return null;\n }\n\n @override\n Path getOuterPath(Rect rect, {TextDirection textDirection}) {\n return Pather.create.nStarPath(20, 25, 25 * cos((360 / 9 / 2) * pi / 180),\n dx: rect.height / 2, dy: rect.width / 2);\n }\n\n @override\n void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}\n\n @override\n ShapeBorder scale(double t) {\n return null;\n }\n}"},{"id":null,"widgetId":154,"name":"Drawer基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【elevation】 : 影深 【double】","code":"import 'package:flutter/material.dart';\nclass CustomDrawer extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 400,\n child: Scaffold(\n appBar: AppBar(\n title: Text('Flutter Unit'),\n ),\n drawer: Drawer(\n elevation: 3,\n child: _buildChild(),\n ),\n ),\n );\n }\n\n Widget _buildChild() => ListView(\n padding: EdgeInsets.zero,\n children: const [\n DrawerHeader(\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage('assets/images/caver.jpeg'),\n fit: BoxFit.cover),\n ),\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 24, color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(1, 1), blurRadius: 3)\n ]),\n ),\n ),\n ListTile(\n leading: Icon(\n Icons.star,\n color: Colors.blue,\n ),\n title: Text('我的收藏'),\n ),\n ListTile(\n leading: Icon(\n Icons.palette,\n color: Colors.orangeAccent,\n ),\n title: Text('我的绘画'),\n ),\n ListTile(\n leading: Icon(\n Icons.insert_drive_file,\n color: Colors.green,\n ),\n title: Text('我的文件'),\n ),\n ],\n );\n}\n"},{"id":null,"widgetId":134,"name":"DayPicker基本使用","priority":1,"subtitle":" \n【selectedDate】 : 选中日期 【DateTime】\n【currentDate】 : 当前日期 【DateTime】\n【firstDate】 : 最前日期限制 【DateTime】\n【lastDate】 : 最后日期限制 【DateTime】\n【displayedMonth】 : 当前展示的月份 【DateTime】\n【onChanged】 : 点击回调 【Function(DateTime)】","code":"import 'package:flutter/material.dart';\nclass CustomDayPicker extends StatefulWidget {\n @override\n _CustomDayPickerState createState() => _CustomDayPickerState();\n}\n\nclass _CustomDayPickerState extends State {\n\n DateTime _date = DateTime.now();\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 350,\n child: DayPicker(\n selectedDate: _date,\n currentDate: DateTime.now(),\n onChanged: (date){\n setState(() => _date = date);\n },\n firstDate: DateTime(2018),\n lastDate: DateTime(2030),\n displayedMonth: DateTime.now()\n ),\n );\n }\n}\n"},{"id":null,"widgetId":27,"name":"OutlineButton点击事件","priority":1,"subtitle":"【textColor】: 子组件文字颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【highlightedBorderColor】: 高亮时框色 【Color】\n【child】: 子组件 【Widget】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【borderSide】: 边线 【BorderSide】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomOutlineButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return OutlineButton(//边线按钮\n onPressed: () {},\n child: Text(\"OutlineButton\"),\n padding: EdgeInsets.all(8),\n splashColor: Colors.green,\n highlightColor: Colors.orangeAccent,\n highlightedBorderColor: Colors.grey,\n textColor: Color(0xff000000),\n borderSide: BorderSide(color: Color(0xff0A66F8), width: 2),\n );\n }\n}\n"},{"id":null,"widgetId":147,"name":"Listener基本事件","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onPointerDown】 : 按下事件 【Function(PointerDownEvent)】\n【onPointerMove】 : 移动事件 【Function(PointerMoveEvent)】\n【onPointerMove】 : 抬起事件 【Function(PointerUpEvent)】\n【onPointerCancel】 : 取消事件 【Function(PointerUpEvent)】","code":"import 'package:flutter/material.dart';\nclass CustomListener extends StatefulWidget {\n @override\n _CustomListenerState createState() => _CustomListenerState();\n}\n\nclass _CustomListenerState extends State {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return Listener(\n onPointerDown: (detail) => setState(() => _info = detail.toString()),\n onPointerMove: (detail) => setState(() => _info = detail.toString()),\n onPointerUp: (detail) => setState(() => _info = detail.toString()),\n onPointerCancel: (detail) => setState(() => _info = detail.toString()),\n\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.618,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 16, color: Colors.blue),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":159,"name":"PositionedDirectional基本使用","priority":1,"subtitle":" \n【child】 : 组件 【Widget】\n【top】 : 到父顶距离 【double】\n【end】 : 到父右距离 【double】\n【start】 : 到父左距离 【double】\n【bottom】 : 到父底距离 【double】","code":"import 'package:flutter/material.dart';\nclass CustomPositionedDirectional extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var yellowBox = Container(\n color: Colors.yellow,\n height: 100,\n width: 100,\n );\n\n var redBox = Container(\n color: Colors.red,\n height: 90,\n width: 90,\n );\n\n var greenBox = Container(\n color: Colors.green,\n height: 80,\n width: 80,\n );\n\n var cyanBox = Container(\n color: Colors.cyanAccent,\n height: 70,\n width: 70,\n );\n\n return Container(\n width: 200,\n height: 120,\n color: Colors.grey.withAlpha(33),\n child: Stack(\n children: [\n yellowBox,\n redBox,\n PositionedDirectional(top: 20, start: 20, child: greenBox),\n PositionedDirectional(\n child: cyanBox,\n bottom: 10,\n end: 10,\n )\n ],\n ));\n }\n}\n"},{"id":null,"widgetId":3,"name":"可以通过shape属性实现裁切效果","priority":2,"subtitle":"【shape】 : 形状 【ShapeBorder】\n【margin】: 外边距 【double】\n【color】: 颜色 【Color】\n【child】: 孩子 【Widget】","code":"import 'package:flutter/material.dart';\nimport '../../../../app/utils/pather.dart';\nclass ShapeCard extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Card(\n color: Color(0xffB3FE65),\n elevation: 6,\n shape: StarShapeBorder(),\n child: Container(\n alignment: Alignment.center,\n width: 100,\n height: 100,\n child: Text(\"Card\", style: TextStyle(fontSize: 20)),\n ),\n );\n }\n}\n\nclass StarShapeBorder extends ShapeBorder {\n @override\n EdgeInsetsGeometry get dimensions => null;\n\n @override\n Path getInnerPath(Rect rect, {TextDirection textDirection}) {\n return null;\n }\n\n @override\n Path getOuterPath(Rect rect, {TextDirection textDirection}) =>\n Pather.create.nStarPath(9, 50, 40, dx: 50, dy: 50);\n\n @override\n void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {\n }\n\n @override\n ShapeBorder scale(double t) {\n return null;\n }\n}"},{"id":null,"widgetId":3,"name":"Card可以让一个组件卡片化","priority":1,"subtitle":"【elevation】 : 影深 【double】\n【margin】: 外边距 【double】\n【color】: 颜色 【Color】\n【child】: 孩子 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomCard extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Card(\n color: Color(0xffB3FE65),\n elevation: 4,\n margin: EdgeInsets.all(10),\n child: Container(\n alignment: Alignment.topLeft,\n width: 200,\n height: 0.618*200,\n margin: EdgeInsets.all(10),\n child: Text(\"Card\", style: TextStyle(fontSize: 20)),\n ),\n );\n }\n}"},{"id":null,"widgetId":204,"name":"PreferredSize的转化使用","priority":2,"subtitle":"【PreferredSize将普通组件转化为PreferredSizeWidget","code":"import 'package:flutter/material.dart';\nclass AdapterPreferredSize extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scaffold(\n appBar: PreferredSize(\n preferredSize: Size.fromHeight(150),\n child: AppBar(\n title: Text('PreferredSize'),\n bottom: PreferredSize(\n preferredSize: Size.fromHeight(40),\n child: Container(\n height: 40,\n color: Colors.orange,\n ),\n ),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":204,"name":"PreferredSize调整AppBar高度","priority":1,"subtitle":"【preferredSize】 : 尺寸 【Size】","code":"import 'package:flutter/material.dart';\nclass CustomPreferredSize extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scaffold(\n appBar: PreferredSize(\n preferredSize: Size.fromHeight(150),\n child: AppBar(\n title: Text('PreferredSize'),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":29,"name":"ButtonBar边距和高","priority":2,"subtitle":"【buttonPadding】: 内边距 【EdgeInsetsGeometry】\n【buttonHeight】: 高 【double】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass PaddingButtonBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ButtonBar(\n alignment: MainAxisAlignment.center,\n buttonHeight: 40,\n buttonPadding: EdgeInsets.only(left: 15,right: 15),\n children: [\n RaisedButton(\n color: Colors.blue,\n child: Text(\"Raised\"),\n onPressed: () => DialogAbout.show(context)),\n OutlineButton(\n child: Text(\"Outline\"),\n onPressed: () => DialogAbout.show(context)),\n FlatButton(\n color: Colors.blue,\n onPressed: () => DialogAbout.show(context),\n child: Text(\"Flat\"),\n )\n ],\n );\n }\n}\n"},{"id":null,"widgetId":29,"name":"ButtonBar对齐方式","priority":1,"subtitle":"【alignment】: 对齐方式 【MainAxisAlignment】\n【children】: 子组件集 【List】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomButtonBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ButtonBar(\n alignment: MainAxisAlignment.center,\n children: [\n RaisedButton(\n color: Colors.blue,\n child: Text(\"Raised\"),\n onPressed: () => DialogAbout.show(context)),\n OutlineButton(\n child: Text(\"Outline\"),\n onPressed: () => DialogAbout.show(context)),\n FlatButton(\n color: Colors.blue,\n onPressed: () => DialogAbout.show(context),\n child: Text(\"Flat\"),\n )\n ],\n );\n }\n}\n\n"},{"id":null,"widgetId":146,"name":"GestureDetector基本事件","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onTap】 : 点击事件 【Function()】\n【onDoubleTap】 : 双击事件 【Function()】\n【onLongPress】 : 长按事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomGestureDetector extends StatefulWidget {\n @override\n _CustomGestureDetectorState createState() => _CustomGestureDetectorState();\n}\n\nclass _CustomGestureDetectorState extends State {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () => setState(() => _info = 'onTap'),\n onDoubleTap: () => setState(() => _info = 'onDoubleTap'),\n onLongPress: () => setState(() => _info = 'onLongPress'),\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.4,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 18, color: Colors.blue),\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":146,"name":"GestureDetector详情信息","priority":2,"subtitle":" \n【onTapDown】 : 按下回调 【Function(TapDownDetails)】\n【onTapUp】 : 子组件 【Function(TapUpDetails)】\n【onTapCancel】 : 点击取消 【Function()】","code":"import 'package:flutter/material.dart';\nclass TapGestureDetector extends StatefulWidget {\n @override\n _TapGestureDetectorState createState() => _TapGestureDetectorState();\n}\n\nclass _TapGestureDetectorState extends State {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTapDown: (detail) => setState(() => _info =\n 'onTapDown:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onTapUp: (detail) => setState(() => _info =\n 'onTapUp:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onTapCancel: () => setState(() => _info = 'onTapCancel'),\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.618,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 18, color: Colors.blue),\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":146,"name":"GestureDetector的Pan事件","priority":3,"subtitle":" \n【onPanDown】 : 按下回调 【Function(DragDownDetails)】\n【onPanEnd】 : 拖动结束 【Function(DragEndDetails)】\n【onPanStart】 : 开始拖动 【Function(DragStartDetails)】\n【onPanUpdate】 : 拖动更新 【Function(TapUpDetails)】\n【onPanCancel】 : 拖动取消 【Function()】","code":"import 'package:flutter/material.dart';\nclass PanGestureDetector extends StatefulWidget {\n @override\n _PanGestureDetectorState createState() => _PanGestureDetectorState();\n}\n\nclass _PanGestureDetectorState extends State {\n var _info = '';\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onPanDown: (detail) => setState(() => _info =\n 'onPanDown:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onPanEnd: (detail) => setState(() => _info =\n 'onPanEnd:\\n初速度:${detail.primaryVelocity}\\n最终速度:${detail.velocity}'),\n onPanUpdate: (detail) => setState(() => _info =\n 'onPanUpdate:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onPanStart: (detail) => setState(() => _info =\n 'onPanStart:\\n相对落点:${detail.localPosition}\\n绝对落点:${detail.globalPosition}'),\n onPanCancel: () => setState(() => _info = 'onTapCancel'),\n child: SingleChildScrollView(\n child: Container(\n alignment: Alignment.center,\n width: 300,\n height: 300 * 0.618,\n color: Colors.grey.withAlpha(33),\n child: Text(\n _info,\n style: TextStyle(fontSize: 18, color: Colors.blue),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":13,"name":"ActionChip的普通表现如下","priority":1,"subtitle":"【onPressed】: 点击事件 【Function】\n【pressElevation】: 按下时影深 【double】\n其他属性同Chip组件,无右侧组件。","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomActionChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ActionChip(\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n label: Text(\"This is a ActionChip.\"),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n pressElevation: 5,\n onPressed: ()=> DialogAbout.show(context),\n );\n }\n}\n"},{"id":null,"widgetId":26,"name":"RaisedButton点击事件","priority":1,"subtitle":"【color】: 颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【elevation】: 影深 【double】\n【child】: 子组件 【Widget】\n【textColor】: 子组件文字颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomRaisedButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return RaisedButton(\n color: Colors.blue,\n splashColor: Colors.green,\n onPressed: () {},\n child: Text(\"RaisedButton\"),\n textColor: Color(0xffFfffff),\n padding: EdgeInsets.all(8),\n elevation: 5,\n highlightColor: Color(0xffF88B0A),\n );\n }\n}\n"},{"id":null,"widgetId":211,"name":"MaterialBanner两行的使用","priority":2,"subtitle":"【contentTextStyle】: 中间位置样式 【TextStyle】\n【leadingPadding】: 左侧组件边距 【EdgeInsetsGeometry】\n当尾部组件数量大于1,该组件结构为左中下。","code":"import 'package:flutter/material.dart';\nclass MaterialBannerDemoTwo extends StatelessWidget {\n final info =\n 'A banner displays an important, succinct message, and provides actions for users to address. '\n 'A user action is required for itto be dismissed.';\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [MaterialBanner(\n content: Text(\n info,\n style: TextStyle(color: Colors.white),\n ),\n backgroundColor: Colors.purple,\n leading: Icon(Icons.warning, color: Colors.yellow),\n padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0,end: 2),\n leadingPadding:EdgeInsetsDirectional.only(end: 16.0) ,\n actions: [\n RaisedButton(\n color: Colors.white,\n onPressed: () {},\n child: Text(\n 'I KNOW',\n style: TextStyle(\n color: Colors.purple,\n fontWeight: FontWeight.bold,\n fontSize: 14),\n ),\n ),\n\n RaisedButton(\n color: Colors.white,\n onPressed: () {},\n child: Text(\n 'I IGNORE',\n style: TextStyle(\n color: Colors.purple,\n fontWeight: FontWeight.bold,\n fontSize: 14),\n ),\n ),\n ],\n )],\n );\n }\n\n}\n"},{"id":null,"widgetId":211,"name":"MaterialBanner一行的使用","priority":1,"subtitle":"【content】 : 中间组件 【Widget】\n【leading】: 左侧组件 【Widget】\n【actions】: 右侧组件列表 【List】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【forceActionsBelow】: 是否按钮在下方 【bool】\n【backgroundColor】: 背景色 【Color】","code":"import 'package:flutter/material.dart';\nclass MaterialBannerDemo extends StatelessWidget {\n final info =\n 'Welcome to Flutter Unit!';\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [MaterialBanner(\n content: Text(\n info,\n style: TextStyle(color: Colors.white),\n ),\n backgroundColor: Colors.purple,\n leading: Icon(Icons.info, color: Colors.lightBlueAccent),\n padding: EdgeInsetsDirectional.only(start: 16.0, top: 2.0),\n forceActionsBelow: false, // 默认false\n actions: [\n Text(\n 'I KNOW',\n style:TextStyle(\n color: Colors.orange,\n fontWeight: FontWeight.bold,\n fontSize: 14) ,\n )\n ],\n )],\n );\n }\n\n}\n"},{"id":null,"widgetId":164,"name":"SingleChildScrollView基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【padding】 : 点击事件 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomSingleChildScrollView extends StatelessWidget {\n final data = [\n Colors.blue[50],\n Colors.blue[100],\n Colors.blue[200],\n Colors.blue[300],\n Colors.blue[400],\n Colors.blue[500],\n Colors.blue[600],\n Colors.blue[700],\n Colors.blue[800],\n Colors.blue[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: SingleChildScrollView(\n padding: EdgeInsets.symmetric(horizontal: 10),\n child: Column(\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n\n ),\n );\n }\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":164,"name":"SingleChildScrollView滑动方向","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向 【Axis】","code":"import 'package:flutter/material.dart';\nclass DirectionSingleChildScrollView extends StatelessWidget {\n final data = [\n Colors.blue[50],\n Colors.blue[100],\n Colors.blue[200],\n Colors.blue[300],\n Colors.blue[400],\n Colors.blue[500],\n Colors.blue[600],\n Colors.blue[700],\n Colors.blue[800],\n Colors.blue[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: SingleChildScrollView(\n scrollDirection: Axis.horizontal,\n reverse: true,\n padding: EdgeInsets.symmetric(horizontal: 10),\n child: Row(\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 90,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n\n ),\n );\n }\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":33,"name":"ToggleButtons多选切换","priority":3,"subtitle":" 可以控制状态转化的逻辑来形成不同的效果。","code":"import 'package:flutter/material.dart';\nclass ProToggleButtons extends StatefulWidget {\n @override\n _ProToggleButtonsState createState() => _ProToggleButtonsState();\n}\n\nclass _ProToggleButtonsState extends State {\n var _isSelected = [false, false, false];\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: [\n Icon(Icons.skip_previous),\n Icon(Icons.pause),\n Icon(Icons.skip_next),\n ],\n borderWidth: 1,\n borderColor: Colors.blue,\n selectedBorderColor: Colors.orangeAccent,\n splashColor: Colors.purple.withAlpha(66),\n borderRadius: BorderRadius.circular(10),\n selectedColor: Colors.red,\n fillColor: Colors.green.withAlpha(11),\n isSelected: _isSelected,\n onPressed: (value) => setState(() {\n _isSelected[value] = !_isSelected[value];\n }),\n );\n }\n}"},{"id":null,"widgetId":33,"name":"ToggleButtons单选切换","priority":1,"subtitle":"【children】: 子组件集 【List】\n【borderWidth】: 边线宽 【double】\n【borderRadius】: 圆角 【BorderRadius】\n【isSelected】: 是否选中集 【List】\n【onPressed】: 点击事件 【Function(int)】","code":"import 'package:flutter/material.dart';\nclass CustomToggleButtons extends StatefulWidget {\n @override\n _CustomToggleButtonsState createState() => _CustomToggleButtonsState();\n}\n\nclass _CustomToggleButtonsState extends State {\n var _isSelected = [true, false, false];\n\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: [\n Icon(Icons.skip_previous),\n Icon(Icons.pause),\n Icon(Icons.skip_next),\n ],\n borderWidth: 1,\n borderRadius: BorderRadius.circular(10),\n isSelected: _isSelected,\n onPressed: (value) => setState(() {\n _isSelected = _isSelected.map((e) => false).toList();\n _isSelected[value] = true;\n }),\n );\n\n }\n}"},{"id":null,"widgetId":33,"name":"ToggleButtons颜色属性","priority":2,"subtitle":"【borderColor】: 边线色 【Color】\n【selectedBorderColor】: 选中边线色 【Color】\n【selectedColor】: 选中时组件色 【Color】\n【fillColor】: 选中时填充色 【Color】\n【splashColor】: 水波纹色 【Color】","code":"import 'package:flutter/material.dart';\nclass ColorToggleButtons extends StatefulWidget {\n @override\n _ColorToggleButtonsState createState() => _ColorToggleButtonsState();\n}\n\nclass _ColorToggleButtonsState extends State {\n var _isSelected = [true, false, false];\n @override\n Widget build(BuildContext context) {\n return ToggleButtons(\n children: [\n Icon(Icons.skip_previous),\n Icon(Icons.pause),\n Icon(Icons.skip_next),\n ],\n borderWidth: 1,\n borderColor: Colors.orangeAccent,\n selectedBorderColor: Colors.blue,\n splashColor: Colors.purple.withAlpha(66),\n borderRadius: BorderRadius.circular(10),\n selectedColor: Colors.red,\n fillColor: Colors.green.withAlpha(11),\n isSelected: _isSelected,\n onPressed: (value) => setState(() {\n _isSelected = _isSelected.map((e) => false).toList();\n _isSelected[value] = true;\n }),\n );\n }\n}\n"},{"id":null,"widgetId":10,"name":"replacement可在隐藏时进行占位","priority":2,"subtitle":"【replacement】 : 隐藏时的占位组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass ReplacementVisibility extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: [\n _buildVisibility(true),\n _buildVisibility(false),\n ],\n );\n }\n\n _buildVisibility(bool visible) {\n var box = Container(\n height: 30,\n width: 30,\n color: Colors.blue,\n );\n return Container(\n width: 150,\n height: 150 * 0.618,\n color: Colors.cyanAccent.withAlpha(33),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n box,\n Visibility(\n visible: visible,\n replacement: Container(\n alignment: Alignment.center,\n height: 80 * 0.618,\n width: 80,\n ),\n child: Container(\n alignment: Alignment.center,\n height: 80 * 0.618,\n width: 80,\n color: Colors.red,\n child: Text(\n \"visible\\ntrue\",\n style: TextStyle(fontSize: 20),\n ),\n )),\n box,\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":10,"name":"根据visible控制内部子组件的显隐情况","priority":1,"subtitle":"【visible】 : 是否显示 【bool】\n【child】: 孩子 【Widget】\n默认孩子隐藏时会失去原来所在区域。","code":"import 'package:flutter/material.dart';\nclass CustomVisibility extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n children: [\n _buildVisibility(true),\n _buildVisibility(false),\n ],\n );\n }\n\n _buildVisibility(bool visible) {\n var box = Container(\n height: 30,\n width: 30,\n color: Colors.blue,\n );\n return Container(\n width: 150,\n height: 150 * 0.618,\n color: Colors.cyanAccent.withAlpha(33),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n box,\n Visibility(\n visible: visible,\n child: Container(\n alignment: Alignment.center,\n height: 80 * 0.618,\n width: 80,\n color: Colors.red,\n child: Text(\n \"visible\\ntrue\",\n style: TextStyle(fontSize: 20),\n ),\n )),\n box,\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":208,"name":"Title基本使用","priority":1,"subtitle":"【title】 : 名称 【int】\n【color】: 颜色 【Color】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass TitleDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Title(\n title: '张风捷特烈',\n color: Color(0xFF9C27B0),\n child: Center(child: Text('应用菜单栏中该页的名称为: 张风捷特烈'))),\n );\n }\n}\n"},{"id":null,"widgetId":163,"name":"GridView.extent构造","priority":3,"subtitle":" \n【maxCrossAxisExtent】 : box轴向长度 【double】\n【reverse】 : 是否反向滑动 【bool】\n【shrinkWrap】 : 无边界时是否包裹 【bool】","code":"import 'package:flutter/material.dart';\nclass ExtentGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.extent(\n scrollDirection: Axis.horizontal,\n maxCrossAxisExtent: 80.0,\n mainAxisSpacing: 2,\n crossAxisSpacing: 2,\n childAspectRatio: 0.618,\n children: data\n .map((color) => _buildItem(color))\n .toList(),\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":163,"name":"GridView.count构造","priority":1,"subtitle":" \n【children】 : 子组件列表 【List】\n【crossAxisCount】 : 主轴一行box数量 【int】\n【mainAxisSpacing】 : 主轴每行间距 【double】\n【crossAxisSpacing】 : 交叉轴每行间距 【double】\n【childAspectRatio】 : box主长/交叉轴长 【double】\n【crossAxisCount】 : 主轴一行数量 【int】","code":"import 'package:flutter/material.dart';\nclass CustomGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFFFF00FF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.count(\n crossAxisCount: 4,\n mainAxisSpacing: 2,\n crossAxisSpacing: 2,\n childAspectRatio: 1/0.618,\n children: data\n .map((color) => _buildItem(color))\n .toList(),\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":163,"name":"GridView.builder构造","priority":4,"subtitle":" \n【itemCount】 : 条目数量 【int】\n【gridDelegate】 : 网格代理 【SliverGridDelegate】\n【itemBuilder】 : 条目构造器 【IndexedWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass BuilderGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF33FFF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.builder(\n itemCount: data.length,\n scrollDirection: Axis.vertical,\n gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(//网格代理:定交叉轴数目\n crossAxisCount: 4,//条目个数\n mainAxisSpacing: 5,//主轴间距\n crossAxisSpacing: 5,//交叉轴间距\n childAspectRatio:1/0.618),\n itemBuilder: (_, int position)=> _buildItem(data[position])\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":163,"name":"GridView滑动方向","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向滑动 【bool】\n【shrinkWrap】 : 无边界时是否包裹 【bool】","code":"import 'package:flutter/material.dart';\nclass HorizontalGridView extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF00FFFF - 2*i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: GridView.count(\n scrollDirection: Axis.horizontal,\n reverse: true,\n crossAxisCount: 4,\n mainAxisSpacing: 2,\n crossAxisSpacing: 2,\n childAspectRatio: 0.618,\n children: data\n .map((color) => _buildItem(color))\n .toList(),\n ),\n );\n }\n\n Container _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 30,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":140,"name":"SnackBar基本使用","priority":1,"subtitle":" \n【content】 : 中间内容组件 【Widget】\n【action】 : 右侧按钮 【SnackBarAction】\n【duration】 : 持续时长 【Widget】\n【backgroundColor】 : 背景色 【Color】\n【elevation】 : 影深 【double】\n【shape】 : 形状 【ShapeBorder】\n【onVisible】 : 显示时回调 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomSnackBar extends StatefulWidget {\n @override\n _CustomSnackBarState createState() => _CustomSnackBarState();\n}\n\nclass _CustomSnackBarState extends State {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: FlatButton(\n color: Colors.blue,\n onPressed: () =>\n Scaffold.of(context).showSnackBar(_buildSnackBar()),\n child: Text(\n '点我弹出SnackBar',\n style: TextStyle(color: Colors.white),\n )));\n }\n\n Widget _buildSnackBar() {\n return SnackBar(\n elevation: 3,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(10), topRight: Radius.circular(10))),\n content: Text('Wellcome to for join Flutter Unit!'),\n duration: Duration(seconds: 3),\n //持续时间\n backgroundColor: Colors.red,\n onVisible: () => print('onVisible'),\n action: SnackBarAction(\n textColor: Colors.white, label: '确定', onPressed: () {}),\n );\n }\n}\n"},{"id":null,"widgetId":206,"name":"TabPageSelectorIndicator基本使用","priority":1,"subtitle":"【size】: 大小 【double】\n【backgroundColor】: 背景色 【Color】\n【borderColor】: 边线色 【Color】","code":"import 'package:flutter/material.dart';\nclass TabPageSelectorIndicatorDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n TabPageSelectorIndicator(\n backgroundColor: Colors.greenAccent,\n borderColor: Colors.deepPurpleAccent,\n size: 15,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.blue,\n borderColor: Colors.grey,\n size: 20,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.green,\n borderColor: Colors.red,\n size: 25,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.yellow,\n borderColor: Colors.brown,\n size: 30,\n ),\n TabPageSelectorIndicator(\n backgroundColor: Colors.amber,\n borderColor: Colors.purpleAccent,\n size: 35,\n ),\n ],\n ),\n );\n }\n\n}\n\n"},{"id":null,"widgetId":16,"name":"ListTile的密排属性","priority":3,"subtitle":"【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass DenseListTile extends StatefulWidget {\n @override\n _DenseListTileState createState() => _DenseListTileState();\n}\n\nclass _DenseListTileState extends State {\n bool _dense = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n selected: false,\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n dense: _dense,\n onTap: () => setState(() => _dense = !_dense),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":16,"name":"ListTile选中效果和长按事件","priority":2,"subtitle":"【selected】: 是否选中 【bool】\n【onTap】: 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass SelectListTile extends StatefulWidget {\n @override\n _SelectListTileState createState() => _SelectListTileState();\n}\n\nclass _SelectListTileState extends State {\n bool _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n selected: _selected,\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n onTap: () => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":16,"name":"ListTile的基本表现如下","priority":1,"subtitle":"【leading】: 左侧组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【trailing】: 尾组件 【Widget】\n【contentPadding】: 内边距 【EdgeInsetsGeometry】\n【onLongPress】: 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomListTile extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: ListTile(\n leading: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"以梦为马\"),\n subtitle: Text(\"海子\"),\n contentPadding: EdgeInsets.all(5),\n trailing: Icon(Icons.more_vert),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n ),\n );\n }\n}"},{"id":null,"widgetId":20,"name":"GridTileBar的基本表现如下","priority":1,"subtitle":"【value】 : 条目对象 【T】\n【leading】: 左侧组件 【Widget】\n【trailing】: 尾组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【backgroundColor】: 背景色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomGridTileBar extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return GridTileBar(\n backgroundColor: Colors.blue.withAlpha(120),\n trailing: Icon(\n Icons.star,\n color: Colors.red,\n ),\n leading: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/wy_200x300.jpg\"),\n ),\n title: Text(\"百里·巫缨\"),\n subtitle: Text(\"倾国必倾城\"),\n );\n }\n}\n"},{"id":null,"widgetId":21,"name":"GridTile的基本表现如下","priority":1,"subtitle":"【header】: 头组件 【Widget】\n【child】: 子组件 【Widget】\n【footer】: 脚组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomGridTile extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200, height: 200,\n child: GridTile(\n header: GridTileBar(\n backgroundColor: Colors.blue.withAlpha(120),\n trailing: Icon(\n Icons.star,\n color: Colors.red,\n ),\n leading: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/wy_200x300.jpg\"),\n ),\n title: Text(\"百里·巫缨\"),\n subtitle: Text(\"倾国必倾城\"),\n ),\n child: Opacity(\n opacity: 0.5,\n child: Image.asset(\n \"assets/images/sabar.jpg\",\n fit: BoxFit.cover,\n ),\n ),\n footer: Padding(\n padding: const EdgeInsets.all(8.0),\n child: Text(\n \"ID:z\\$ySX32&29\",\n style: TextStyle(shadows: [\n Shadow(\n color: Colors.blue,\n offset: Offset(.1, .1),\n blurRadius: 2),\n ]),\n ),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":11,"name":"可以设置颜色和阴影","priority":2,"subtitle":"【backgroundColor】: 背景色 【Color】\n【shadowColor】: 阴影色 【Color】\n【elevation】: 影深 【double】","code":"import 'package:flutter/material.dart';\nclass ColorOfChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: [\n Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n backgroundColor: Colors.grey.withAlpha(66),\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n ),\n Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n backgroundColor: Colors.cyanAccent.withAlpha(11),\n shadowColor: Colors.blue.withAlpha(88),\n elevation: 4,\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":11,"name":"可以设置右侧点击按钮","priority":3,"subtitle":"【deleteIcon】: 右侧组件(通常为Icon) 【Widget】\n【deleteIconColor】: 右侧组件颜色 【Color】\n【onDeleted】: 右侧组件点击事件 【Function】","code":"import 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass DeleteOfChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n backgroundColor: Colors.grey.withAlpha(66),\n shadowColor: Colors.orangeAccent,\n// deleteIcon: Icon(Icons.close,size: 18),\n deleteIconColor: Colors.red,\n onDeleted: () => DialogAbout.show(context),\n elevation: 3,\n );\n }\n}"},{"id":null,"widgetId":11,"name":"Chip的普通表现如下","priority":1,"subtitle":"【avatar】: 左侧组件 【Widget】\n【label】: 中间组件 【Widget】\n【padding】 : 内边距 【EdgeInsetsGeometry】\n【labelPadding】: label边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomChip extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: [\n Chip(\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n label: Text(\"张风捷特烈\"),\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n ),\n Chip(\n avatar: CircleAvatar(\n backgroundImage:\n AssetImage(\"assets/images/wy_200x300.jpg\")),\n label: Text(\"百里巫缨\"),\n padding: EdgeInsets.all(8),\n labelPadding: EdgeInsets.all(6),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":214,"name":"NavigationToolbar基本使用","priority":1,"subtitle":"【leading】 : 左侧组件 【Widget】\n【middle】: 中间组件 【Widget】\n【trailing】: 右侧组件组件 【Widget】\n【centerMiddle】: 中间组件是否居中 【bool】\n【middleSpacing】: 中间组件距左距离 【double】","code":"import 'package:flutter/material.dart';\nclass NavigationToolbarDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n Container(\n height: 60,\n child: NavigationToolbar(\n leading: Icon(Icons.ac_unit),\n middle: Text('middleSpacing#true'),\n middleSpacing: 20,\n centerMiddle: true,\n trailing: Icon(Icons.more_vert),\n ),\n ),\n Container(\n height: 60,\n child: NavigationToolbar(\n leading: Icon(Icons.ac_unit),\n middle: Text('middleSpacing#false'),\n middleSpacing: 20,\n centerMiddle: false,\n trailing: Icon(Icons.more_vert),\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":128,"name":"SimpleDialog基本使用","priority":1,"subtitle":" \n【title】 : 顶部组件 【Widget】\n【children】 : 子组件列表 【List】\n【titlePadding】 : 顶部内边距 【EdgeInsetsGeometry】\n【contentPadding】 : 内容内边距 【EdgeInsetsGeometry】\n【backgroundColor】 : 右下角组件列表 【背景色】\n【elevation】 : 右下角组件列表 【背景色】\n【shape】 : 影深 【double】","code":"import 'dart:math';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomSimpleDialog extends StatelessWidget {\n final info = [\n '性别: 男 未婚',\n '微信: zdl1994328',\n \"掘金: 张风捷特烈\",\n \"github: toly1994328\",\n \"邮箱: 1981462008@qq.com\",\n ];\n\n @override\n Widget build(BuildContext context) {\n return Stack(\n children: [\n _buildSimpleDialog(context),\n Positioned(\n top: 70,\n right: 30,\n child: _buildRaisedButton(context)),\n\n ],\n );\n }\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildSimpleDialog(ctx));\n },\n child: Text(\n 'Just Show It',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n SimpleDialog _buildSimpleDialog(BuildContext context) {\n return SimpleDialog(\n title: _buildTitle(),\n titlePadding: EdgeInsets.only(\n top: 5,\n left: 20,\n ),\n contentPadding: EdgeInsets.symmetric(horizontal: 5),\n children: _buildChild(context),\n backgroundColor: Colors.white,\n elevation: 4,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n );\n }\n\n List _buildChild(BuildContext context) {\n return info\n .map((str) => Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n SimpleDialogOption(\n onPressed: () => print(str),\n child: Container(\n width: double.infinity,\n child: Text(\n str,\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n ),\n ),\n ),\n Divider(\n indent: 20,\n height: 12,\n color: info.indexOf(str) == info.length - 1\n ? Colors.transparent\n : Theme.of(context).dividerColor,\n )\n ],\n ))\n .toList();\n }\n\n Widget _buildTitle() {\n return Row(\n //标题\n children: [\n Image.asset(\n \"assets/images/icon_head.png\",\n width: 30,\n height: 30,\n ),\n SizedBox(\n width: 10,\n ),\n Expanded(\n child: Text(\n \"张风捷特烈\",\n style: TextStyle(fontSize: 18),\n )),\n CloseButton()\n ],\n );\n }\n}\n"},{"id":null,"widgetId":23,"name":"MaterialButton长按事件","priority":2,"subtitle":"【highlightColor】: 长按高亮色 【Color】\n【onLongPress】: 长按事件 【Function】","code":"import 'package:flutter/material.dart';\nclass LongPressMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialButton(\n height: 40,\n elevation: 5,\n color: Colors.blue,\n highlightColor: Colors.green,\n textColor: Colors.white,\n padding: EdgeInsets.all(8),\n child: Text(\"MaterialButton\"),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n }\n}"},{"id":null,"widgetId":23,"name":"MaterialButton点击事件","priority":1,"subtitle":"【color】: 颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【height】: 高 【double】\n【elevation】: 影深 【double】\n【child】: 子组件 【Widget】\n【textColor】: 子组件文字颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialButton(\n height: 40,\n elevation: 5,\n color: Colors.orangeAccent,\n textColor: Colors.white,\n splashColor: Colors.blue,\n padding: EdgeInsets.all(8),\n child: Text(\"MaterialButton\"),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n }\n}"},{"id":null,"widgetId":23,"name":"MaterialButton的自定义形状","priority":3,"subtitle":"【shape】: 形状 【ShapeBorder】","code":"import 'package:flutter/material.dart';\nclass ShapeMaterialButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: [\n Container(\n width: 40,\n height: 40,\n child: MaterialButton(\n padding: EdgeInsets.all(0),\n textColor: Color(0xffFfffff),\n elevation: 3,\n color: Colors.blue,\n highlightColor: Color(0xffF88B0A),\n splashColor: Colors.red,\n child: Icon(\n Icons.add,\n color: Colors.white,\n ),\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage')),\n ),\n Container(\n width: 100,\n height: 40,\n child: MaterialButton(\n padding: EdgeInsets.all(0),\n textColor: Color(0xffFfffff),\n elevation: 3,\n color: Colors.blue,\n highlightColor: Color(0xffF88B0A),\n splashColor: Colors.red,\n child: Icon(\n Icons.remove,\n color: Colors.white,\n ),\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(15))),\n onLongPress: () => Navigator.of(context).pushNamed('AboutMePage'),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage')),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":32,"name":"CloseButton点击事件","priority":1,"subtitle":" 点击时会退出当前栈","code":"import 'package:flutter/material.dart';\nclass CustomCloseButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return CloseButton();\n }\n}\n"},{"id":null,"widgetId":58,"name":"TabBar基本使用","priority":1,"subtitle":" \n【controller】 : 控制器 【TabController】\n【indicatorColor】 : 指示器颜色 【指示器颜色】\n【indicatorWeight】 : 指示器高 【double】\n【indicatorPadding】 : 指示器边距 【EdgeInsetsGeometry】\n【labelStyle】 : 页签文字样式 【TextStyle】\n【unselectedLabelStyle】 : 未选中文字样式 【TextStyle】\n【isScrollable】 : 是否可滑动 【bool】\n【onTap】 : 页签点击回调 【Function(int)】\n【tabs】 : 标签组件 【List】","code":"import 'package:flutter/material.dart';\nclass CustomTabBar extends StatefulWidget {\n @override\n _CustomTabBarState createState() => _CustomTabBarState();\n}\n\nclass _CustomTabBarState extends State\n with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return TabBar(\n onTap: (tab) {\n print(tab);\n },\n labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n unselectedLabelStyle: TextStyle(fontSize: 16),\n isScrollable: true,\n controller: _tabController,\n labelColor: Colors.blue,\n indicatorWeight: 3,\n indicatorPadding: EdgeInsets.symmetric(horizontal: 10),\n unselectedLabelColor: Colors.grey,\n indicatorColor: Colors.orangeAccent,\n tabs: tabs.map((e) => Tab(text: e)).toList(),\n );\n }\n}"},{"id":null,"widgetId":58,"name":"通过修改源码可实现无水波纹","priority":1,"subtitle":" \n详见:components/flutter/no_shadow_tab_bar.dart","code":"import 'package:flutter/material.dart';\nimport 'no_shadow_tab_bar.dart';\nclass NoShadowTabBarDemo extends StatefulWidget {\n @override\n _NSTabBarState createState() => _NSTabBarState();\n}\n\nclass _NSTabBarState extends State\n with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return NoShadowTabBar(\n onTap: (tab) {\n print(tab);\n },\n labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n unselectedLabelStyle: TextStyle(fontSize: 16),\n isScrollable: true,\n controller: _tabController,\n labelColor: Colors.blue,\n indicatorWeight: 3,\n indicatorPadding: EdgeInsets.symmetric(horizontal: 10),\n unselectedLabelColor: Colors.grey,\n indicatorColor: Colors.orangeAccent,\n tabs: tabs.map((e) => Tab(text: e)).toList(),\n );\n }\n}"},{"id":null,"widgetId":37,"name":"GridPage基础属性","priority":1,"subtitle":"【child】: 子组件 【Widget】\n【color】: 颜色 【Color】\n【interval】: 小块边长 【double】","code":"import 'package:flutter/material.dart';\nclass CustomGridPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200,\n height: 100,\n child: GridPaper(\n color: Colors.red,\n interval: 50,\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n fit: BoxFit.cover,\n )));\n }\n}"},{"id":null,"widgetId":37,"name":"GridPage再分割","priority":2,"subtitle":"【child】: 子组件 【Widget】\n【color】: 颜色 【Color】\n【subdivisions】: 小块中子块个数 【int】\n【divisions】: 小块中子块的分割数 【int】","code":"import 'package:flutter/material.dart';\nclass DivisionsGridPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200,\n height: 100,\n child: GridPaper(\n color: Colors.red,\n interval: 50,\n divisions: 4,\n subdivisions: 4,\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n fit: BoxFit.cover,\n )));\n }\n}\n"},{"id":null,"widgetId":129,"name":"CupertinoAlertDialog基本使用","priority":1,"subtitle":" \n【title】 : 顶部组件 【Widget】\n【content】 : 内容组件 【Widget】\n【actions】 : 顶部文字样式 【List】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoAlertDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildRaisedButton(context),\n _buildCupertinoAlertDialog(context),\n ],\n );\n }\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(\n context: context,\n builder: (ctx) => _buildCupertinoAlertDialog(context));\n },\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n Widget _buildCupertinoAlertDialog(BuildContext context) {\n return Material(\n color: Colors.transparent,\n child: CupertinoAlertDialog(\n title: _buildTitle(context),\n content: _buildContent(),\n actions: [\n CupertinoButton(\n child: Text(\"Yes, Delete\"),\n onPressed: () => Navigator.pop(context),\n ),\n CupertinoButton(\n child: Text(\"Cancle\"),\n onPressed: () => Navigator.pop(context),\n ),\n ]),\n );\n }\n\n Widget _buildTitle(context) {\n return Row(\n //标题\n children: [\n Icon(\n CupertinoIcons.delete_solid,\n color: Colors.red,\n ),\n Expanded(\n child: Text(\n 'Delete File',\n style: TextStyle(color: Colors.red, fontSize: 20),\n )),\n InkWell(\n child: Icon(CupertinoIcons.clear_thick),\n onTap: () => Navigator.pop(context),\n )\n ]);\n }\n\n Widget _buildContent() {\n return Padding(\n padding: const EdgeInsets.only(top: 18.0),\n child: Column(\n children: [\n Text(\n ' Hi toly! If you push the conform buttom ,'\n ' You will lose this file. Are you sure wand to do that?',\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":218,"name":"返回按钮基本使用","priority":1,"subtitle":"【onPressed】 : 点击事件 【VoidCallback】\n【color】: 颜色 【Color】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CupertinoNavigationBarBackButtonDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: CupertinoNavigationBarBackButton(\n color: Colors.deepPurpleAccent,\n onPressed: ()=>Navigator.of(context).pop(),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":107,"name":"Spacer基本使用","priority":1,"subtitle":" \n一个Spacer会占据可延伸区域","code":"import 'package:flutter/material.dart';\nclass OneSpacer extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return\n Container(\n color: Colors.grey.withAlpha(33),\n child: Row(children: [\n Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: Colors.red,\n ),\n Spacer(),\n Container(\n alignment: Alignment.center,\n width: 60,\n height: 50,\n color: Colors.blue,\n ),\n ],),\n );\n }\n}"},{"id":null,"widgetId":148,"name":"Tab基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【text】 : 文字 【String】\n【icon】 : 下方组件 【Widgit】\n text和child不能同时存在","code":"import 'package:flutter/material.dart';\nclass CustomTab extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n Tab(\n icon:Icon( Icons.add,color: Colors.blue,),\n child: Text('添加'),\n ),\n Tab(\n icon:Icon( Icons.close,color: Colors.red,),\n text: '删除',\n ),\n Tab(\n icon:Icon( Icons.refresh,color: Colors.green),\n text: '更新',\n ),\n ],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":107,"name":"多个Spacer空间分配","priority":2,"subtitle":" \n【flex】 : 剩余空间分配占比 【int】","code":"import 'package:flutter/material.dart';\nclass ManySpacer extends StatefulWidget {\n @override\n _ManySpacerState createState() => _ManySpacerState();\n}\n\nclass _ManySpacerState extends State {\n int _flexA=1;\n int _flexB=1;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildSliders(),\n Container(\n color: Colors.grey.withAlpha(33),\n child: Row(children: [\n Spacer(flex: _flexA),\n Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: Colors.red,\n ),\n Spacer(flex: _flexB),\n Container(\n alignment: Alignment.center,\n width: 60,\n height: 50,\n color: Colors.blue,\n ),\n ],),\n )\n ],\n );\n }\n\n Widget _buildSliders() {\n return Column(\n children: [\n Slider(\n divisions: 20,\n min: 1,\n max: 10,\n label: \"左边flex: $_flexA\",\n value: _flexA.toDouble(),\n onChanged: (v) => setState(() => _flexA = v.round())\n ),\n Slider(\n divisions: 20,\n label: \"右边flex: $_flexB\",\n min: 1,\n max: 10,\n value: _flexB.toDouble(),\n onChanged: (v) => setState(() => _flexB = v.round())\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":35,"name":"VerticalDivider颜色和粗细","priority":1,"subtitle":"【color】: 颜色 【Color】\n【thickness】: 线粗细 【double】","code":"import 'package:flutter/material.dart';\nclass CustomVerticalDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [1.0, 2.0, 4.0, 6.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Container(\n height: 150,\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: dataColor\n .map((e) => VerticalDivider(\n color: e,\n thickness: data[e],\n ))\n .toList(),\n ),\n );\n }\n}"},{"id":null,"widgetId":35,"name":"VerticalDivider宽度和空缺","priority":2,"subtitle":"【indent】: 前面空缺长度 【double】\n【endIndent】: 后面空缺长度 【double】\n【height】: 占位高 【double】","code":"import 'package:flutter/material.dart';\nclass HeightVerticalDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [10.0, 20.0, 30.0, 40.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Container(\n height: 150,\n child: Row(\n mainAxisSize: MainAxisSize.min,\n children: dataColor\n .map((e) => VerticalDivider(\n color: e,\n indent:data[e],\n endIndent: data[e]*2,\n width: data[e],\n thickness: data[e]/10,\n ))\n .toList(),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":7,"name":"用于显示一个纯色图片","priority":1,"subtitle":"【入参】 : 图片资源 【ImageProvider】\n【size】 : 大小 【double】\n【color】: 角标颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomImageIcon extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n Colors.blue: 50.0,\n Colors.red: 60.0,\n Colors.green: 70.0,\n Colors.yellow: 80.0,\n };\n return Wrap(\n spacing: 10,\n children: data.keys\n .map((e) => ImageIcon(\n AssetImage(\"assets/images/leaf.png\"),\n color: e,\n size: data[e],\n ))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":22,"name":"右上角和底部","priority":2,"subtitle":"【otherAccountsPictures】: 右上组件 【List】\n【onDetailsPressed】: 右下角点击事件 【Function()】\n【arrowColor】: 右下角按钮颜色 【Color】\n【margin】: 外边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass ProUAGHP extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width / 3 * 2,\n child: UserAccountsDrawerHeader(\n margin: EdgeInsets.all(10),\n accountName: Container(\n padding: const EdgeInsets.all(8.0),\n child: Text(\n \"张风捷特烈\",\n style:\n TextStyle(color: Colors.orangeAccent, fontSize: 22,\n shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2),\n ]),\n ),\n ),\n accountEmail: Padding(\n padding: const EdgeInsets.all(8.0),\n child: Text(\"1981462002@qq.com\",\n style: TextStyle(\n color: Colors.white, fontSize: 14,\n shadows: [\n Shadow(\n color: Colors.orangeAccent,\n offset: Offset(.5, .5),\n blurRadius: 2),\n ])),\n ),\n currentAccountPicture: Container(\n padding: const EdgeInsets.all(15.0),\n child: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/icon_head.png\"),\n ),\n ),\n otherAccountsPictures: [\n FlutterLogo(colors: Colors.green),\n ],\n onDetailsPressed: () {\n\n },\n arrowColor: Colors.white,\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage(\"assets/images/caver.jpeg\")),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":22,"name":"该组件的基本表现如下","priority":1,"subtitle":"【currentAccountPicture】: 上组件 【Widget】\n【accountName】: 中组件 【Widget】\n【accountEmail】: 下组件 【Widget】\n【decoration】: 装饰 【Decoration】","code":"import 'package:flutter/material.dart';\nclass CustomUAGHP extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width / 3 * 2,\n child: UserAccountsDrawerHeader(\n accountName: Container(\n padding: const EdgeInsets.all(8.0),\n child: Text(\n \"张风捷特烈\",\n style:\n TextStyle(color: Colors.orangeAccent, fontSize: 22, shadows: [\n Shadow(\n color: Colors.black, offset: Offset(.5, .5), blurRadius: 2),\n ]),\n ),\n ),\n accountEmail: Padding(\n padding: const EdgeInsets.all(8.0),\n child: Text(\"1981462002@qq.com\",\n style: TextStyle(color: Colors.white, fontSize: 14, shadows: [\n Shadow(\n color: Colors.orangeAccent,\n offset: Offset(.5, .5),\n blurRadius: 2),\n ])),\n ),\n currentAccountPicture: Container(\n padding: const EdgeInsets.all(15.0),\n child: CircleAvatar(\n backgroundImage: AssetImage(\"assets/images/icon_head.png\"),\n ),\n ),\n decoration: BoxDecoration(\n image: DecorationImage(image: AssetImage(\"assets/images/caver.jpeg\")),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":126,"name":"Dialog基本使用","priority":1,"subtitle":" \n【child】 : 动画图标数据 【Widget】\n【elevation】 : 影深 【double】\n【backgroundColor】 : 背景色 【Color】\n【shape】 : 形状 【ShapeBorder】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildRaisedButton(context),\n _buildDialog(),\n ],\n );\n }\n\n Widget _buildDialog() => Dialog(\n backgroundColor: Colors.white,\n elevation: 5,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n child: Container(\n width: 50,\n child: DeleteDialog(),\n ),\n );\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildDialog());\n },\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n\n );\n}\n\nclass DeleteDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n\n child: Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n _buildBar(context),\n _buildTitle(),\n _buildContent(),\n _buildFooter(context),\n ],\n ),\n );\n }\n\n Widget _buildTitle() {\n return Text(\n 'Delete Doucument',\n style: TextStyle(color: Color(0xff5CC5E9), fontSize: 24),\n );\n }\n\n Widget _buildContent() {\n return Padding(\n padding: const EdgeInsets.all(15.0),\n child: Text(\n ' Hi toly! If you push the conform buttom ,'\n ' You will lose this file. Are you sure wand to do that?',\n style: TextStyle(color: Color(0xffCFCFCF), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n );\n }\n\n Widget _buildFooter(context) {\n return Padding(\n padding: const EdgeInsets.only(bottom: 15.0, top: 10,left: 10,right: 10),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [\n Container(\n alignment: Alignment.center,\n height: 40,\n width: 100,\n decoration: BoxDecoration(\n borderRadius: BorderRadius.all(Radius.circular(30)),\n color: Color(0xff73D1EE)),\n child: Text('Yes',\n style: TextStyle(color: Colors.white, fontSize: 16)),\n ),\n InkWell(\n onTap: ()=>Navigator.of(context).pop(),\n child: Container(\n alignment: Alignment.center,\n height: 40,\n width: 100,\n decoration: BoxDecoration(\n borderRadius: BorderRadius.all(Radius.circular(30)),\n color: Colors.orangeAccent),\n child: Text('Cancle',\n style: TextStyle(color: Colors.white, fontSize: 16)),\n ),\n )\n ],\n ),\n );\n }\n\n _buildBar(context) => Container(\n height: 30,\n alignment: Alignment.centerRight,\n margin: EdgeInsets.only(right: 10, top: 5),\n child: InkWell(\n onTap: ()=>Navigator.of(context).pop(),\n child: Icon(\n Icons.close,\n color: Color(0xff82CAE3),\n ),\n ),\n );\n}\n"},{"id":null,"widgetId":131,"name":"CupertinoActionSheet基本使用","priority":1,"subtitle":" \n【title】 : 第一行组件 【Widget】\n【message】 : 第二行组件 【Widget】\n【cancelButton】 : 取消按钮处组件 【Widget】\n【actions】 : 中间组件列表 【List】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoActionSheet extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n _buildRaisedButton(context),\n _buildCupertinoActionSheet(context),\n ],\n );\n }\n\n Widget _buildCupertinoActionSheet(BuildContext context) =>\n Container(\n alignment: Alignment.bottomCenter,\n child: CupertinoActionSheet(\n title: Text(\"Please chose a language\"),\n message: Text('the language you use in this application.'),\n cancelButton: CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text(\"Cancel\")),\n actions: [\n CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text('Dart')),\n CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text('Java')),\n CupertinoActionSheetAction(\n onPressed: () => Navigator.pop(context), child: Text('Kotlin')),\n ],\n ),\n );\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () => showDialog(\n context: context,\n builder: (ctx) => _buildCupertinoActionSheet(context)),\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n );\n}\n"},{"id":null,"widgetId":155,"name":"DrawerHeader基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【decoration】 : 装饰 【Decoration】\n【margin】 : 外边距 【EdgeInsetsGeometry】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomDrawerHeader extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 400,\n child: Scaffold(\n appBar: AppBar(\n title: Text('Flutter Unit'),\n ),\n drawer: Drawer(\n elevation: 3,\n child: _buildChild(),\n ),\n ),\n );\n }\n\n Widget _buildChild() => ListView(\n padding: EdgeInsets.zero,\n children: [\n _buildHeader(),\n ListTile(\n leading: Icon(\n Icons.star,\n color: Colors.blue,\n ),\n title: Text('我的收藏'),\n ),\n ListTile(\n leading: Icon(\n Icons.palette,\n color: Colors.orangeAccent,\n ),\n title: Text('我的绘画'),\n ),\n ListTile(\n leading: Icon(\n Icons.insert_drive_file,\n color: Colors.green,\n ),\n title: Text('我的文件'),\n ),\n ],\n );\n\n Widget _buildHeader() {\n return DrawerHeader(\n margin: EdgeInsets.all(10),\n padding: EdgeInsets.only(left: 20,top: 15),\n decoration: BoxDecoration(\n borderRadius: BorderRadius.only(\n topLeft:Radius.circular(40),\n topRight:Radius.circular(40)\n ),\n image: DecorationImage(\n image: AssetImage('assets/images/caver.jpeg'),\n fit: BoxFit.cover),\n ),\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 24, color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(1, 1), blurRadius: 3)\n ]),\n ),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"Container还具有变换性","priority":5,"subtitle":"【transform】 : 变换矩阵 【Matrix4】\n基于Matrix4的矩阵变换,变换详情见线性代数","code":"import 'package:flutter/material.dart';\nimport 'dart:math';\nclass ContainerTransform extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n //容器\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 150,\n height: 150 * 0.618,\n transform: Matrix4.skew(-pi / 10, 0),\n child: Text(\n \"Container\",\n style: TextStyle(fontSize: 20),\n ),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"Container的约束性","priority":6,"subtitle":" \n【constraints】 : 约束 【BoxConstraints】\n会约束该区域的尺寸,不会小于指定的最小宽高,也不会大于指定的最大宽高。","code":"import 'package:flutter/material.dart';\nclass ContainerConstraints extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n //容器\n color: Colors.blue,\n width: 200,\n height: 200 * 0.618,\n constraints: BoxConstraints(\n minWidth: 100, maxWidth: 150,\n minHeight: 20, maxHeight: 100),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可对子组件进行对齐定位","priority":3,"subtitle":"【alignment】 : 对齐定位 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass ContainerAlignment extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n alignment: Alignment.bottomRight,\n width: 200,\n height: 200 * 0.618,\n color: Colors.grey.withAlpha(88),\n child: Icon(\n Icons.android,\n color: Colors.green,\n ),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可用于显示一个指定宽高的区域","priority":1,"subtitle":"【width】 : 宽 【int】\n【高】: 外边距 【int】\n【color】: 子组件 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomContainer extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n alignment: Alignment.topLeft,\n width: 200,\n height: 200 * 0.618,\n color: Colors.red.withAlpha(88),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可以在区域中放入一个子组件","priority":2,"subtitle":"【padding】 : 内边距 【EdgeInsetsGeometry】\n【margin】: 外边距 【EdgeInsetsGeometry】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass ContainerWithChild extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n alignment: Alignment.topLeft,\n padding: EdgeInsets.all(20),\n margin: EdgeInsets.all(10),\n width: 200,\n height: 200 * 0.618,\n color: Colors.grey.withAlpha(88),\n child: Icon(Icons.android),\n );\n }\n}"},{"id":null,"widgetId":1,"name":"可对子组件进行装饰","priority":4,"subtitle":" \n【decoration】 : 装饰 【Decoration】\n可装饰: 边线、圆弧、颜色、渐变色、阴影、图片等内容","code":"import 'package:flutter/material.dart';\nclass ContainerDecoration extends StatelessWidget {\n\n static const rainbow = [\n 0xffff0000,\n 0xffFF7F00,\n 0xffFFFF00,\n 0xff00FF00,\n 0xff00FFFF,\n 0xff0000FF,\n 0xff8B00FF\n ];\n\n @override\n Widget build(BuildContext context) {\n var stops = [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0];\n return Container(//容器\n alignment: Alignment.center,\n width: 200,\n height: 200 * 0.618,\n margin: EdgeInsets.all(20),\n padding: EdgeInsets.all(20),\n decoration: BoxDecoration(//添加渐变色\n gradient: LinearGradient(\n stops: stops,\n colors: rainbow.map((e) => Color(e)).toList()),\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(50),\n bottomRight: Radius.circular(50)),\n boxShadow: [\n BoxShadow(\n color: Colors.grey,\n offset: Offset(1, 1),\n blurRadius: 10,\n spreadRadius: 1),\n ]),\n child: Text(\n \"Container\",\n style: TextStyle(fontSize: 20),\n ),\n );\n }\n}"},{"id":null,"widgetId":162,"name":"ListView.separated构造","priority":3,"subtitle":" \n【separatorBuilder】 : 条目构造器 【IndexedWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass SeparatedListView extends StatelessWidget {\n final data = [\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView.separated(\n separatorBuilder: (context, index) => Divider(\n thickness: 1,\n height: 1,\n color: Colors.orange,\n ),\n itemCount: data.length,\n itemBuilder: (context, index) => _buildItem(data[index]),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n Widget _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n );\n}\n"},{"id":null,"widgetId":162,"name":"ListView基本使用","priority":1,"subtitle":" \n【children】 : 子组件列表 【List】\n【padding】 : 点击事件 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomListView extends StatelessWidget {\n final data = [\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView(\n padding: EdgeInsets.symmetric(horizontal: 5),\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":162,"name":"ListView.builder构造","priority":3,"subtitle":" \n【itemCount】 : 条目个数 【int】\n【itemBuilder】 : 条目构造器 【IndexedWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass BuilderListView extends StatelessWidget {\n final data = [\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView.builder(\n itemCount: data.length,\n itemBuilder: (context, index) => _buildItem(data[index]),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n Widget _buildItem(Color color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)\n ]),\n ),\n );\n}"},{"id":null,"widgetId":162,"name":"ListView横向滑动","priority":2,"subtitle":" \n【scrollDirection】 : 滑动方向 【Axis】\n【reverse】 : 是否反向滑动 【bool】\n【shrinkWrap】 : 无边界时是否包裹 【bool】","code":"import 'package:flutter/material.dart';\nclass HorizontalListView extends StatelessWidget {\n final data = [\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: ListView(\n reverse: true,\n shrinkWrap: true,\n scrollDirection: Axis.horizontal,\n children: data\n .map((color) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: color,\n child: Text(\n colorString(color),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n ),\n );\n }\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}"},{"id":null,"widgetId":12,"name":"ChoiceChip的普通表现如下","priority":1,"subtitle":"【selectedColor】: 选中时颜色 【Color】\n【selectedShadowColor】: 选中时阴影颜色 【Color】\n【onSelected】: 选中事件 【Fuction(bool)】\n 其他属性同Chip组件,无右侧组件。","code":"import 'package:flutter/material.dart';\nclass CustomChoiceChip extends StatefulWidget {\n @override\n _CustomChoiceChipState createState() => _CustomChoiceChipState();\n}\n\nclass _CustomChoiceChipState extends State {\n bool _select = false;\n\n @override\n Widget build(BuildContext context) {\n return ChoiceChip(\n selected: _select,\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(5),\n label: Text(\n _select ?\n \"You are selected it.\" :\n \"This is a ChoiceChip.\",\n style: TextStyle(fontSize: 16),\n ),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n selectedColor: Colors.orangeAccent.withAlpha(44),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n onSelected: (value) => setState(() => _select = value),\n );\n }\n}"},{"id":null,"widgetId":141,"name":"SnackBarAction基本使用","priority":1,"subtitle":" \n【label】 : 标签 【String】\n【textColor】 : 文字颜色 【Color】\n【disabledTextColor】 : 文字失效色 【Color】\n【onPressed】 : 点击回调 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomSnackBarAction extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n child: SnackBarAction(\n disabledTextColor: Colors.red,\n textColor: Colors.blue,\n label: '确定',\n onPressed: () => print('onPressed')));\n }\n}\n"},{"id":null,"widgetId":168,"name":"文字样式-ThemeData#TextTheme","priority":1,"subtitle":" \n子组件可以通过ThemeData.of获取主题的数据进行使用。","code":"import 'package:flutter/material.dart';\nclass TextThemeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var queryData = Theme.of(context).textTheme;\n var styles = {\n \"headline: \": queryData.headline,\n \"title: \": queryData.title,\n \"subhead: \": queryData.subhead,\n \"subtitle: \": queryData.body1,\n \"body2: \": queryData.body2,\n \"button: \": queryData.button,\n \"overline: \": queryData.overline,\n \"subtitle: \": queryData.subtitle,\n \"button: \": queryData.caption,\n \"display1: \": queryData.display1,\n \"display2: \": queryData.display2,\n \"display3: \": queryData.display3,\n \"display4: \": queryData.display4,\n };\n\n return Container(\n child: Column(\n children: styles.keys.map((e) => buildItem(e, styles[e])).toList(),\n ),\n );\n }\n\n Widget buildItem(String e, TextStyle style) => Column(\n children: [\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: [\n Text(\n e,\n style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n ),\n Text(\n \"@toly\",\n style: style,\n )\n ],\n ),\n ),\n Divider(\n height: 1,\n )\n ],\n );\n}"},{"id":null,"widgetId":168,"name":"Theme的用法","priority":2,"subtitle":" \n使用Theme,可以指定非常多的属性作为主题,这些属性将应用于所有的后代组件,如指定字体、滑块、卡片、文字、分割线、按钮等属性。","code":"import 'package:flutter/material.dart';\nclass CustomTheme extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Theme(\n data: ThemeData(\n cardTheme: CardTheme(color: Colors.red, elevation: 4),\n dividerTheme: DividerThemeData(\n color: Colors.blue,\n thickness: 2\n ),\n sliderTheme: SliderThemeData(\n thumbColor: Colors.red,\n activeTrackColor: Colors.green,\n inactiveTrackColor: Colors.grey,\n )),\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n Card(\n child: Container(\n width: 50,\n height: 50,\n color: Colors.transparent,\n ),\n ),\n Container(\n width: 150,\n child: Slider(value: 0.8, onChanged: (v) => {})),\n Container( width: 150,child: Divider())\n ]));\n }\n}"},{"id":null,"widgetId":15,"name":"FilterChip可接受选择事件","priority":1,"subtitle":"【selected】: 是否选择 【bool】\n【onSelected】: 选择事件 【Function(bool)】\n【selectedColor】: 选择后的颜色 【Color】\n【selectedShadowColor】: 选择后的阴影颜色 【Color】,","code":"import 'package:flutter/material.dart';\nclass CustomFilterChip extends StatefulWidget {\n @override\n _CustomFilterChipState createState() => _CustomFilterChipState();\n}\n\nclass _CustomFilterChipState extends State {\n final Map map = {\n 'A': 'Ant',\n 'B': 'Bug',\n 'C': 'Cat',\n 'D': 'Dog',\n };\n List _selected = [];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Wrap(\n children: map.keys.map((key) =>\n _buildChild(key)).toList(),\n ),\n Container(\n padding: EdgeInsets.all(10),\n child: Text('您已选择: ${_selected.join(', ')}')),\n ],\n );\n }\n\n Padding _buildChild(String key) {\n return Padding(\n padding: const EdgeInsets.all(4.0),\n child: FilterChip(\n selectedColor: Colors.orange.withAlpha(55),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n pressElevation: 5,\n elevation: 3,\n avatar: CircleAvatar(child: Text(key)),\n label: Text(map[key]),\n selected: _selected.contains(map[key]),\n onSelected: (bool value) {\n setState(() {\n if (value) {\n _selected.add(map[key]);\n } else {\n _selected.removeWhere((name) => name == map[key]);\n }\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":352,"name":"CupertinoDialogAction基本使用","priority":1,"subtitle":"【isDefaultAction】 : 是否是默认性操作 【bool】\n【isDestructiveAction】 : 是否是毁灭性操作 【bool】\n【textStyle】: 文字样式 【TextStyle】\n【onPressed】: 点击事件 【VoidCallback】\n【child】: 子组件 【Widget】","code":"import 'dart:async';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'dart:ui' as ui;\nclass CupertinoDialogActionDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n CupertinoDialogAction(\n isDestructiveAction: false,\n onPressed: ()=>_toast(context),\n child: Text('CupertinoDialogAction'),\n ),\n CupertinoDialogAction(\n isDestructiveAction: true,\n onPressed: ()=>_toast(context),\n child: Text('CupertinoDialogAction'),\n ),\n ],\n );\n }\n\n _toast(BuildContext context){\n Scaffold.of(context).showSnackBar(SnackBar(\n backgroundColor: Theme.of(context).primaryColor,\n content: Text('CupertinoDialogAction'),));\n }\n}\n"},{"id":null,"widgetId":34,"name":"Divider颜色和粗细","priority":1,"subtitle":"【color】: 颜色 【Color】\n【thickness】: 线粗细 【double】","code":"import 'package:flutter/material.dart';\nclass CustomDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [1.0, 2.0, 4.0, 6.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Column(\n children: dataColor\n .map((e) => Divider(\n color: e,\n thickness: data[e],\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":34,"name":"Divider高度和空缺","priority":2,"subtitle":"【indent】: 前面空缺长度 【double】\n【endIndent】: 后面空缺长度 【double】\n【height】: 占位高 【double】","code":"import 'package:flutter/material.dart';\nclass HeightDivider extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var dataColor = [\n Colors.red, Colors.yellow,\n Colors.blue, Colors.green];\n var dataThickness = [10.0, 20.0, 30.0, 40.0];\n var data = Map.fromIterables(dataColor, dataThickness);\n return Column(\n children: dataColor\n .map((e) => Divider(\n color: e,\n indent:data[e],\n endIndent: data[e]*2,\n height: data[e],\n thickness: data[e]/10,\n ))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":205,"name":"TabPageSelector基本使用","priority":1,"subtitle":"【controller】 : 控制器 【TabController】\n【indicatorSize】: 指示器大小 【double】\n【selectedColor】: 选中色 【Color】\n【color】: 颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass TabPageSelectorDemo extends StatefulWidget {\n @override\n _TabPageSelectorDemoState createState() => _TabPageSelectorDemoState();\n}\n\nclass _TabPageSelectorDemoState extends State\n with SingleTickerProviderStateMixin {\n final tabs = ['风画庭', '雨韵舍', '雷鸣殿', '电疾堂', '霜寒阁', '雪月楼'];\n TabController _tabController;\n\n @override\n void initState() {\n super.initState();\n _tabController = TabController(vsync: this, length: tabs.length);\n }\n\n @override\n void dispose() {\n _tabController.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Stack(\n alignment: Alignment.center,\n children: [\n Container(color: Colors.purple, child: _buildTableBarView()),\n Positioned(\n bottom: 10,\n child: buildTabPageSelector(),\n ),\n ],\n ),\n );\n }\n\n Widget buildTabPageSelector() => TabPageSelector(\n controller: _tabController,\n color: Colors.white,\n indicatorSize: 10,\n selectedColor: Colors.orangeAccent,\n );\n\n Widget _buildTableBarView() => TabBarView(\n controller: _tabController,\n children: tabs\n .map((e) => Center(\n child: Text(\n e,\n style: TextStyle(color: Colors.white, fontSize: 20),\n )))\n .toList());\n}\n"},{"id":null,"widgetId":142,"name":"BottomSheet基本使用","priority":1,"subtitle":" \n【builder】 : 组件构造器 【WidgetBuilder】\n【backgroundColor】 : 背景色 【Color】\n【elevation】 : 影深 【double】\n【shape】 : 形状 【ShapeBorder】\n【onClosing】 : 关闭回调 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomBottomSheet extends StatefulWidget {\n @override\n _CustomBottomSheetState createState() => _CustomBottomSheetState();\n}\n\nclass _CustomBottomSheetState extends State {\n bool opened = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: FlatButton(\n color: Colors.blue,\n onPressed: () {\n opened = !opened;\n opened\n ? Scaffold.of(context)\n .showBottomSheet((_) => _buildBottomSheet())\n : Navigator.of(context).pop();\n },\n child: Text(\n '点我显隐BottomSheet',\n style: TextStyle(color: Colors.white),\n )));\n }\n\n Widget _buildBottomSheet() => BottomSheet(\n enableDrag: true,\n elevation: 4,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.only(\n topRight: Radius.circular(60),\n topLeft: Radius.circular(60),\n )\n ),\n backgroundColor: Colors.transparent,\n onClosing: () => print('onClosing'),\n builder: (_) => (Container(\n height: 250,\n decoration: BoxDecoration(\n image: DecorationImage(\n image: AssetImage('assets/images/sabar_bar.jpg'),\n fit: BoxFit.cover),\n borderRadius: BorderRadius.only(\n topRight: Radius.circular(60),\n topLeft: Radius.circular(60),\n )),\n )));\n}\n"},{"id":null,"widgetId":17,"name":"CheckBoxListTile的选中效果","priority":2,"subtitle":"【selected】: 是否选中 【bool】","code":"import 'package:flutter/material.dart';\nclass SelectCheckBoxListTile extends StatefulWidget {\n @override\n _SelectCheckBoxListTileState createState() => _SelectCheckBoxListTileState();\n}\n\nclass _SelectCheckBoxListTileState extends State {\n var _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: CheckboxListTile(\n value: _selected,\n selected: _selected,\n checkColor: Colors.yellow,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":17,"name":"CheckBoxListTile的密排属性","priority":3,"subtitle":"【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass DenseCheckBoxListTile extends StatefulWidget {\n @override\n _DenseCheckBoxListTileState createState() => _DenseCheckBoxListTileState();\n}\n\nclass _DenseCheckBoxListTileState extends State {\n var _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: CheckboxListTile(\n value: _selected,\n dense: true,\n checkColor: Colors.yellow,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":17,"name":"CheckBoxListTile的基本表现如下","priority":1,"subtitle":"【secondary】: 左侧组件 【Widget】\n【checkColor】: ✔️颜色 【Color】\n【activeColor】: 选中时外框颜色 【Color】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【onChanged】: 选中事件 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass CustomCheckBoxListTile extends StatefulWidget {\n @override\n _CustomCheckBoxListTileState createState() => _CustomCheckBoxListTileState();\n}\n\nclass _CustomCheckBoxListTileState extends State {\n var _selected = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: CheckboxListTile(\n value: _selected,\n checkColor: Colors.yellow,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _selected = !_selected),\n ),\n );\n }\n}"},{"id":null,"widgetId":203,"name":"OrientationBuilder基本使用","priority":1,"subtitle":"【builder】 : 方向组件构造器 【OrientationWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass OrientationBuilderDemo extends StatefulWidget {\n @override\n _OrientationBuilderDemoState createState() => _OrientationBuilderDemoState();\n}\n\nclass _OrientationBuilderDemoState extends State {\n double _width = 200;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Container(\n width: _width,\n height: 200,\n child: OrientationBuilder(builder: _builder),\n color: Colors.orange,\n ),\n _buildSlider()\n ],\n );\n }\n\n //根据回调的orientation返回组件\n Widget _builder(BuildContext context, Orientation orientation) {\n switch(orientation){\n case Orientation.portrait:\n return Icon(Icons.phone_android,size: 60,);\n break;\n case Orientation.landscape:\n return RotatedBox(\n quarterTurns: 1,\n child: Icon(Icons.phone_android,size: 60,));\n break;\n default: return Container();\n }\n }\n\n Widget _buildSlider() =>Slider(\n value: _width,\n max: 350.0,\n min: 80.0,\n divisions: 17,\n onChanged: (v)=> setState(() => _width= v),\n );\n}\n"},{"id":null,"widgetId":132,"name":"CupertinoActionSheetAction基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【isDefaultAction】 : 是否默认选中 【bool】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport '../../../dialogs/dialog_about.dart';\nclass CustomCupertinoActionSheetAction extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Container(\n margin: EdgeInsets.all(5),\n color: Colors.grey.withAlpha(33),\n child: CupertinoActionSheetAction(\n isDefaultAction: true,\n onPressed: () => DialogAbout.show(context),\n child: Text('张风捷特烈')),\n ),\n Container(\n color: Colors.grey.withAlpha(33),\n margin: EdgeInsets.all(5),\n child: CupertinoActionSheetAction(\n isDefaultAction: false,\n onPressed: () => DialogAbout.show(context),\n child: Text('百里·巫缨')),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":125,"name":"AnimatedIcon基本使用","priority":1,"subtitle":" \n【icon】 : 动画图标数据 【AnimatedIcons】\n【size】 : 大小 【double】\n【color】 : 颜色 【Color】\n【progress】 : 动画 【Animation】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomAnimatedIcon extends StatefulWidget {\n @override\n _CustomAnimatedIconState createState() => _CustomAnimatedIconState();\n}\n\nclass _CustomAnimatedIconState extends State\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 1));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Wrap(\n runSpacing: 30,\n children: _buildChildren(),\n ),\n );\n }\n\n final data = {\n Colors.orange: AnimatedIcons.menu_arrow,\n Colors.blue: AnimatedIcons.ellipsis_search,\n Colors.red: AnimatedIcons.close_menu,\n Colors.green: AnimatedIcons.arrow_menu,\n Colors.cyanAccent: AnimatedIcons.play_pause,\n Colors.purple: AnimatedIcons.pause_play,\n };\n\n List _buildChildren() => data.keys\n .map((e) => AnimatedIcon(\n size: 50,\n color: e,\n icon: data[e],\n progress: _ctrl,\n ))\n .toList();\n}\n"},{"id":null,"widgetId":130,"name":"AboutDialog基本使用","priority":1,"subtitle":" \n【applicationIcon】 : 左上图标 【Widget】\n【applicationVersion】 : 版本号 【String】\n【applicationName】 : 应用名 【String】\n【applicationLegalese】 : 应用律术 【String】\n【children】 : 子组件列表 【List】","code":"import 'package:flutter/material.dart';\nclass CustomAboutDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Stack(\n children: [\n _buildAboutDialog(),\n Positioned(top: 50, right: 20, child: _buildRaisedButton(context)),\n ],\n );\n }\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildAboutDialog());\n },\n child: Text(\n 'Just Show It',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n AboutDialog _buildAboutDialog() {\n return AboutDialog(\n applicationIcon: FlutterLogo(),\n applicationVersion: 'v0.0.1',\n applicationName: 'Flutter Unit',\n applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',\n children: [\n Container(\n margin: EdgeInsets.only(top: 20),\n width: 80,\n height: 80,\n child: Image.asset('assets/images/icon_head.png')),\n Container(\n margin: EdgeInsets.only(top: 10),\n alignment: Alignment.center,\n child: Text(\n 'The King Of Coder.',\n style: TextStyle(color: Colors.white, fontSize: 20, shadows: [\n Shadow(\n color: Colors.blue, offset: Offset(.5, .5), blurRadius: 3)\n ]),\n ))\n ],\n );\n }\n}\n"},{"id":null,"widgetId":8,"name":"FadeInImage.assetNetwork加载网络图片","priority":1,"subtitle":"【placeholder】 : 展位图地址 【String】\n【image】 : 显示图地址 【String】\n【width】: 宽 【double】\n【height】: 高 【double】\n【fadeInDuration】: 淡入时长 【Duration】\n【fadeOutDuration】: 淡出时长 【Duration】\n【fadeInCurve】: 淡入曲线 【Cubic】\n【fadeOutCurve】: 淡出曲线 【Cubic】\n【fit】: 适应模式 【BoxFit】\n【alignment】: 对齐模式 【Alignment】\n【repeat】: 重复模式 【ImageRepeat】,","code":"import 'package:flutter/material.dart';\nclass CustomFadeInImage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var placeholder = \"assets/images/icon_head.png\";\n var img =\n \"https://user-gold-cdn.xitu.io/2017/8/24/\"\n \"d324efef8cbee6468a018aad7ab2ba6b?imageView2/\"\n \"1/w/180/h/180/q/85/format/webp/interlace/1\";\n return FadeInImage.assetNetwork(\n placeholder: placeholder,\n image: img,\n width: 100,\n height: 100,\n fit: BoxFit.cover,\n repeat:ImageRepeat.noRepeat,\n alignment: Alignment.center,\n fadeInDuration: Duration(seconds: 5),\n fadeInCurve: Curves.easeInCubic,\n );\n }\n}\n"},{"id":null,"widgetId":36,"name":"Placeholder的fallback属性","priority":2,"subtitle":" 当所在区域无宽高约束时,占位组件的宽高。\"\n【fallbackHeight】: 高 【double】\n【fallbackWidth】: 宽 【double】","code":"import 'package:flutter/material.dart';\nclass FallbackPlaceholder extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return UnconstrainedBox(\n child: Placeholder(\n color: Colors.blue,\n strokeWidth: 2,\n fallbackHeight: 100,\n fallbackWidth: 150,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":36,"name":"Placeholder基础属性","priority":1,"subtitle":"【color】: 颜色 【Color】\n【strokeWidth】: 线粗 【double】","code":"import 'package:flutter/material.dart';\nclass CustomPlaceholder extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 100,\n height: 100*0.618,\n child: Placeholder(\n color: Colors.orangeAccent,\n strokeWidth: 2,\n ),\n );\n }\n}"},{"id":null,"widgetId":30,"name":"IconButton属性","priority":1,"subtitle":"【child】: 子组件 【Widget】\n【icon】: 内边距 【Widget】\n【tooltip】: 长按提示文字 【String】\n【highlightColor】: 长按高亮色 【Color】\n【splashColor】: 水波纹色 【Color】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomIconButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Padding(\n padding: const EdgeInsets.all(8.0),\n child: IconButton(\n padding: EdgeInsets.only(),\n onPressed: () {},\n icon: Icon(Icons.android, size: 40, color: Colors.green),\n tooltip: \"android\",\n highlightColor: Colors.orangeAccent,\n splashColor: Colors.blue,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":14,"name":"可以接受选中事件","priority":2,"subtitle":"【selected】: 是否选中 【bool】\n【onSelected】: 选中事件 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass SelectInputChip extends StatefulWidget {\n @override\n _SelectInputChipState createState() => _SelectInputChipState();\n}\n\nclass _SelectInputChipState extends State {\n bool _select = false;\n\n @override\n Widget build(BuildContext context) {\n return InputChip(\n selected: _select,\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n label: Text(\"This is a InputChip.\"),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n selectedColor: Colors.orangeAccent.withAlpha(88),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n onDeleted: () => Navigator.of(context).pushNamed('AboutMePage'),\n onSelected: (bool value) {\n setState(() {\n _select = value;\n });\n print(\"onSelected\");\n },\n );\n }\n}"},{"id":null,"widgetId":14,"name":"可以接受点击、删除事件","priority":1,"subtitle":"【onPressed】: 点击事件 【Function()】\n【onDeleted】: 删除事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass PressInputChip extends StatefulWidget {\n @override\n _PressInputChipState createState() => _PressInputChipState();\n}\n\nclass _PressInputChipState extends State {\n bool _delete = false;\n\n @override\n Widget build(BuildContext context) {\n return InputChip(\n padding: EdgeInsets.all(5),\n labelPadding: EdgeInsets.all(3),\n label: Text(\n !_delete ?\n \"This is a InputChip.\" :\n \"You are clicked delete icon.\"),\n backgroundColor: Colors.grey.withAlpha(66),\n avatar: Image.asset(\"assets/images/icon_head.png\"),\n selectedColor: Colors.orangeAccent.withAlpha(88),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n elevation: 3,\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n onDeleted: () => setState(() => _delete = !_delete));\n }\n}"},{"id":null,"widgetId":2,"name":"文字对齐方式","priority":4,"subtitle":"【textAlign】: 对齐方式 【TextAlign】\n下面依次是:left、right、center、justify、start、end,","code":"import 'package:flutter/material.dart';\nclass TextAlignText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: TextAlign.values\n .map((e) => Container(\n width: 120,\n color: Colors.cyanAccent.withAlpha(33),\n height: 120 * 0.618,\n child: Text(\n \" 张风捷特烈 toly \" * 3,\n textAlign: e,\n ),\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"文字的基本样式","priority":1,"subtitle":"【入参】 : 文字 【String】\n【style】: 文字样式 【TextStyle】\n【color】: 文字样式 【Color】\n【fontSize】: 文字大小 【double】\n【fontWeight】: 字重 【FontWeight】\n【fontStyle】: 字体样式 【fontStyle】\n【letterSpacing】: 字距 【double】","code":"import 'package:flutter/material.dart';\nclass CustomText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var style = TextStyle(\n color: Colors.blue,\n fontSize: 20,\n fontWeight: FontWeight.bold,\n fontStyle: FontStyle.italic,\n letterSpacing: 10,\n );\n return Container(\n width: 200,\n color: Colors.cyanAccent.withAlpha(33),\n height: 200 * 0.618 * 0.618,\n child: Text(\"toly-张风捷特烈-1994`\", style: style),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"文字方向与最大行数","priority":5,"subtitle":"【maxLines】 : 最大行数 【int】\n【【textDirection】 : 文字方向 【TextDirection】\n下面依次是:rtl、ltr,","code":"import 'package:flutter/material.dart';\nclass TextDirectionText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 40,\n runSpacing: 10,\n children: TextDirection.values\n .map((e) => Container(\n width: 120,\n color: Colors.cyanAccent.withAlpha(33),\n height: 120 * 0.618,\n child: Text(\n \" 张风捷特烈 toly \" * 10,\n textDirection: e,\n maxLines: 3,\n overflow: TextOverflow.ellipsis,\n ),\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"文字装饰线","priority":3,"subtitle":"【fontFamily】 : 文字字体 【String】\n【decoration】: 装饰线 【TextDecoration】\n【decorationColor】: 装饰线颜色 【Color】\n【decorationThickness】: 装饰线粗 【double】\n【decorationStyle】: 装饰线样式 【TextDecorationStyle】","code":"import 'package:flutter/material.dart';\nclass DecorationText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Text(\n \"19940328\",\n style: TextStyle(\n fontSize: 50,\n fontWeight: FontWeight.bold,\n decoration: TextDecoration.underline,\n decorationThickness: 3,\n decorationStyle: TextDecorationStyle.wavy,\n decorationColor: Colors.blue,\n fontStyle: FontStyle.italic,\n fontFamily: \"DancingScript\",\n letterSpacing: 10),\n );\n }\n}"},{"id":null,"widgetId":2,"name":"是否包裹与越界效果","priority":6,"subtitle":"【softWrap】 : 是否换行 【bool】\n【overflow】 : 越界效果 【TextOverflow】\n下面softWrap=false; overflow依次是:clip、fade、ellipsis、visible,","code":"import 'package:flutter/material.dart';\nclass SoftWrapText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: TextOverflow.values\n .map((e) => Container(\n width: 150,\n color: Colors.cyanAccent.withAlpha(33),\n height: 150 * 0.618 * 0.618,\n child: Text(\" 张风捷特烈 toly \" * 5,\n overflow: e,\n softWrap: false),\n ))\n .toList(),\n );\n }\n}\n"},{"id":null,"widgetId":2,"name":"文字阴影","priority":2,"subtitle":"【shadows】 : 文字 【List】\n【backgroundColor】: 背景颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass ShadowText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Text(\n \"张风捷特烈\",\n style: TextStyle(\n fontSize: 50,\n color: Colors.white,\n backgroundColor: Colors.black,\n shadows: [\n Shadow(\n color: Colors.cyanAccent,\n offset: Offset(1, 1),\n blurRadius: 10),\n Shadow(\n color: Colors.blue,\n offset: Offset(-0.1, 0.1),\n blurRadius: 10),\n ]),\n );\n }\n}"},{"id":null,"widgetId":6,"name":"用于显示一个图标","priority":1,"subtitle":"【入参】 :图标数据 【IconData】\n【size】 : 大小 【double】\n【color】: 颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass CustomIcon extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n Icon(\n Icons.send,\n color: Colors.orange,\n size: 60,\n ),\n Icon(\n Icons.android,\n color: Colors.green,\n size: 100,\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":6,"name":"使用自定义图标","priority":2,"subtitle":"可在iconfont网站中下载图标字体进行使用","code":"import 'package:flutter/material.dart';\nimport '../../../../app/style/TolyIcon.dart';\nclass MyIcon extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n TolyIcon.icon_search,\n TolyIcon.icon_star,\n TolyIcon.icon_layout,\n TolyIcon.icon_star_ok\n ]\n .map((e) => Icon(\n e,\n color: Colors.green,\n size: 60,\n ))\n .toList(),\n );\n }\n}\n\n"},{"id":null,"widgetId":169,"name":"文字样式-TextTheme","priority":1,"subtitle":"后代组件可以通过CupertinoTheme.of获取主题的数据进行使用。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass TextCupertinoTheme extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var queryData = CupertinoTheme.of(context).textTheme;\n var styles = {\n \"tabLabelTextStyle: \": queryData.tabLabelTextStyle,\n \"actionTextStyle: \": queryData.actionTextStyle,\n \"navActionTextStyle: \": queryData.navActionTextStyle,\n \"textStyle: \": queryData.textStyle,\n \"navTitleTextStyle: \": queryData.navTitleTextStyle,\n \"pickerTextStyle: \": queryData.pickerTextStyle,\n \"dateTimePickerTextStyle: \": queryData.dateTimePickerTextStyle,\n \"navLargeTitleTextStyle: \": queryData.navLargeTitleTextStyle,\n };\n\n return Container(\n child: Column(\n children: styles.keys.map((e) => buildItem(e, styles[e])).toList(),\n ),\n );\n }\n\n Widget buildItem(String e, TextStyle style) => Column(\n children: [\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceBetween,\n children: [\n Text(\n e,\n style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n ),\n Text(\n \"@toly\",\n style: style,\n )\n ],\n ),\n ),\n Divider(\n height: 1,\n )\n ],\n );\n}"},{"id":null,"widgetId":169,"name":"CupertinoThemeData的使用","priority":2,"subtitle":" \n和Theme一样可以通过指定的属性,让它们在后代中共享,不过属性较少。注意如果需要使用主题,不能在当前的context中获取。","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass CustomCupertinoTheme extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return CupertinoTheme(\n data: CupertinoThemeData(\n primaryColor: Colors.blue,\n primaryContrastingColor: Colors.green\n ),\n child: _ChildUseTheme());\n }\n}\n\nclass _ChildUseTheme extends StatelessWidget {\n const _ChildUseTheme({\n Key key,\n }) : super(key: key);\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n Container(\n width: 50,\n height: 50,\n color: CupertinoTheme.of(context).primaryContrastingColor,\n ),\n Container(\n width: 150,\n child: Slider(value: 0.8, onChanged: (v) => {})),\n Container( width: 150,child: Divider(color:CupertinoTheme.of(context).primaryContrastingColor,thickness: 1,))\n ]);\n }\n}"},{"id":null,"widgetId":25,"name":"FlatButton点击事件","priority":1,"subtitle":"【color】: 颜色 【Color】\n【splashColor】: 水波纹颜色 【Color】\n【child】: 子组件 【Widget】\n【textColor】: 子组件文字颜色 【Color】\n【highlightColor】: 长按高亮色 【Color】\n【padding】: 内边距 【EdgeInsetsGeometry】\n【onPressed】: 点击事件 【Function】","code":"import 'package:flutter/material.dart';\nclass CustomFlatButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return FlatButton(\n onPressed: ()=>{},\n padding: EdgeInsets.all(8),\n splashColor: Colors.green,\n child: Text(\"FlatButton\"),\n textColor: Color(0xffFfffff),\n color: Colors.blue,\n highlightColor: Color(0xffF88B0A),\n );\n }\n}\n"},{"id":null,"widgetId":133,"name":"SimpleDialogOption基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【onPressed】 : 点击事件 【Function()】","code":"import 'package:flutter/material.dart';\nclass CustomSimpleDialogOption extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Container(\n alignment: Alignment.center,\n width: double.infinity,\n height: 50,\n margin: EdgeInsets.all(5),\n color: Colors.grey.withAlpha(33),\n child: SimpleDialogOption(\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n child: Text('张风捷特烈')),\n ),\n Container(\n height: 50,\n alignment: Alignment.center,\n width: double.infinity,\n color: Colors.grey.withAlpha(33),\n margin: EdgeInsets.all(5),\n child: SimpleDialogOption(\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'),\n child: Text('百里·巫缨')),\n ),\n ],\n );\n }\n}\n"},{"id":null,"widgetId":31,"name":"BackButton属性","priority":1,"subtitle":"【color】: 颜色 【Color】\n【onPressed】: 点击事件 【Function】\n onPressed为空会退出当前栈","code":"import 'package:flutter/material.dart';\nclass CustomBackButton extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = [Colors.red,Colors.yellow,Colors.blue,Colors.green];\n return Wrap(\n spacing: 10,\n children: data.map((e)=>BackButton(\n color: e,\n )).toList()\n );\n }\n}\n"},{"id":null,"widgetId":202,"name":"Builder的使用","priority":1,"subtitle":"【builder】 : 组件构造器 【WidgetBuilder】\n同一个类中使用`XXX.of(context)`获取某类状态对象方法会存在`上下文滞后`的错误,使用Builder解决。","code":"import 'package:flutter/material.dart';\nclass BuilderDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n child: Scaffold(\n appBar: AppBar(\n title: Text('Builder'),\n ),\n floatingActionButton: Builder(\n builder: (ctx) => FloatingActionButton(\n onPressed: () {\n Scaffold.of(ctx)\n .showSnackBar(SnackBar(content: Text('hello builder')));\n },\n child: Icon(Icons.add),\n ),\n ),\n ),\n );\n }\n\n\n}\n"},{"id":null,"widgetId":18,"name":"SwitchListTile的密排属性","priority":3,"subtitle":"【dense】: 是否密排 【bool】","code":"import 'package:flutter/material.dart';\nclass DenseSwitchListTile extends StatefulWidget {\n @override\n _DenseSwitchListTileState createState() => _DenseSwitchListTileState();\n}\n\nclass _DenseSwitchListTileState extends State {\n var _value=false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: SwitchListTile(\n value: _value,\n dense: true,\n selected: _value,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _value = !_value),\n ),\n );\n }\n}"},{"id":null,"widgetId":18,"name":"SwitchListTile的选中效果","priority":2,"subtitle":"【selected】: 是否选中 【bool】\n【inactiveThumbImage】: 未选中时圆圈图片 【ImageProvider】\n【activeThumbImage】: 选中时圆圈图片 【ImageProvider】","code":"import 'package:flutter/material.dart';\nclass SelectSwitchListTile extends StatefulWidget {\n @override\n _SelectSwitchListTileState createState() => _SelectSwitchListTileState();\n}\n\nclass _SelectSwitchListTileState extends State {\n var _value=false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: SwitchListTile(\n value: _value,\n selected: _value,\n activeColor: Colors.orangeAccent,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n inactiveThumbImage: AssetImage(\"assets/images/pica.gif\"),\n activeThumbImage: AssetImage(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _value = !_value),\n ),\n );\n }\n}"},{"id":null,"widgetId":18,"name":"SwitchListTile的基本表现如下","priority":1,"subtitle":"【secondary】: 左侧组件 【Widget】\n【title】: 中间上组件 【Widget】\n【subtitle】: 中间下组件 【Widget】\n【inactiveThumbColor】: 未选中时圆圈颜色 【Color】\n【inactiveTrackColor】: 未选中滑槽颜色 【Color】\n【activeColor】: 选中时圆圈颜色 【Color】\n【activeTrackColor】: 选中滑槽颜色 【Color】\n【onChanged】: 选中事件 【Function(bool)】","code":"import 'package:flutter/material.dart';\nclass CustomSwitchListTile extends StatefulWidget {\n @override\n _CustomSwitchListTileState createState() => _CustomSwitchListTileState();\n}\n\nclass _CustomSwitchListTileState extends State {\n var _value=false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(10),\n color: Colors.grey.withAlpha(22),\n child: SwitchListTile(\n value: _value,\n inactiveThumbColor:Colors.cyanAccent ,\n inactiveTrackColor: Colors.blue.withAlpha(88),\n activeColor: Colors.orangeAccent,\n activeTrackColor: Colors.orange,\n secondary: Image.asset(\"assets/images/icon_head.png\"),\n title: Text(\"张风捷特烈\"),\n subtitle: Text(\"@万花过尽知无物\"),\n onChanged: (v) => setState(() => _value = !_value),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":102,"name":"DataTable的sort","priority":2,"subtitle":" \n【sortColumnIndex】 : 列号 【int】\n【columnSpacing】 : 列间距 【double】\n【sortAscending】 : 是否顺序 【bool】","code":"import 'package:flutter/material.dart';\nclass _BeanOp {\n final int id;\n final String name;\n final String type;\n bool select;\n\n _BeanOp(this.id, this.name, this.type, this.select);\n\n @override\n String toString() {\n return '_BeanOp{id: $id, name: $name, type: $type, select: $select}';\n }\n}\n\nclass SortDataTable extends StatefulWidget {\n @override\n _SortDataTableState createState() => _SortDataTableState();\n}\n\nclass _SortDataTableState extends State {\n var data = [\n _BeanOp(101, 'DataTable', 'StatelessWidget', false),\n _BeanOp(44, 'RangeSlider', 'StatefulWidget', false),\n _BeanOp(2, 'Text', 'StatelessWidget', false),\n _BeanOp(1, 'Image', 'StatefulWidget', false),\n ];\n\n bool _sortAscending = false;\n var selectData = <_BeanOp>[];\n\n @override\n Widget build(BuildContext context) {\n return DataTable(\n columnSpacing: 20,\n sortColumnIndex: 1,\n sortAscending: _sortAscending,\n columns: [\n DataColumn(\n label: Container(\n child: Checkbox(\n value: selectData.length == data.length,\n onChanged: _onSelectAll,\n ),\n ),\n ),\n DataColumn(label: Text('id'), numeric: false, onSort: _onSortId),\n DataColumn(label: Text('名称')),\n DataColumn(label: Text('类型')),\n ],\n rows: data\n .map((e) => DataRow(selected: false, cells: [\n DataCell(Checkbox(\n value: e.select,\n onChanged: (v) => _onSelectOne(v, e),\n )),\n DataCell(Text('${e.id}')),\n DataCell(Text('${e.name}'),\n showEditIcon: true, onTap: () {}),\n DataCell(Text('${e.type}')),\n ]))\n .toList());\n }\n\n _onSortId(int index, bool ascending) {\n setState(() {\n _sortAscending = ascending;\n data.sort(\n (a, b) => ascending ? a.id.compareTo(b.id) : b.id.compareTo(a.id));\n });\n }\n\n _onSelectOne(bool selected, _BeanOp e) {\n setState(() {\n if (selected) {\n //选中\n selectData.add(e);\n } else {\n selectData.remove(e);\n }\n e.select = selected;\n print(selectData);\n });\n }\n\n _onSelectAll(bool select) {\n setState(() {\n if (select) {\n data.forEach((e) => e.select = true);\n selectData = data.map((e) => e).toList();\n } else {\n data.forEach((e) => e.select = false);\n selectData = [];\n }\n });\n }\n}"},{"id":null,"widgetId":102,"name":"DataTable基本使用","priority":1,"subtitle":" \n【columns】 : 列 【List】\n【rows】 : 行 【List】","code":"import 'package:flutter/material.dart';\nclass _Bean {\n final int id;\n final String name;\n final String type;\n\n _Bean(this.id, this.name, this.type);\n}\n\nclass CustomDataTable extends StatelessWidget {\n final data = [\n _Bean(101, 'DataTable', 'StatelessWidget'),\n _Bean(44, 'RangeSlider', 'StatefulWidget'),\n _Bean(2, 'Text', 'StatelessWidget'),\n _Bean(1, 'Image', 'StatefulWidget'),\n ];\n\n final columns = ['id', '名称', '类型'];\n\n @override\n Widget build(BuildContext context) {\n return DataTable(\n columns: columns.map((e) => DataColumn(label: Text(e))).toList(),\n rows: data\n .map((e) => DataRow(cells: [\n DataCell(Text('${e.id}')),\n DataCell(Text('${e.name}')),\n DataCell(Text('${e.type}')),\n ]))\n .toList());\n }\n}"},{"id":null,"widgetId":4,"name":"样式用于显示文字","priority":2,"subtitle":"【style】 : 样式-3种枚举 【FlutterLogoStyle】\n【textColor】: 文字颜色 【Color】","code":"import 'package:flutter/material.dart';\nclass FlutterLogoWithText extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n FlutterLogoStyle.horizontal:Colors.blue,\n FlutterLogoStyle.markOnly:Colors.red,\n FlutterLogoStyle.stacked:Colors.green,\n };\n\n return Wrap(\n spacing: 20,\n children: data.keys.map((e) => FlutterLogo(\n size: 80,\n style: e,\n textColor: data[e],\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":4,"name":"用于显示一个FlutterLogo","priority":1,"subtitle":"【size】 : 大小 【double】\n【colors】: 颜色 【MaterialColor】","code":"import 'package:flutter/material.dart';\nclass CustomFlutterLogo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n\n var data = {\n Colors.blue:50.0,\n Colors.red:60.0,\n Colors.green:70.0,\n Colors.yellow:80.0,\n };\n return Wrap(\n children: data.keys\n .map((e) => FlutterLogo(\n size: data[e],\n colors: e,\n ))\n .toList(),\n );\n }\n}"},{"id":null,"widgetId":193,"name":"AboutListTile基本使用","priority":1,"subtitle":" \n【icon】 : 左图标 【Widget】\n【applicationIcon】 : 左上图标 【Widget】\n【applicationVersion】 : 版本号 【String】\n【applicationName】 : 应用名 【String】\n【applicationLegalese】 : 应用律术 【String】\n【aboutBoxChildren】 : 弹框内容组件 【List】","code":"import 'package:flutter/material.dart';\nclass AboutListTileDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return AboutListTile(\n icon: Icon(Icons.info),\n applicationIcon: FlutterLogo(),\n applicationName: 'Flutter Unit',\n applicationVersion: 'v0.0.1',\n applicationLegalese: 'Copyright© 2018-2020 张风捷特烈',\n aboutBoxChildren: [\n Padding(\n padding: const EdgeInsets.all(10.0),\n child: Text(\n ' FlutterUnit是【张风捷特烈】的开源项目,'\n '收录Flutter的200+组件,并附加详细介绍以及操作交互,'\n '希望帮助广大编程爱好者入门Flutter。'\n '更多知识可以关注掘金账号、公众号【编程之王】。',\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":5,"name":"用于显示一个角标","priority":1,"subtitle":"【message】 : 显示的文字信息 【String】\n【location】 : 位置*4 【BannerLocation】\n【color】: 角标颜色 【Color】\n【child】: 孩子 【Widget】\n【textStyle】: 文字样式 【TextStyle】","code":"import 'package:flutter/material.dart';\nclass CustomBanner extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var data = {\n BannerLocation.topStart: Colors.red,\n BannerLocation.topEnd: Colors.blue,\n BannerLocation.bottomStart: Colors.green,\n BannerLocation.bottomEnd: Colors.yellow,\n };\n\n return Wrap(\n spacing: 10,\n runSpacing: 10,\n children: data.keys.map((e) =>\n Container(\n color: Color(0xffD8F5FF),\n width: 150,\n height: 150 * 0.618,\n child: Banner(\n message: \"Flutter 1.12发布\",\n location: e,\n color: data[e],\n child: Padding(\n padding: EdgeInsets.all(20),\n child: FlutterLogo(colors: Colors.blue,\n style: FlutterLogoStyle.horizontal,)),\n ),\n )).toList());\n }\n}\n"},{"id":null,"widgetId":127,"name":"AlertDialog基本使用","priority":1,"subtitle":" \n【title】 : 顶部组件 【Widget】\n【content】 : 内容组件 【Widget】\n【titleTextStyle】 : 顶部文字样式 【TextStyle】\n【contentTextStyle】 : 内容文字样式 【TextStyle】\n【titlePadding】 : 顶部内边距 【EdgeInsetsGeometry】\n【contentPadding】 : 内容内边距 【EdgeInsetsGeometry】\n【actions】 : 右下角组件列表 【List】\n【backgroundColor】 : 右下角组件列表 【背景色】\n【elevation】 : 右下角组件列表 【背景色】\n【shape】 : 影深 【double】","code":"import 'package:flutter/material.dart';\nclass CustomAlertDialog extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildRaisedButton(context),\n _buildAlertDialog(),\n ],\n );\n }\n\n Widget _buildRaisedButton(BuildContext context) => RaisedButton(\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n color: Colors.blue,\n onPressed: () {\n showDialog(context: context, builder: (ctx) => _buildAlertDialog());\n },\n child: Text(\n 'Just Show It !',\n style: TextStyle(color: Colors.white),\n ),\n );\n\n Widget _buildAlertDialog() {\n return AlertDialog(\n title: _buildTitle(),\n titleTextStyle: TextStyle(fontSize: 20, color: Colors.black),\n titlePadding: EdgeInsets.only(\n top: 5,\n left: 20,\n ),\n contentPadding: EdgeInsets.symmetric(horizontal: 5),\n backgroundColor: Colors.white,\n content: _buildContent(),\n actions: [\n Icon(Icons.android, color: Colors.blue,),\n Icon(Icons.add, color: Colors.blue,),\n Icon(Icons.g_translate, color: Colors.blue,),\n Icon(Icons.games, color: Colors.blue,),\n ],\n elevation: 4,\n shape: RoundedRectangleBorder(\n borderRadius: BorderRadius.all(Radius.circular(10))),\n );\n }\n\n Widget _buildTitle() {\n return Row(\n //标题\n children: [\n Image.asset(\n \"assets/images/icon_head.png\",\n width: 30,\n height: 30,\n ),\n SizedBox(width: 10,),\n Expanded(\n child: Text(\n \"关于\",\n style: TextStyle(fontSize: 18),\n )),\n CloseButton()\n ],\n );\n }\n\n Widget _buildContent() {\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n Padding(\n padding: const EdgeInsets.all(10.0),\n child: Text(\n ' FlutterUnit是【张风捷特烈】的开源项目,'\n '收录Flutter的200+组件,并附加详细介绍以及操作交互,'\n '希望帮助广大编程爱好者入门Flutter。'\n '更多知识可以关注掘金账号、公众号【编程之王】。',\n style: TextStyle(color: Color(0xff999999), fontSize: 16),\n textAlign: TextAlign.justify,\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":71,"name":"Offstage基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【offstage】 : 是否消失 【bool】","code":"import 'package:flutter/material.dart';\nclass CustomOffstage extends StatefulWidget {\n @override\n _CustomOffstageState createState() => _CustomOffstageState();\n}\n\nclass _CustomOffstageState extends State {\n bool _off = false;\n\n @override\n Widget build(BuildContext context) {\n var radBox = Container(\n height: 50,\n width: 60,\n color: Colors.red,\n child: Switch(\n value: _off,\n onChanged: (v) => setState(() => _off = v)),\n );\n\n return Container(\n width: 250,\n height: 200,\n child: Row(\n children: [radBox, _buildOffStage(), radBox],\n ),\n );\n }\n\n Widget _buildOffStage() => Offstage(\n offstage: _off,\n child: Container(\n alignment: Alignment.center,\n height: 100,\n width: 100,\n color: Colors.blue,\n child: Text(\n \"Offstage\",\n style: TextStyle(fontSize: 20),\n ),\n ));\n}\n"},{"id":null,"widgetId":67,"name":"ClipRect基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper】","code":"import 'package:flutter/material.dart';\nclass CustomClipRect extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ClipRect(\n child: SizedBox(\n height: 100,\n width: 100,\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n fit: BoxFit.cover,),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":279,"name":"返回按钮基本使用","priority":1,"subtitle":"【clipper】 : 裁剪器 【CustomClipper】\n【clipBehavior】 : 裁剪行为 【Clip】\n【child】 : 子组件 【Widget】\n【elevation】 : 阴影深 【double】\n【shadowColor】 : 阴影颜色 【Color】\n【color】: 颜色 【Color】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass PhysicalShapeDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: 200,\n height: 200,\n child: PhysicalShape(\n shadowColor: Colors.orange,\n elevation: 3,\n child: Image.asset(\n 'assets/images/caver.jpeg',\n fit: BoxFit.cover,\n ),\n clipBehavior: Clip.hardEdge,\n clipper: ShapeBorderClipper(\n shape: CircleBorder(side: BorderSide.none),\n ),\n color: Colors.deepPurpleAccent),\n );\n }\n}\n"},{"id":null,"widgetId":72,"name":"RotatedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【quarterTurns】 : 旋转多少个90° 【int】","code":"import 'package:flutter/material.dart';\nclass CustomRotatedBox extends StatefulWidget {\n @override\n _CustomRotatedBoxState createState() => _CustomRotatedBoxState();\n}\n\nclass _CustomRotatedBoxState extends State {\n int _quarterTurns = 0;\n\n @override\n Widget build(BuildContext context) {\n return RotatedBox(\n quarterTurns: _quarterTurns,\n child: GestureDetector(\n onTap: () => setState(() => _quarterTurns++),\n child: Icon(\n Icons.android,\n size: 60,\n color: Colors.blue,\n )),\n );\n }\n}\n"},{"id":null,"widgetId":79,"name":"LimitedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【maxHeight】 : 最大高 【double】\n【maxWidth】 : 最大宽 【double】","code":"import 'package:flutter/material.dart';\nclass CustomLimitedBox extends StatefulWidget {\n @override\n _CustomLimitedBoxState createState() => _CustomLimitedBoxState();\n}\n\nclass _CustomLimitedBoxState extends State {\n var _text = '';\n\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 50,\n height: 50,\n child: Text(\"Static\"),\n );\n\n var box = LimitedBox(\n maxHeight: 60,\n maxWidth: 100,\n child: Container(color: Colors.orange, child: Text(_text)),\n );\n return Column(\n children: [\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: [child, UnconstrainedBox(child: box), child],\n ),\n ),\n _buildInput()\n ],\n );\n }\n\n Widget _buildInput() {\n return Padding(\n padding: const EdgeInsets.all(18.0),\n child: TextField(\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n hintText: '请输入',\n ),\n onChanged: (v) {\n setState(() {\n _text = v;\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":83,"name":"OverflowBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【minWidth】 : 最小宽 【double】\n【minHeight】 : 最小高 【double】\n【maxHeight】 : 最大高 【double】\n【maxWidth】 : 最大宽 【double】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomOverflowBox extends StatefulWidget {\n @override\n _CustomOverflowBoxState createState() => _CustomOverflowBoxState();\n}\n\nclass _CustomOverflowBoxState extends State {\n var _text = '';\n\n @override\n Widget build(BuildContext context) {\n var box = OverflowBox(\n alignment: Alignment.center,\n minHeight: 50,\n minWidth: 50,\n maxWidth: 200,\n maxHeight: 120,\n child: Container(\n color: Colors.orange,\n child: Text(_text),\n ),\n// child: Text(\"张风\"),\n );\n return Column(\n children: [\n Container(\n color: Colors.grey.withAlpha(33),\n width: 100,\n height: 100,\n child: box),\n _buildInput()\n ],\n );\n }\n\n Widget _buildInput() {\n return Padding(\n padding: const EdgeInsets.all(18.0),\n child: TextField(\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n hintText: '请输入',\n ),\n onChanged: (v) {\n setState(() {\n _text = v;\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":166,"name":"CustomPaint绘线贝塞尔曲线","priority":2,"subtitle":" \n Flutter也支持贝塞尔曲线等复杂绘制。","code":"import 'dart:ui';\nimport 'package:flutter/material.dart';\nclass PlayBezier3Page extends StatefulWidget {\n @override\n _PlayBezier3PageState createState() => _PlayBezier3PageState();\n}\n\nclass _PlayBezier3PageState extends State {\n List _pos = [];\n int selectPos;\n\n @override\n void initState() {\n _initPoints();\n super.initState();\n }\n\n void _initPoints() {\n _pos = List();\n _pos.add(Offset(0, 0));\n _pos.add(Offset(60, -60));\n _pos.add(Offset(-90, -90));\n _pos.add(Offset(-120, -40));\n }\n\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n width: MediaQuery.of(context).size.width,\n child: RepaintBoundary(\n child: CustomPaint(\n painter: BezierPainter(pos: _pos, selectPos: selectPos),\n ),\n ),\n\n );\n }\n}\n\nclass BezierPainter extends CustomPainter {\n Paint _gridPaint;\n Path _gridPath;\n\n Paint _mainPaint;\n Path _mainPath;\n int selectPos;\n Paint _helpPaint;\n\n List pos;\n\n BezierPainter({this.pos, this.selectPos}) {\n _gridPaint = Paint()..style = PaintingStyle.stroke;\n _gridPath = Path();\n\n _mainPaint = Paint()\n ..color = Colors.orange\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2;\n _mainPath = Path();\n\n _helpPaint = Paint()\n ..color = Colors.purple\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2\n ..strokeCap = StrokeCap.round;\n }\n\n @override\n void paint(Canvas canvas, Size size) {\n canvas.clipRect(Offset.zero & size);\n canvas.translate(size.width / 2, size.height / 2);\n _drawGrid(canvas, size); //绘制格线\n _drawAxis(canvas, size); //绘制轴线\n\n _mainPath.moveTo(pos[0].dx, pos[0].dy);\n _mainPath.cubicTo(pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);\n canvas.drawPath(_mainPath, _mainPaint);\n _drawHelp(canvas);\n _drawSelectPos(canvas);\n\n }\n\n @override\n bool shouldRepaint(CustomPainter oldDelegate) => false;\n\n void _drawGrid(Canvas canvas, Size size) {\n _gridPaint\n ..color = Colors.grey\n ..strokeWidth = 0.5;\n _gridPath = _buildGridPath(_gridPath, size);\n canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);\n\n canvas.save();\n canvas.scale(1, -1); //沿x轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, 1); //沿y轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, -1); //沿原点镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n }\n\n void _drawAxis(Canvas canvas, Size size) {\n canvas.drawPoints(\n PointMode.lines,\n [\n Offset(-size.width / 2, 0),\n Offset(size.width / 2, 0),\n Offset(0, -size.height / 2),\n Offset(0, size.height / 2),\n Offset(0, size.height / 2),\n Offset(0 - 7.0, size.height / 2 - 10),\n Offset(0, size.height / 2),\n Offset(0 + 7.0, size.height / 2 - 10),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, 7),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, -7),\n ],\n _gridPaint\n ..color = Colors.blue\n ..strokeWidth = 1.5);\n }\n\n Path _buildGridPath(Path path, Size size, {step = 20.0}) {\n for (int i = 0; i < size.height / 2 / step; i++) {\n path.moveTo(0, step * i);\n path.relativeLineTo(size.width / 2, 0);\n }\n for (int i = 0; i < size.width / 2 / step; i++) {\n path.moveTo(step * i, 0);\n path.relativeLineTo(\n 0,\n size.height / 2,\n );\n }\n return path;\n }\n\n void _drawHelp(Canvas canvas) {\n canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);\n canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);\n }\n\n void _drawSelectPos(Canvas canvas) {\n if (selectPos == null) return;\n canvas.drawCircle(\n pos[selectPos],\n 10,\n _helpPaint\n ..color = Colors.green\n ..strokeWidth = 2);\n }\n}"},{"id":null,"widgetId":166,"name":"CustomPaint绘线图形","priority":1,"subtitle":" \n【painter】 : 绘画器 【CustomPainter】","code":"import 'package:flutter/material.dart';\nclass ClockPage extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n width: MediaQuery.of(context).size.width,\n height: 100,\n child:RepaintBoundary(\n child: CustomPaint(//使用CustomPaint盛放画布\n painter: ClockPainter(),\n ),\n ),\n )\n ;\n }\n}\n\nclass ClockPainter extends CustomPainter {\n Paint _paint;\n var _radius = 3.0; //小球半径\n Path _path = Path(); //画笔对象\n ClockPainter () {\n _paint = Paint()..color= Color(0xff45d0fd)..isAntiAlias=true;\n _path.addOval(Rect.fromCircle(radius: _radius, center: Offset(0, 0))); //小球路径\n }\n\n @override\n void paint(Canvas canvas, Size size) {\n print(size);\n canvas.clipRect(Offset.zero & size);\n canvas.translate(size.width/2-65*2, 0);\n renderDigit(1, canvas);//渲染数字\n canvas.translate(65, 0);//平移画布\n renderDigit(9, canvas);\n canvas.translate(65, 0); renderDigit(9, canvas);\n canvas.translate(65, 0); renderDigit(4, canvas);\n }\n //渲染数字 num :要显示的数字 canvas :画布\n void renderDigit(int num, Canvas canvas) {\n if (num > 10) { return; }\n for (int i = 0; i < digit[num].length; i++) {\n for (int j = 0; j < digit[num][j].length; j++) {\n if (digit[num][i][j] == 1) {\n canvas.save();\n double rX = j * 2 * (_radius + 1) + (_radius + 1); //第(i,j)个点圆心横坐标\n double rY = i * 2 * (_radius + 1) + (_radius + 1); //第(i,j)个点圆心纵坐标\n canvas.translate(rX, rY);\n canvas.drawPath(_path, _paint);\n canvas.restore();\n }\n }\n }\n }\n @override\n bool shouldRepaint(CustomPainter oldDelegate)=> false;\n}\n\nconst digit = [\n [\n [0, 0, 1, 1, 1, 0, 0],\n [0, 1, 1, 0, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 0, 1, 1, 0],\n [0, 0, 1, 1, 1, 0, 0]\n ], //0\n\n [\n [0, 0, 0, 1, 1, 0, 0],\n [0, 1, 1, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [1, 1, 1, 1, 1, 1, 1]\n ], //1\n [\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 1, 1, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 1, 1, 1, 1, 1]\n ], //2\n [\n [1, 1, 1, 1, 1, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 1, 0, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //3\n\n [\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 1, 0],\n [0, 0, 1, 1, 1, 1, 0],\n [0, 1, 1, 0, 1, 1, 0],\n [1, 1, 0, 0, 1, 1, 0],\n [1, 1, 1, 1, 1, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 1, 1]\n ], //4\n [\n [1, 1, 1, 1, 1, 1, 1],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 1, 1, 1, 1, 0],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //5\n [\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 1, 1, 0, 0, 0, 0],\n [1, 1, 0, 0, 0, 0, 0],\n [1, 1, 0, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //6\n [\n [1, 1, 1, 1, 1, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 0, 1, 1, 0, 0, 0],\n [0, 0, 1, 1, 0, 0, 0]\n ], //7\n [\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 1, 1, 0]\n ], //8\n [\n [0, 1, 1, 1, 1, 1, 0],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [1, 1, 0, 0, 0, 1, 1],\n [0, 1, 1, 1, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 0, 1, 1],\n [0, 0, 0, 0, 1, 1, 0],\n [0, 0, 0, 1, 1, 0, 0],\n [0, 1, 1, 0, 0, 0, 0]\n ], //9\n [\n [0, 0, 0, 0],\n [0, 0, 0, 0],\n [0, 1, 1, 0],\n [0, 1, 1, 0],\n [0, 0, 0, 0],\n [0, 0, 0, 0],\n [0, 1, 1, 0],\n [0, 1, 1, 0],\n [0, 0, 0, 0],\n [0, 0, 0, 0]\n ] //:\n];\n"},{"id":null,"widgetId":292,"name":"IgnorePointer基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【ignoring】 : 是否忽视事件 【bool】\n如下,Switch选中时ignoring为true,按钮事件将被锁定,无法点击。","code":"import 'package:flutter/material.dart';\nclass CustomIgnorePointer extends StatefulWidget {\n @override\n _CustomIgnorePointerState createState() => _CustomIgnorePointerState();\n}\n\nclass _CustomIgnorePointerState extends State {\n bool _ignore = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n GestureDetector(\n onTap: (){\n print('IgnorePointer');\n },\n child: IgnorePointer(\n ignoring: _ignore,\n child: _buildButton(),\n ),\n ),\n _buildSwitch(),\n Text(!_ignore ? '允许点击' : '点击已锁定')\n ],\n ),\n );\n }\n\n Widget _buildButton() => RaisedButton(\n color: Theme.of(context).primaryColor,\n child: Text(\n 'To About',\n style: TextStyle(color: Colors.white),\n ),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n\n _buildSwitch() => Switch(\n value: _ignore,\n onChanged: (v) {\n setState(() {\n _ignore = v;\n });\n });\n}\n"},{"id":null,"widgetId":287,"name":"LayoutBuilder基本认识","priority":1,"subtitle":" \n【builder】 : 布局构造器 【LayoutWidgetBuilder】","code":"import 'package:flutter/material.dart';\nclass CustomLayoutBuilder extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n print('CustomLayoutBuild');\n return Container(\n alignment: Alignment.center,\n height: 80,\n width: 150,\n color: Colors.green,\n child: LayoutBuilder(\n builder: (_, zone) {\n return Text(\n '父容器宽:${zone.maxWidth}\\n'\n '父容器高:${zone.maxHeight}',\n style: TextStyle(color: Colors.white, fontSize: 16),\n );\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":287,"name":"LayoutBuilder的展开使用","priority":3,"subtitle":" \n使用TextPainter来检测文字的行数,实现展开或收起功能。","code":"import 'package:flutter/material.dart';\nclass SimpleExpandableText extends StatefulWidget {\n\n @override\n createState() => _SimpleExpandableTextState();\n}\n\nclass _SimpleExpandableTextState extends State {\n\n final text = '桃树、杏树、梨树,你不让我,我不让你,都开满了花赶趟儿。'\n '红的像火,粉的像霞,白的像雪。'\n '花里带着甜味儿;闭了眼,树上仿佛已经满是桃儿、杏儿、梨儿。'\n '花下成千成百的蜜蜂嗡嗡地闹着,大小的蝴蝶飞来飞去。'\n '野花遍地是:杂样儿,有名字的,没名字的,散在草丛里,像眼睛,像星星,还眨呀眨的。';\n\n bool expand = false;\n int maxLines =3;\n\n\n final style = TextStyle(fontSize: 15, color: Colors.grey, shadows: [\n Shadow(\n color: Colors.white, offset: Offset(1,1)\n )\n ]);\n\n @override\n build(context) => Container(\n decoration: BoxDecoration(\n color: Colors.cyanAccent.withAlpha(8),\n borderRadius: BorderRadiusDirectional.all(Radius.circular(20))),\n padding: EdgeInsets.all(15),\n child: LayoutBuilder(builder: (context, size) {\n\n final painter = TextPainter(\n text: TextSpan(text: text, style: style),\n maxLines: maxLines,\n textDirection: TextDirection.ltr,\n );\n painter.layout(maxWidth: size.maxWidth);\n if (!painter.didExceedMaxLines)\n return Text(text, style: style);\n\n return Column(\n mainAxisSize: MainAxisSize.min,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(text, maxLines: expand ? null : 3, style: style),\n GestureDetector(\n onTap: () => setState(() {\n expand = !expand;\n }),\n child: Text(\n expand ? '<< 收起' : '展开 >>',\n style: TextStyle(color: Colors.blue),\n ),\n ),\n ],\n );\n }),\n );\n}\n\n"},{"id":null,"widgetId":287,"name":"LayoutBuilder的适应布局","priority":2,"subtitle":" \n可以根据区域的大小进行组件展示设计。\"\n比如在不同的宽度区域显示不同的布局结构。\"\n毕竟很多地方不容易获取父组件区域,使用LayoutBuilder就会非常爽口。","code":"import 'package:flutter/material.dart';\nclass FitByLayoutBuilder extends StatefulWidget {\n @override\n _FitByLayoutBuilderState createState() => _FitByLayoutBuilderState();\n}\n\nclass _FitByLayoutBuilderState extends State {\n double _width = 100;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Container(\n width: _width,\n child: LayoutBuilder(\n builder: (_, zone) {\n if (zone.maxWidth <= 150) {\n return _buildType1();\n } else {\n return _buildType2(zone);\n }\n },\n ),\n ),\n _buildSlider(),\n ],\n );\n }\n\n Widget _buildSlider() {\n return Slider(\n min: 50,\n max: 300,\n label: \"父宽:${_width.toStringAsFixed(1)}\",\n value: _width,\n onChanged: (v) => setState(() {\n _width = v;\n }));\n }\n\n Widget _buildType1() => Container(\n color: Colors.blue,\n child: Column(\n children: [\n _buildTitle(),\n Padding(\n padding: const EdgeInsets.all(8.0),\n child: _buildContent(),\n ),\n ],\n ),\n );\n\n Widget _buildType2(BoxConstraints zone) => Container(\n height: 100,\n width: zone.maxWidth,\n color: Colors.orange,\n child: Row(\n children: [\n Container(\n margin: EdgeInsets.all(10),\n height: 80,\n width: 30,\n color: Colors.grey,\n ),\n Expanded(child: _buildContent())\n ],\n ),\n );\n\n Widget _buildTitle() => Container(\n margin: EdgeInsets.only(left: 10, right: 10, top: 10),\n color: Colors.grey,\n height: 30,\n );\n\n Widget _buildContent() => Wrap(\n runSpacing: 3,\n children: [\n Container(\n color: Colors.red,\n height: 30,\n ),\n Container(\n color: Colors.yellow,\n height: 30,\n ),\n Container(\n color: Colors.green,\n height: 30,\n ),\n ],\n );\n}\n"},{"id":null,"widgetId":86,"name":"Center基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】","code":"import 'package:flutter/material.dart';\nclass CustomCenter extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Container(\n margin: EdgeInsets.all(5),\n width: 200,\n height: 100,\n color: Colors.grey.withAlpha(88),\n child: Center(\n child: Container(\n width: 80,\n height: 60,\n color: Colors.cyanAccent,\n )));\n }\n}\n"},{"id":null,"widgetId":68,"name":"ClipRRect基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【borderRadius】 : 边线半径 【BorderRadius】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper】","code":"import 'package:flutter/material.dart';\nclass CustomClipRRect extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ClipRRect(\n borderRadius: BorderRadius.all(Radius.elliptical(35, 30)),\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 150,\n height: 100,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":76,"name":"SizedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【width】 : 宽 【double】\n【height】 : 高 【double】","code":"import 'package:flutter/material.dart';\nclass CustomSizedBox extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 50,\n height: 50,\n child: Text(\"Static\"),\n );\n\n var box = SizedBox(\n width: 80,\n height: 40,\n child: Container(\n color: Colors.orange,\n child: Icon(\n Icons.android,\n color: Colors.white,\n )),\n );\n\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n child: Row(\n children: [child, box, child],\n ),\n );\n }\n}\n"},{"id":null,"widgetId":77,"name":"AspectRatio基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【aspectRatio】 : 宽高比例 【double】","code":"import 'package:flutter/material.dart';\nclass CustomAspectRatio extends StatefulWidget {\n @override\n _CustomAspectRatioState createState() => _CustomAspectRatioState();\n}\n\nclass _CustomAspectRatioState extends State {\n var _ratio = 0.75;\n\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 50,\n height: 50,\n child: Text(\"Static\"),\n );\n\n var box = AspectRatio(\n aspectRatio: _ratio,\n child: Container(\n color: Colors.orange,\n child: Icon(\n Icons.android,\n color: Colors.white,\n )),\n );\n\n return Column(\n children: [\n _buildSlider(),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: [child, box, child],\n ),\n ),\n ],\n );\n }\n\n Widget _buildSlider() => Slider(\n divisions: 20,\n min: 0.1,\n max: 2.0,\n label: _ratio.toStringAsFixed(2),\n value: _ratio,\n onChanged: (v) => setState(() => _ratio = v));\n}\n"},{"id":null,"widgetId":69,"name":"ClipPath基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper】","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass CustomClipPath extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return ClipPath(\n clipper: ShapeBorderClipper(shape: _StarShapeBorder()),\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 150,\n height: 100,\n fit: BoxFit.cover,\n ),\n );\n }\n}\n\nclass _StarShapeBorder extends ShapeBorder {\n final Path _path = Path();\n\n @override\n EdgeInsetsGeometry get dimensions => null;\n\n @override\n Path getInnerPath(Rect rect, {TextDirection textDirection}) {\n return null;\n }\n\n @override\n Path getOuterPath(Rect rect, {TextDirection textDirection}) =>\n nStarPath(20, rect.height / 2, rect.height / 2 * 0.85,\n dx: rect.width / 2, dy: rect.height / 2);\n\n @override\n void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}\n\n Path nStarPath(int num, double R, double r, {dx = 0, dy = 0}) {\n double perRad = 2 * pi / num;\n double radA = perRad / 2 / 2;\n double radB = 2 * pi / (num - 1) / 2 - radA / 2 + radA;\n _path.moveTo(cos(radA) * R + dx, -sin(radA) * R + dy);\n for (int i = 0; i < num; i++) {\n _path.lineTo(\n cos(radA + perRad * i) * R + dx, -sin(radA + perRad * i) * R + dy);\n _path.lineTo(\n cos(radB + perRad * i) * r + dx, -sin(radB + perRad * i) * r + dy);\n }\n _path.close();\n return _path;\n }\n\n @override\n ShapeBorder scale(double t) {\n return null;\n }\n}\n"},{"id":null,"widgetId":75,"name":"Baseline基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【baseline】 : 基线位置 【double】\n【baselineType】 : 基线类型 【TextBaseline】","code":"import 'package:flutter/material.dart';\nclass CustomBaseline extends StatefulWidget {\n @override\n _CustomBaselineState createState() => _CustomBaselineState();\n}\n\nclass _CustomBaselineState extends State {\n double _baseline=20;\n\n @override\n Widget build(BuildContext context) {\n\n var childBox = Text(\n '你好,Flutter',\n style: TextStyle(fontSize: 20,fontFamily: \"Menlo\"),\n );\n\n\n var baseline = Baseline(\n child: childBox,\n baseline: _baseline,\n baselineType: TextBaseline.alphabetic\n );\n\n return Column(\n children: [\n _buildSlider(),\n Container(\n width: 100/0.618,\n height: 100,\n color: Colors.grey.withAlpha(22),\n child: baseline,\n ),\n ],\n );\n }\n\n Widget _buildSlider() => Slider(\n divisions: 20,\n min: 0,\n max: 60,\n label: _baseline.toString(),\n value: _baseline,\n onChanged: (v) => setState(() => _baseline = v));\n}\n"},{"id":null,"widgetId":277,"name":"线性渐变着色","priority":2,"subtitle":" \n通过LinearGradient#createShader创建线性渐变着色器\n着色器相关知识详见【绘制专辑】","code":"import 'package:flutter/material.dart';\nclass LinearShaderMask extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n ShaderMask(\n shaderCallback: _buildShader,\n child: Image.asset(\n 'assets/images/icon_head.png',\n height: 70,\n width: 70,\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 40, color: Colors.white),\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Container(\n height: 100,\n color: Colors.white,\n width: 50,\n ),\n ),\n ],\n );\n }\n\n final colors = [Colors.red, Colors.yellow, Colors.blue];\n\n Shader _buildShader(Rect bounds) => LinearGradient(\n begin: Alignment.centerLeft,\n end: Alignment.centerRight,\n tileMode: TileMode.mirror,\n colors: colors)\n .createShader(bounds);\n}\n"},{"id":null,"widgetId":277,"name":"径向渐变着色","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【shaderCallback】 : 着色器回调 【ShaderCallback】\n【blendMode】 : 混色模式 【BlendMode】\n 通过RadialGradient#createShader创建径向渐变着色器。","code":"import 'package:flutter/material.dart';\nclass RadialShaderMask extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n ShaderMask(\n shaderCallback: _buildShader,\n child: Image.asset(\n 'assets/images/icon_head.png',\n height: 70,\n width: 70,\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Text(\n '张风捷特烈',\n style: TextStyle(fontSize: 40, color: Colors.white),\n ),\n ),\n ShaderMask(\n shaderCallback: _buildShader,\n child: Container(\n height: 100,\n color: Colors.white,\n width: 50,\n ),\n ),\n ],\n );\n }\n\n final colors = [Colors.red, Colors.yellow, Colors.blue];\n\n Shader _buildShader(Rect bounds) => RadialGradient(\n center: Alignment.topLeft,\n radius: 1.0,\n tileMode: TileMode.mirror,\n colors: colors)\n .createShader(bounds);\n}"},{"id":null,"widgetId":88,"name":"ColorFiltered基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【colorFilter】 : 滤色器 【ColorFilter】","code":"import 'package:flutter/material.dart';\nimport '../../../../app/utils/color_utils.dart';\nclass CustomColorFiltered extends StatefulWidget {\n @override\n _CustomColorFilteredState createState() => _CustomColorFilteredState();\n}\n\nclass _CustomColorFilteredState extends State {\n Color _color = Colors.blue.withAlpha(88);\n\n @override\n Widget build(BuildContext context) {\n _color = ColorUtils.randomColor();\n return Column(\n children: [\n Wrap(spacing: 10, runSpacing: 10, children: [\n _buildRandomColor(),\n ...BlendMode.values\n .map((mode) => Column(\n children: [\n _buildChild(mode),\n SizedBox(\n height: 10,\n ),\n Text(\n mode.toString().split('.')[1],\n style: TextStyle(fontSize: 10),\n )\n ],\n ))\n .toList()\n ]),\n ],\n );\n ;\n }\n\n Widget _buildChild(m) => Container(\n width: 58,\n height: 58,\n child: ColorFiltered(\n child: Image(image: AssetImage(\"assets/images/icon_head.png\")),\n colorFilter: ColorFilter.mode(_color, m)),\n );\n\n Widget _buildRandomColor() => GestureDetector(\n onTap: () => setState(() {}),\n child: Container(\n alignment: Alignment.center,\n width: 60,\n height: 60,\n decoration: BoxDecoration(color: _color, shape: BoxShape.circle),\n child: Text('点我'),\n ),\n );\n}\n"},{"id":null,"widgetId":298,"name":"IntrinsicHeight基本使用","priority":1,"subtitle":"【child】 : 子组件 【Widget】\n如示例:左侧高可变动,中间高固定,右侧高取前两者的最高值。","code":"import 'package:flutter/material.dart';\nclass IntrinsicHeightDemo extends StatefulWidget {\n @override\n _IntrinsicHeightDemoState createState() => _IntrinsicHeightDemoState();\n}\n\nclass _IntrinsicHeightDemoState extends State {\n var _height =120.0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: [\n buildChild(_height),\n SizedBox(height: 10),\n _buildSlider()\n ],\n ),\n );\n }\n\n Widget buildChild(double leftHeight) {\n return IntrinsicHeight(\n child: Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Container(\n height: leftHeight,\n width: 120,\n color: Colors.yellow,\n alignment: Alignment.center,\n child: Text(\"height:${leftHeight.toStringAsFixed(1)}\"),\n ),\n Container(\n color: Colors.blue,\n width: 150,\n height: 80,\n alignment: Alignment.center,\n child: Text(\"固定高\"),\n ),\n Container(\n color: Colors.red,\n width: 60,\n alignment: Alignment.center,\n child: Text(\"最高\"),\n )\n ],\n ),\n );\n }\n\n Widget _buildSlider() =>Slider(\n value: _height,\n max: 200.0,\n min: 30.0,\n divisions: 17,\n onChanged: (v)=> setState(() => _height= v),\n );\n}\n"},{"id":null,"widgetId":70,"name":"DecoratedBox底线装饰","priority":5,"subtitle":"通过UnderlineTabIndicator对象可指定底线,","code":"import 'package:flutter/material.dart';\nclass UnderlineTabIndicatorDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: UnderlineTabIndicator(\n insets: EdgeInsets.symmetric(horizontal: 5, vertical: -5),\n borderSide: BorderSide(color: Colors.orange, width: 2)),\n child: Icon(\n Icons.ac_unit,\n color: Colors.blue,\n size: 40,\n ),\n );\n }\n}"},{"id":null,"widgetId":70,"name":"DecoratedBox基本使用","priority":1,"subtitle":" \n【decoration】 : 装饰对象 【Decoration】\n【position】 : 前景色(左)/后景色(右) 【DecorationPosition】","code":"import 'package:flutter/material.dart';\nclass BoxDecorationDemo extends StatelessWidget {\n final rainbow = const [\n 0xffff0000,\n 0xffFF7F00,\n 0xffFFFF00,\n 0xff00FF00,\n 0xff00FFFF,\n 0xff0000FF,\n 0xff8B00FF\n ];\n\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n position: DecorationPosition.background,\n decoration: BoxDecoration(\n gradient: LinearGradient(\n stops: [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0],\n colors: rainbow.map((e) => Color(e)).toList()),\n borderRadius: BorderRadius.only(\n topLeft: Radius.circular(20), bottomRight: Radius.circular(20)),\n boxShadow: [\n const BoxShadow(\n color: Colors.orangeAccent,\n offset: Offset(1, 1),\n blurRadius: 10,\n spreadRadius: 1),\n ]),\n child: Icon(\n Icons.android,\n size: 80,\n color: Colors.black.withAlpha(123),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":70,"name":"FlutterLogoDecoration装饰","priority":6,"subtitle":"通过FlutterLogoDecoration对象可指定Flutter图标装饰(并没有什么太大的作用),","code":"import 'package:flutter/material.dart';\nclass FlutterLogoDecorationDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: FlutterLogoDecoration(\n darkColor: Colors.orange,\n lightColor: Colors.deepPurpleAccent,\n style: FlutterLogoStyle.stacked),\n child: SizedBox(\n width: 100,\n height: 100,\n ),\n );\n }\n}\n"},{"id":null,"widgetId":70,"name":"DecoratedBox形状装饰","priority":4,"subtitle":"通过ShapeDecoration对象可指定边线形状,","code":"import 'package:flutter/material.dart';\nclass ShapeDecorationDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: ShapeDecoration(\n shadows: [\n const BoxShadow(\n color: Colors.orangeAccent,\n offset: Offset(0, 0),\n blurRadius: 2,\n spreadRadius: 1),\n ],\n image: DecorationImage(\n fit: BoxFit.cover,\n image: AssetImage(\n 'assets/images/wy_200x300.jpg',\n )),\n shape: CircleBorder(\n side: BorderSide(width: 1.0, color: Colors.orangeAccent),\n )),\n child: SizedBox(\n height: 100,\n width: 100,\n child: Icon(\n Icons.ac_unit,\n color: Colors.white,\n size: 40,\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":70,"name":"DecoratedBox形状和图片装饰","priority":2,"subtitle":" \n【shape】 : 形状 【BoxShape】\n【image】 : 背景图片 【DecorationImage】,","code":"import 'package:flutter/material.dart';\nclass ShapeImageDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n decoration: BoxDecoration(\n shape: BoxShape.circle,\n image: DecorationImage(\n fit: BoxFit.cover,\n image: AssetImage(\n 'assets/images/wy_200x300.jpg',\n ))),\n child: SizedBox(\n height: 80,\n width: 80,\n child: Icon(\n Icons.ac_unit,\n color: Colors.white,\n size: 40,\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":70,"name":"DecoratedBox边线装饰","priority":3,"subtitle":"【border】 : 边线 【BoxBorder】,","code":"import 'package:flutter/material.dart';\nclass BorderDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return DecoratedBox(\n position: DecorationPosition.foreground,\n decoration: BoxDecoration(\n border: Border(\n bottom: BorderSide(color: Colors.orange, width: 2),\n top: BorderSide(color: Colors.orange, width: 2)),\n ),\n child: SizedBox(\n height: 80,\n width: 100,\n child: Image.asset(\n 'assets/images/wy_200x300.jpg',\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n}"},{"id":null,"widgetId":85,"name":"Align其他用法","priority":2,"subtitle":" \n由于Alignment对象可指定在父容器中宽高的分率位置\n可以使用Align实现一些复杂的排布需求,比如按指定的数学方程变化位置","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass Ball extends StatelessWidget {\n Ball({\n Key key,\n this.radius = 15,\n this.color = Colors.blue,\n }) : super(key: key);\n final double radius; //半径\n final Color color; //颜色\n\n @override\n Widget build(BuildContext context) {\n return Container(\n width: radius * 2,\n height: radius * 2,\n decoration: BoxDecoration(\n shape: BoxShape.circle,\n color: color,\n ),\n );\n }\n}\n\nclass SinLayout extends StatefulWidget {\n SinLayout({\n Key key,\n }) : super(key: key);\n\n @override\n _SinLayoutState createState() => _SinLayoutState();\n}\n\nclass _SinLayoutState extends State {\n var _x = 0.0; //Alignment坐标系上的x坐标\n\n @override\n Widget build(BuildContext context) {\n var item = Container(\n width: 300,\n height: 120,\n color: Colors.black.withAlpha(10),\n child: Align(\n child: Ball(\n color: Colors.orangeAccent,\n ),\n alignment: Alignment(_x, f(_x * pi)),\n ),\n );\n\n var slider = Slider(\n max: 180,\n min: -180,\n divisions: 360,\n label: \"${_x.toStringAsFixed(2)}π\",\n value: _x * 180,\n onChanged: (v) => setState(() => _x = v / 180));\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: [slider, item],\n );\n }\n\n double f(x) {\n //映射函数 -- 可随意指定\n double y = sin(x);\n return y;\n }\n}\n"},{"id":null,"widgetId":278,"name":"BackdropFilter基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【filter】 : 过滤器 【ImageFilter】\nImageFilter.blur可以实现高斯模糊,指定x,y模糊因子。","code":"import 'dart:ui';\nimport 'package:flutter/material.dart';\nclass CustomBackdropFilter extends StatefulWidget {\n @override\n _CustomBackdropFilterState createState() => _CustomBackdropFilterState();\n}\n\nclass _CustomBackdropFilterState extends State {\n double _sigmaX = 1.2;\n double _sigmaY = 1.2;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Stack(\n children: [\n _buildImage(),\n Positioned.fill(\n child: ClipRect(\n child: BackdropFilter(\n filter: ImageFilter.blur(sigmaX: _sigmaX, sigmaY: _sigmaY),\n child: Container(\n color: Colors.black.withAlpha(0),\n ),\n ),\n ),\n )\n ],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildImage() {\n return Wrap(\n spacing: 20,\n children: [\n Container(\n height: 150,\n width: 150,\n child: Image.asset(\n 'assets/images/sabar.jpg',\n fit: BoxFit.cover,\n ),\n ),\n Container(\n height: 150,\n width: 150,\n child: Image.asset(\n 'assets/images/wy_200x300.jpg',\n fit: BoxFit.cover,\n ),\n ),\n ],\n );\n }\n\n Widget _buildSliders() => Column(\n children: [\n Slider(\n min: 0,\n max: 4,\n value: _sigmaX,\n divisions: 360,\n label: 'x:' + _sigmaX.toStringAsFixed(1),\n onChanged: (v) {\n setState(() {\n _sigmaX = v;\n });\n }),\n Slider(\n min: 0,\n max: 4,\n value: _sigmaY,\n divisions: 360,\n label: 'beta:' + _sigmaY.toStringAsFixed(1),\n onChanged: (v) {\n setState(() {\n _sigmaY = v;\n });\n })\n ],\n );\n}\n"},{"id":null,"widgetId":85,"name":"Align基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomAlign extends StatelessWidget {\n final alignments = [\n Alignment.topLeft,\n Alignment.topCenter,\n Alignment.topRight,\n Alignment.centerLeft,\n Alignment.center,\n Alignment.centerRight,\n Alignment.bottomLeft,\n Alignment.bottomCenter,\n Alignment.bottomRight,\n ];\n\n final alignmentsInfo = [\n \"topLeft\",\n \"topCenter\",\n \"topRight\",\n \"centerLeft\",\n \"center\",\n \"centerRight\",\n \"bottomLeft\",\n \"bottomCenter\",\n \"bottomRight\",\n ];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n children: alignments\n .toList()\n .map((mode) => Column(children: [\n Container(\n margin: EdgeInsets.all(5),\n width: 100,\n height: 60,\n color: Colors.grey.withAlpha(88),\n child: Align(\n child: Container(\n width: 30,\n height: 30,\n color: Colors.cyanAccent,\n ),\n alignment: mode)),\n Text(alignmentsInfo[alignments.indexOf(mode)])\n ]))\n .toList());\n }\n}"},{"id":null,"widgetId":297,"name":"IntrinsicWidth基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n如示例:上面宽可变动,中间宽固定,下面宽取前两者的最高值。","code":"import 'package:flutter/material.dart';\nclass IntrinsicWidthDemo extends StatefulWidget {\n @override\n _IntrinsicWidthDemoState createState() => _IntrinsicWidthDemoState();\n}\n\nclass _IntrinsicWidthDemoState extends State {\n var _height =120.0;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Column(\n children: [\n buildChild(_height),\n SizedBox(height: 10),\n _buildSlider()\n ],\n ),\n );\n }\n\n Widget buildChild(double leftWidth) {\n return IntrinsicWidth(\n child: Column(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Container(\n height: 50,\n width: leftWidth,\n color: Colors.yellow,\n alignment: Alignment.center,\n child: Text(\"width:${leftWidth.toStringAsFixed(1)}\"),\n ),\n Container(\n color: Colors.blue,\n width: 150,\n height: 60,\n alignment: Alignment.center,\n child: Text(\"固定宽\"),\n ),\n Container(\n color: Colors.red,\n height: 40,\n alignment: Alignment.center,\n child: Text(\"最宽\"),\n )\n ],\n ),\n );\n }\n\n Widget _buildSlider() =>Slider(\n value: _height,\n max: 200.0,\n min: 80.0,\n divisions: 17,\n onChanged: (v)=> setState(() => _height= v),\n );\n}\n"},{"id":null,"widgetId":82,"name":"FractionallySizedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【widthFactor】 : 宽分率 【double】\n【heightFactor】 : 高分率 【double】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomFractionallySizedBox extends StatefulWidget {\n @override\n _CustomFractionallySizedBoxState createState() =>\n _CustomFractionallySizedBoxState();\n}\n\nclass _CustomFractionallySizedBoxState\n extends State {\n var _hf = 0.5;\n var _wf = 0.4;\n\n @override\n Widget build(BuildContext context) {\n var box = FractionallySizedBox(\n widthFactor: _wf,\n heightFactor: _hf,\n alignment: Alignment.center,\n child: Container(color: Colors.orange),\n );\n return Column(\n children: [\n Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n child: box),\n _buildSlider()\n ],\n );\n }\n\n Widget _buildSlider() => Column(\n children: [\n Slider(\n divisions: 20,\n min: 0.0,\n max: 2,\n label: '宽分率:' + _wf.toStringAsFixed(1),\n value: _wf,\n onChanged: (v) => setState(() => _wf = v)),\n Slider(\n divisions: 20,\n min: 0.0,\n max: 2,\n label: '高分率:' + _hf.toStringAsFixed(1),\n value: _hf,\n onChanged: (v) => setState(() => _hf = v)),\n ],\n );\n}\n"},{"id":null,"widgetId":73,"name":"Opacity基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【opacity】 : 透明度0~1 【double】","code":"import 'package:flutter/material.dart';\nclass CustomOpacity extends StatefulWidget {\n @override\n _CustomOpacityState createState() => _CustomOpacityState();\n}\n\nclass _CustomOpacityState extends State {\n var _opacity = 0.2;\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [_buildSlider(), _buildOpacity()],\n );\n }\n // 创建Opacity\n Widget _buildOpacity() => Opacity(\n opacity: _opacity,\n child: Image.asset(// 图片\n 'assets/images/icon_head.png',\n width: 100,\n ),\n );\n Widget _buildSlider() => Slider(\n divisions: 20,\n label: _opacity.toString(),\n value: _opacity,\n onChanged: (v) => setState(() => _opacity = v));\n}\n"},{"id":null,"widgetId":264,"name":"保存Widget成为图片","priority":2,"subtitle":"通过RenderRepaintBoundary可以获取子组件的Image信息,从而获取字节保存为图片文件。","code":"import 'dart:io';\nimport 'dart:typed_data';\nimport 'dart:ui';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'package:flutter/rendering.dart';\nimport 'package:path_provider/path_provider.dart';\nimport 'dart:ui' as ui;\nimport 'node1_base.dart';\nclass RepaintBoundarySave extends StatelessWidget {\n final GlobalKey _globalKey = GlobalKey();\n\n @override\n Widget build(BuildContext context) {\n return Stack(\n children: [\n RepaintBoundary(\n key: _globalKey,\n child: TempPlayBezier3Page(),\n ),\n Positioned(right: -10, child: _buildButton3(context))\n ],\n );\n }\n\n Widget _buildButton3(context) => MaterialButton(\n child: Icon(\n Icons.save_alt,\n size: 15,\n color: Colors.white,\n ),\n color: Colors.green,\n shape: CircleBorder(\n side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),\n ),\n onPressed: () async {\n var bits = await _widget2Image(_globalKey);\n var dir = await getApplicationSupportDirectory();\n var file = File(dir.path + \"/save_img.png\");\n var f = await file.writeAsBytes(bits);\n Scaffold.of(context).showSnackBar(SnackBar(\n backgroundColor: Theme.of(context).primaryColor,\n content: Text('保存成功后! 路径为:${f.path}'),\n ));\n });\n\n Future _widget2Image(GlobalKey key) async {\n RenderRepaintBoundary boundary = key.currentContext.findRenderObject();\n //获得 ui.image\n ui.Image img = await boundary.toImage();\n //获取图片字节\n var byteData = await img.toByteData(format: ui.ImageByteFormat.png);\n Uint8List bits = byteData.buffer.asUint8List();\n return bits;\n }\n}\n"},{"id":null,"widgetId":264,"name":"RepaintBoundary基本使用","priority":1,"subtitle":"【child】 : 子组件 【Widget】\n比如上面的绘制视图,即使shouldRepaint为false,在滑动中会也会不断执行paint方法,使用RepaintBoundary可以避免不必要的绘制。","code":"import 'dart:ui';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass RepaintBoundaryDemo extends StatelessWidget{\n @override\n Widget build(BuildContext context) {\n return RepaintBoundary(\n child: TempPlayBezier3Page(),\n );\n }\n}\n\nclass TempPlayBezier3Page extends StatefulWidget {\n @override\n _TempPlayBezier3PageState createState() => _TempPlayBezier3PageState();\n}\n\nclass _TempPlayBezier3PageState extends State {\n List _pos = [];\n int selectPos;\n\n @override\n void initState() {\n _initPoints();\n super.initState();\n }\n\n void _initPoints() {\n _pos = List();\n _pos.add(Offset(0, 0));\n _pos.add(Offset(60, -60));\n _pos.add(Offset(-90, -90));\n _pos.add(Offset(-120, -40));\n }\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 200,\n width: MediaQuery.of(context).size.width,\n child: CustomPaint(\n painter: TempBezierPainter(pos: _pos, selectPos: selectPos),\n ),\n );\n }\n}\n\nclass TempBezierPainter extends CustomPainter {\n Paint _gridPaint;\n Path _gridPath;\n\n Paint _mainPaint;\n Path _mainPath;\n int selectPos;\n Paint _helpPaint;\n\n List pos;\n\n TempBezierPainter({this.pos, this.selectPos}) {\n _gridPaint = Paint()..style = PaintingStyle.stroke;\n _gridPath = Path();\n\n _mainPaint = Paint()\n ..color = Colors.orange\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2;\n _mainPath = Path();\n\n _helpPaint = Paint()\n ..color = Colors.purple\n ..style = PaintingStyle.stroke\n ..strokeWidth = 2\n ..strokeCap = StrokeCap.round;\n }\n\n @override\n void paint(Canvas canvas, Size size) {\n print('----------Paint-------');\n canvas.clipRect(Offset.zero & size);\n canvas.translate(size.width / 2, size.height / 2);\n _drawGrid(canvas, size); //绘制格线\n _drawAxis(canvas, size); //绘制轴线\n\n _mainPath.moveTo(pos[0].dx, pos[0].dy);\n _mainPath.cubicTo(\n pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);\n canvas.drawPath(_mainPath, _mainPaint);\n _drawHelp(canvas);\n _drawSelectPos(canvas);\n }\n\n @override\n bool shouldRepaint(CustomPainter oldDelegate) => false;\n\n void _drawGrid(Canvas canvas, Size size) {\n _gridPaint\n ..color = Colors.grey\n ..strokeWidth = 0.5;\n _gridPath = _buildGridPath(_gridPath, size);\n canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);\n\n canvas.save();\n canvas.scale(1, -1); //沿x轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, 1); //沿y轴镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n\n canvas.save();\n canvas.scale(-1, -1); //沿原点镜像\n canvas.drawPath(_gridPath, _gridPaint);\n canvas.restore();\n }\n\n void _drawAxis(Canvas canvas, Size size) {\n canvas.drawPoints(\n PointMode.lines,\n [\n Offset(-size.width / 2, 0),\n Offset(size.width / 2, 0),\n Offset(0, -size.height / 2),\n Offset(0, size.height / 2),\n Offset(0, size.height / 2),\n Offset(0 - 7.0, size.height / 2 - 10),\n Offset(0, size.height / 2),\n Offset(0 + 7.0, size.height / 2 - 10),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, 7),\n Offset(size.width / 2, 0),\n Offset(size.width / 2 - 10, -7),\n ],\n _gridPaint\n ..color = Colors.blue\n ..strokeWidth = 1.5);\n }\n\n Path _buildGridPath(Path path, Size size, {step = 20.0}) {\n for (int i = 0; i < size.height / 2 / step; i++) {\n path.moveTo(0, step * i);\n path.relativeLineTo(size.width / 2, 0);\n }\n for (int i = 0; i < size.width / 2 / step; i++) {\n path.moveTo(step * i, 0);\n path.relativeLineTo(\n 0,\n size.height / 2,\n );\n }\n return path;\n }\n\n void _drawHelp(Canvas canvas) {\n canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);\n canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);\n }\n\n void _drawSelectPos(Canvas canvas) {\n if (selectPos == null) return;\n canvas.drawCircle(\n pos[selectPos],\n 10,\n _helpPaint\n ..color = Colors.green\n ..strokeWidth = 2);\n }\n}\n"},{"id":null,"widgetId":81,"name":"UnConstrainedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【constrainedAxis】 : 仍受约束的轴*2 【Axis】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomUnConstrainedBox extends StatefulWidget {\n @override\n _CustomUnConstrainedBoxState createState() => _CustomUnConstrainedBoxState();\n}\n\nclass _CustomUnConstrainedBoxState extends State {\n var _value = false;\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: [_buildUnconstrainedBox(), _buildConstrainedAxis()],\n );\n }\n\n Widget _buildUnconstrainedBox() {\n var child = Container(\n color: Colors.cyanAccent,\n width: 60,\n height: 60,\n child: Switch(\n value: _value,\n onChanged: (v) {\n setState(() {\n _value = v;\n });\n },\n ),\n );\n\n return Column(\n children: [\n Container(\n color: Colors.grey.withAlpha(22),\n width: 150,\n height: 100,\n child: _value\n ? UnconstrainedBox(alignment: Alignment.center, child: child)\n : child,\n ),\n Text(_value ? \"已解除约束\" : \"子组件受约束\")\n ],\n );\n }\n\n Widget _buildConstrainedAxis() {\n return Column(\n children: [\n Container(\n color: Colors.grey.withAlpha(22),\n width: 150,\n height: 100,\n child: UnconstrainedBox(\n alignment: Alignment.center,\n constrainedAxis: Axis.vertical,\n child: Container(\n color: Colors.cyanAccent,\n width: 60,\n height: 60,\n )),\n ),\n Text(\"竖直方向仍约束\")\n ],\n );\n }\n}\n"},{"id":null,"widgetId":201,"name":"AnimatedSize基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【duration】 : 动画时长 【Duration】\n【alignment】 : 对齐方式 【AlignmentGeometry】\n【curve】 : 动画曲线 【Duration】\n【vsync】 : vsync 【TickerProvider】","code":"import 'package:flutter/material.dart';\nclass CustomAnimatedSize extends StatefulWidget {\n @override\n _CustomAnimatedSizeState createState() => _CustomAnimatedSizeState();\n}\n\nclass _CustomAnimatedSizeState extends State\n with SingleTickerProviderStateMixin {\n final double start = 100;\n final double end = 200;\n\n double _width;\n\n @override\n void initState() {\n _width = start;\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildSwitch(),\n Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 100,\n alignment: Alignment.center,\n child: AnimatedSize(\n vsync: this,\n duration: Duration(seconds: 1),\n curve: Curves.fastOutSlowIn,\n alignment: Alignment(0, 0),\n child: Container(\n height: 40,\n width: _width,\n alignment: Alignment.center,\n color: Colors.blue,\n child: Text(\n '张风捷特烈',\n style: TextStyle(color: Colors.white),\n ),\n ),\n ),\n ),\n ],\n );\n }\n\n Widget _buildSwitch() => Switch(\n value: _width == end,\n onChanged: (v) {\n setState(() {\n _width = v ? end : start;\n });\n });\n}\n"},{"id":null,"widgetId":89,"name":"FadeTransition基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【opacity】 : 动画 【Animation】","code":"import 'package:flutter/material.dart';\nclass CustomFadeTransition extends StatefulWidget {\n @override\n _CustomFadeTransitionState createState() => _CustomFadeTransitionState();\n}\n\nclass _CustomFadeTransitionState extends State\n with SingleTickerProviderStateMixin {\n AnimationController _ctrl;\n\n @override\n void initState() {\n _ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2));\n _ctrl.forward();\n super.initState();\n }\n\n @override\n void dispose() {\n _ctrl.dispose();\n super.dispose();\n }\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n _ctrl.reset();\n _ctrl.forward();\n });\n },\n child: Container(\n color: Colors.grey.withAlpha(22),\n width: 100,\n height: 100,\n child: FadeTransition(\n opacity: CurvedAnimation(parent: _ctrl, curve: Curves.linear),\n child: Icon(Icons.android, color: Colors.green, size: 60),\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":285,"name":"CustomSingleChildLayout的偏移使用","priority":2,"subtitle":" \n可以利用代理的偏移能力,对子组件进行偏移定位。","code":"import 'package:flutter/material.dart';\nclass OffSetWidgetDemo extends StatelessWidget {\n final data = [\n {\n 'offset': Offset(20, 20),\n 'direction': Direction.topLeft,\n },\n {\n 'offset': Offset(20, -15),\n 'direction': Direction.topRight,\n },\n {\n 'offset': Offset(-15, 20),\n 'direction': Direction.bottomLeft,\n },\n {\n 'offset': Offset(-15, 20),\n 'direction': Direction.bottomLeft,\n },\n {\n 'offset': Offset(15, 20),\n 'direction': Direction.bottomLeft,\n },\n {\n 'offset': Offset(-15, -15),\n 'direction': Direction.topRight,\n },\n ];\n\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n runSpacing: 20,\n children: data\n .map((e) => Container(\n width: 150,\n height: 100,\n alignment: Alignment.topRight,\n color: Colors.grey.withAlpha(11),\n child: OffSetWidget(\n offset: e['offset'],\n direction: e['direction'],\n child: Icon(\n Icons.android,\n size: 30,\n color: Colors.green,\n ),\n )))\n .toList());\n }\n}\n\nclass OffSetWidget extends StatelessWidget {\n final Offset offset;\n final Widget child;\n final Direction direction;\n\n OffSetWidget(\n {this.offset = Offset.zero,\n this.child,\n this.direction = Direction.topLeft});\n\n @override\n Widget build(BuildContext context) {\n return CustomSingleChildLayout(\n delegate: _OffSetDelegate(offset: offset, direction: direction),\n child: child,\n );\n }\n}\n\nenum Direction { topLeft, topRight, bottomLeft, bottomRight }\n\nclass _OffSetDelegate extends SingleChildLayoutDelegate {\n final Offset offset;\n final Direction direction;\n\n _OffSetDelegate(\n {this.offset = Offset.zero, this.direction = Direction.topLeft});\n\n @override\n bool shouldRelayout(_OffSetDelegate oldDelegate) =>\n offset != oldDelegate.offset;\n\n @override\n Offset getPositionForChild(Size size, Size childSize) {\n var w = size.width;\n var h = size.height;\n var wc = childSize.width;\n var hc = childSize.height;\n\n switch (direction) {\n case Direction.topLeft:\n return offset;\n case Direction.topRight:\n return offset.translate(w - wc - offset.dx * 2, 0);\n case Direction.bottomLeft:\n return offset.translate(0, h - hc - offset.dy * 2);\n case Direction.bottomRight:\n return offset.translate(w - wc - offset.dx * 2, h - hc - offset.dy * 2);\n }\n return offset;\n }\n}\n"},{"id":null,"widgetId":285,"name":"CustomSingleChildLayout基本使用","priority":1,"subtitle":" \n【delegate】 : 代理 【SingleChildLayoutDelegate】","code":"import 'package:flutter/material.dart';\nclass CustomSingleChildLayoutDemo extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n print('-------CustomSingleChildLayoutDemo------');\n return Container(\n width: 300,\n height: 200,\n color: Colors.grey.withAlpha(11),\n child: CustomSingleChildLayout(\n delegate: _TolySingleChildLayoutDelegate(),\n child: Container(\n color: Colors.orange,\n ),\n ),\n );\n }\n}\n\nclass _TolySingleChildLayoutDelegate extends SingleChildLayoutDelegate {\n @override\n bool shouldRelayout(SingleChildLayoutDelegate oldDelegate) {\n return true;\n }\n\n @override\n Size getSize(BoxConstraints constraints) {\n print('----getSize:----constraints:$constraints----');\n return super.getSize(constraints);\n }\n\n @override\n Offset getPositionForChild(Size size, Size childSize) {\n print('----getPositionForChild: size:$size----childSize:$childSize----');\n return Offset(size.width / 2, 0);\n }\n\n @override\n BoxConstraints getConstraintsForChild(BoxConstraints constraints) {\n print('----getConstraintsForChild:----constraints:$constraints----');\n return BoxConstraints(\n maxWidth: constraints.maxWidth / 2,\n maxHeight: constraints.maxHeight / 2,\n minHeight: constraints.maxHeight / 4,\n minWidth: constraints.maxWidth / 4,\n );\n }\n}"},{"id":null,"widgetId":74,"name":"Padding单独边距边距","priority":2,"subtitle":" \nEdgeInsets.only用来限定相同的四边边距","code":"import 'package:flutter/material.dart';\nclass PaddingOnly extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 150,\n child: Padding(\n padding: EdgeInsets.only(top:10,left: 10),\n child: _buildChild(),\n ),\n );\n }\n\n Widget _buildChild() {\n return Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Text(\"孩子\"),\n );\n }\n}"},{"id":null,"widgetId":74,"name":"Padding方向边距","priority":3,"subtitle":" \nEdgeInsets.symmetric用来限定水平和竖直方向的边距","code":"import 'package:flutter/material.dart';\nclass PaddingSymmetric extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 150,\n child: Padding(\n padding: EdgeInsets.symmetric(vertical: 30,horizontal: 10),\n child: _buildChild(),\n ),\n );\n }\n\n Widget _buildChild() {\n return Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Text(\"孩子\"),\n );\n }\n}"},{"id":null,"widgetId":74,"name":"Padding四面等边距","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【padding】 : 内四边距 【EdgeInsetsGeometry】\"\nEdgeInsets.all用来限定相同的四边边距","code":"import 'package:flutter/material.dart';\nclass PaddingAll extends StatelessWidget {\n\n @override\n Widget build(BuildContext context) {\n return Container(\n color: Colors.grey.withAlpha(22),\n width: 200,\n height: 150,\n child: Padding(\n padding: EdgeInsets.all(20),\n child: _buildChild(),\n ),\n );\n }\n\n Widget _buildChild() {\n return Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Text(\"孩子\"),\n );\n }\n}"},{"id":null,"widgetId":66,"name":"ClipOval基本使用","priority":1,"subtitle":" \n【child】 : 子组件 【Widget】\n【clipBehavior】 : 裁剪行为 【Clip】\n【clipper】 : 裁剪器 【CustomClipper】","code":"import 'package:flutter/material.dart';\nclass CustomClipOval extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return Wrap(\n spacing: 20,\n children: [\n ClipOval(\n\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 150,\n height: 100,\n ),\n ),\n ClipOval(\n child: Image.asset(\n \"assets/images/wy_300x200.jpg\",\n width: 100,\n height: 100,\n fit: BoxFit.cover,\n ),\n ),\n ],\n );\n }\n}"},{"id":null,"widgetId":263,"name":"FractionalTranslation基本使用","priority":1,"subtitle":"【translation】 : 偏移分度值 【Offset】\n【child】: 子组件 【Widget】","code":"import 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nclass FractionalTranslationDemo extends StatefulWidget {\n @override\n _FractionalTranslationDemoState createState() =>\n _FractionalTranslationDemoState();\n}\n\nclass _FractionalTranslationDemoState extends State {\n var dx = 0.0;\n var dy = 0.0;\n\n @override\n Widget build(BuildContext context) {\n print(dx);\n return Column(\n mainAxisSize: MainAxisSize.min,\n children: [\n Container(\n width: 200,\n height: 100,\n alignment: Alignment.topLeft,\n color: Colors.grey.withAlpha(33),\n child: FractionalTranslation(\n translation: Offset(dx, dy),\n child: Icon(\n Icons.android,\n color: Colors.green,\n ),\n ),\n ),\n _buildSliderX(),\n _buildSliderY()\n ],\n );\n }\n\n Widget _buildSliderX() => Slider(\n min: -2.0,\n max: 10.0,\n value: dx,\n divisions: 100,\n label: 'dx:${dx.toStringAsFixed(1)}',\n onChanged: (v) => setState(() => dx = v),\n );\n\n\n Widget _buildSliderY() => Slider(\n min: -2.0,\n max: 6.0,\n value: dy,\n divisions: 100,\n label: 'dy:${dy.toStringAsFixed(1)}',\n onChanged: (v) => setState(() => dy = v),\n );\n}\n"},{"id":null,"widgetId":80,"name":"BoxConstraints基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【minWidth】 : 最小宽 【double】\n【minHeight】 : 最小高 【double】\n【maxHeight】 : 最大高 【double】\n【maxWidth】 : 最大宽 【double】","code":"import 'package:flutter/material.dart';\nclass CustomConstrainedBox extends StatefulWidget {\n @override\n _CustomConstrainedBoxState createState() => _CustomConstrainedBoxState();\n}\n\nclass _CustomConstrainedBoxState extends State {\n var _text = '';\n\n @override\n Widget build(BuildContext context) {\n var child = Container(\n alignment: Alignment.center,\n color: Colors.cyanAccent,\n width: 40,\n height: 40,\n child: Text(\"Static\"),\n );\n\n var box = ConstrainedBox(\n constraints: BoxConstraints(\n minHeight: 50,\n minWidth: 20,\n maxHeight: 80,\n maxWidth: 150,\n ),\n child: Container(color: Colors.orange, child: Text(_text)),\n );\n return Column(\n children: [\n Container(\n color: Colors.grey.withAlpha(22),\n width: 300,\n height: 100,\n child: Row(\n children: [child, UnconstrainedBox(child: box), child],\n ),\n ),\n _buildInput(),\n ],\n );\n }\n\n Widget _buildInput() {\n return Padding(\n padding: const EdgeInsets.all(18.0),\n child: TextField(\n decoration: InputDecoration(\n border: OutlineInputBorder(),\n hintText: '请输入',\n ),\n onChanged: (v) {\n setState(() {\n _text = v;\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":87,"name":"FittedBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【fit】 : 适应模式 【BoxFit】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomFittedBox extends StatefulWidget {\n @override\n _CustomFittedBoxState createState() => _CustomFittedBoxState();\n}\n\nclass _CustomFittedBoxState extends State {\n double _childW = 20;\n double _childH = 30;\n\n final rainbow = [\n 0xffff0000,\n 0xffFF7F00,\n 0xffFFFF00,\n 0xff00FF00,\n 0xff00FFFF,\n 0xff0000FF,\n 0xff8B00FF\n ];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Wrap(\n spacing: 10,\n runSpacing: 10,\n children: BoxFit.values\n .map((mode) => Column(\n children: [\n _buildChild(mode),\n SizedBox(\n height: 10,\n ),\n Text(mode.toString().split('.')[1])\n ],\n ))\n .toList()),\n _buildSlider()\n ],\n );\n }\n\n Widget _buildChild(BoxFit m) {\n return Container(\n color: Colors.grey.withAlpha(44),\n width: 80,\n height: 60,\n child: FittedBox(\n fit: m,\n child: Container(\n width: _childW,\n height: _childH,\n decoration: BoxDecoration(\n //添加渐变色\n gradient: LinearGradient(\n stops: [0.0, 1 / 6, 2 / 6, 3 / 6, 4 / 6, 5 / 6, 1.0],\n colors: rainbow.map((e) => Color(e)).toList()),\n ),\n ),\n ),\n );\n }\n\n Widget _buildSlider() => Column(\n children: [\n Slider(\n min: 10,\n max: 150,\n divisions: 100,\n label: '子宽度:' + _childW.toStringAsFixed(1),\n value: _childW,\n onChanged: (v) => setState(() => _childW = v)),\n Slider(\n min: 10,\n max: 150,\n divisions: 100,\n label: '子高度:' + _childH.toStringAsFixed(1),\n value: _childH,\n onChanged: (v) => setState(() => _childH = v)),\n ],\n );\n}\n"},{"id":null,"widgetId":78,"name":"平移变换translationValues","priority":2,"subtitle":" \n平移x由R0C3数控制,入参为数值,表示平移长度\n平移y由R1C3数控制,入参为数值,表示平移长度\n平移z由R2C3数控制,入参为数值,表示平移长度","code":"import 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass TranslationTransform extends StatefulWidget {\n @override\n _TranslationTransformState createState() => _TranslationTransformState();\n}\n\nclass _TranslationTransformState extends State {\n Matrix4 _m4;\n double _x = 0;\n double _y = 0;\n double _z = 0;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n _m4 = Matrix4.translationValues(_x, _y, _z);\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n Widget _buildSliders() => Column(\n children: [\n Slider(\n min: -100,\n max: 100,\n value: _x,\n divisions: 360,\n label: 'x:${_x.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _x = v;\n });\n }),\n Slider(\n min: -100,\n max: 100,\n value: _y,\n divisions: 360,\n label: 'y:${_y.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _y = v;\n });\n }),\n Slider(\n min: -100,\n max: 100,\n value: _z,\n divisions: 360,\n label: 'z:${_z.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _z = v;\n });\n })\n ],\n );\n}\n"},{"id":null,"widgetId":78,"name":"斜切变换skew","priority":1,"subtitle":" \n斜切x由R0C1数控制,入参为弧度值,表示斜切角度\n斜切y由R1C0数控制,入参为弧度值,表示斜切角度","code":"import 'dart:math';\nimport 'package:flutter/cupertino.dart';\nimport 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass SkewTransform extends StatefulWidget {\n @override\n _SkewTransformState createState() => _SkewTransformState();\n}\n\nclass _SkewTransformState extends State {\n Matrix4 _m4;\n double _alpha = 0;\n double _beta = 0;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n _m4 = Matrix4.skew(_alpha, _beta);\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n Widget _buildSliders() => Column(\n children: [\n Slider(\n min: -pi,\n max: pi,\n value: _alpha,\n divisions: 360,\n label: 'alpha:' + (_alpha * 180 / pi).toStringAsFixed(1) + \"°\",\n onChanged: (v) {\n setState(() {\n _alpha = v;\n });\n }),\n Slider(\n min: -pi,\n max: pi,\n value: _beta,\n divisions: 360,\n label: 'beta:' + (_beta * 180 / pi).toStringAsFixed(1) + \"°\",\n onChanged: (v) {\n setState(() {\n _beta = v;\n });\n })\n ],\n );\n}"},{"id":null,"widgetId":78,"name":"透视变换rotation","priority":5,"subtitle":" \n由R3C1、R3C2、R3C3控制透视","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nclass R3C2 extends StatefulWidget {\n @override\n _R3C2State createState() => _R3C2State();\n}\n\nclass _R3C2State extends State {\n Matrix4 _m4;\n double _value = 0;\n double _rad = 0;\n\n @override\n Widget build(BuildContext context) {\n _m4 = Matrix4.identity()\n// ..setEntry(3, 0, _value) // x\n// ..setEntry(3, 1, _value)// y\n ..setEntry(3, 2, _value) // z\n ..rotateY(_rad)\n// ..rotateX(_rad)\n ;\n return Column(\n children: [\n Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildSliders() => Column(\n children: [\n Slider(\n min: -0.01,\n max: 0.01,\n value: _value,\n divisions: 360,\n label: 'x:${_value.toStringAsFixed(5)}',\n onChanged: (v) {\n setState(() {\n _value = v;\n });\n }),\n Slider(\n min: -pi,\n max: pi,\n value: _rad,\n divisions: 360,\n label: '角度:' + (_rad * 180 / pi).toStringAsFixed(1) + \"°\",\n onChanged: (v) {\n setState(() {\n _rad = v;\n });\n }),\n ],\n );\n}"},{"id":null,"widgetId":78,"name":"旋转变换rotation","priority":4,"subtitle":" \nx旋转由R1C1、R1C2、R2C1、R2C2控制,入参表示弧度\ny旋转由R0C0、R0C2、R2C0、R2C2控制,入参表示弧度\nz旋转由R0C0、R0C1、R1C0、R1C1控制,","code":"import 'dart:math';\nimport 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass RotateTransform extends StatefulWidget {\n @override\n _RotateTransformState createState() => _RotateTransformState();\n}\n\nclass _RotateTransformState extends State {\n Matrix4 _m4;\n double _x = 0;\n int _rotateFlag = 1;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n if (_rotateFlag == 1) {\n _m4 = Matrix4.rotationX(_x);\n } else if (_rotateFlag == 2) {\n _m4 = Matrix4.rotationY(_x);\n } else {\n _m4 = Matrix4.rotationZ(_x);\n }\n\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n final Map map = {\n 1: 'rotationX',\n 2: 'rotationY',\n 3: 'rotationZ',\n };\n\n Widget _buildSliders() => Column(\n children: [\n Wrap(\n children: map.keys.map((key) => _buildChild(key)).toList(),\n ),\n Slider(\n min: -pi,\n max: pi,\n value: _x,\n divisions: 360,\n label: 'x:${_x.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _x = v;\n });\n }),\n ],\n );\n\n Padding _buildChild(int key) {\n return Padding(\n padding: const EdgeInsets.all(4.0),\n child: FilterChip(\n selectedColor: Colors.orange.withAlpha(55),\n selectedShadowColor: Colors.blue,\n shadowColor: Colors.orangeAccent,\n pressElevation: 5,\n elevation: 3,\n avatar: CircleAvatar(child: Text(key.toString())),\n label: Text(map[key]),\n selected: _rotateFlag == key,\n onSelected: (bool value) {\n print(map[key]);\n setState(() {\n _x = 0;\n if (value) {\n _rotateFlag = key;\n }\n });\n },\n ),\n );\n }\n}\n"},{"id":null,"widgetId":78,"name":"缩放变换diagonal3Values","priority":3,"subtitle":" \n缩放x由R0C0数控制,入参为数值,表示缩放分率\n缩放y由R1C2数控制,入参为数值,表示缩放分率\n缩放z由R2C2数控制,入参为数值,表示缩放分率","code":"import 'package:flutter/material.dart';\nimport 'matrix4_shower.dart';\nclass ScaleTransform extends StatefulWidget {\n @override\n _ScaleTransformState createState() => _ScaleTransformState();\n}\n\nclass _ScaleTransformState extends State {\n Matrix4 _m4;\n double _x = 1.0;\n double _y = 1.0;\n double _z = 1.0;\n\n @override\n void initState() {\n _m4 = Matrix4.identity();\n super.initState();\n }\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n Row(\n mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n children: [_buildTransform(), Matrix4Shower(_m4)],\n ),\n _buildSliders()\n ],\n );\n }\n\n Widget _buildTransform() {\n _m4 = Matrix4.diagonal3Values(_x, _y, _z);\n return Transform(\n transform: _m4,\n child: Container(\n color: Colors.cyanAccent,\n width: 100,\n height: 100,\n child: Image.asset(\n 'assets/images/wy_300x200.jpg',\n fit: BoxFit.cover,\n )),\n );\n }\n\n Widget _buildSliders() => Column(\n children: [\n Slider(\n min: -2,\n max: 2,\n value: _x,\n divisions: 360,\n label: 'x:${_x.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _x = v;\n });\n }),\n Slider(\n min: -2,\n max: 2,\n value: _y,\n divisions: 360,\n label: 'y:${_y.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _y = v;\n });\n }),\n Slider(\n min: -2,\n max: 2,\n value: _z,\n divisions: 360,\n label: 'z:${_z.toStringAsFixed(1)}',\n onChanged: (v) {\n setState(() {\n _z = v;\n });\n })\n ],\n );\n}"},{"id":null,"widgetId":295,"name":"AbsorbPointer基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【absorbing】 : 是否吸收事件 【bool】\n如下,Switch选中时absorbing为true,按钮事件将被吸收,无法点击。","code":"import 'package:flutter/material.dart';\nclass CustomAbsorbPointer extends StatefulWidget {\n @override\n _CustomAbsorbPointerState createState() => _CustomAbsorbPointerState();\n}\n\nclass _CustomAbsorbPointerState extends State {\n bool _absorbing = false;\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Wrap(\n crossAxisAlignment: WrapCrossAlignment.center,\n children: [\n GestureDetector(\n onTap: (){\n print('AbsorbPointer');\n },\n child: AbsorbPointer(\n absorbing: _absorbing,\n child: _buildButton(),\n ),\n ),\n _buildSwitch(),\n Text(!_absorbing ? '允许点击' : '事件已被吸收')\n ],\n ),\n );\n }\n\n Widget _buildButton() => RaisedButton(\n color: Theme.of(context).primaryColor,\n child: Text(\n 'To About',\n style: TextStyle(color: Colors.white),\n ),\n onPressed: () => Navigator.of(context).pushNamed('AboutMePage'));\n\n _buildSwitch() => Switch(\n value: _absorbing,\n onChanged: (v) {\n setState(() {\n _absorbing = v;\n });\n });\n}\n"},{"id":null,"widgetId":84,"name":"SizedOverflowBox基本使用","priority":1,"subtitle":" \n【child】 : 孩子组件 【Widget】\n【size】 : 尺寸偏移 【Size】\n【alignment】 : 对齐方式 【AlignmentGeometry】","code":"import 'package:flutter/material.dart';\nclass CustomSizedOverflowBox extends StatefulWidget {\n\n @override\n _CustomSizedOverflowBoxState createState() => _CustomSizedOverflowBoxState();\n}\n\nclass _CustomSizedOverflowBoxState extends State {\n double _x = 50;\n double _y = 44;\n\n @override\n Widget build(BuildContext context) {\n var box = SizedOverflowBox(\n alignment: Alignment.bottomRight,\n size: Size(_x, _y),\n child: Container(width: 30, height: 50, color: Colors.orange),\n );\n return Column(\n children: [\n Container(\n alignment: Alignment.topLeft,\n color: Colors.grey.withAlpha(88),\n width: 250,\n height: 60,\n child: box),\n _buildSlider()\n ],\n );\n }\n\n Widget _buildSlider() =>\n Column(\n children: [\n Slider(\n divisions: 100,\n min: 0,\n max: 250,\n label: 'x:' + _x.toStringAsFixed(1),\n value: _x,\n onChanged: (v) => setState(() => _x = v)),\n Slider(\n divisions: 100,\n min: 0,\n max: 100,\n label: 'y:' + _y.toStringAsFixed(1),\n value: _y,\n onChanged: (v) => setState(() => _y = v)),\n\n ],\n );\n}\n"},{"id":null,"widgetId":192,"name":"SliverOpacity基本使用","priority":1,"subtitle":" \n【opacity】 : 透明度 【double】\n【sliver】 : 子组件 【Function()】","code":"import 'package:flutter/material.dart';\nclass SliverOpacityDemo extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: [\n _buildSliverAppBar(),\n SliverPadding(\n padding: EdgeInsets.only(top: 10),\n sliver: SliverOpacity(opacity: 0.2, sliver: _buildSliverGrid()))\n ],\n ),\n );\n }\n\n Widget _buildSliverGrid() => SliverGrid.extent(\n childAspectRatio: 1 / 0.618,\n maxCrossAxisExtent: 180,\n crossAxisSpacing: 5,\n mainAxisSpacing: 5,\n children: data\n .map((e) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: e,\n child: Text(\n colorString(e),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List _buildActions() => [\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":183,"name":"CustomScrollView基本使用","priority":1,"subtitle":" \n【slivers】 : 子组件列表 【List】\n【reverse】 : 是否反向 【bool】\n【scrollDirection】 : 滑动方向 【Axis】\n【controller】 : 控制器 【ScrollController】","code":"import 'package:flutter/material.dart';\nclass CustomScrollViewDemo extends StatelessWidget {\n final data = [\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n anchor: 0,\n scrollDirection: Axis.vertical,\n reverse: false,\n slivers: [_buildSliverAppBar(), _buildSliverFixedExtentList()],\n ),\n );\n }\n\n Widget _buildSliverFixedExtentList() => SliverFixedExtentList(\n itemExtent: 60,\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png')),\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n title: Text(\n '张风捷特烈',\n style: TextStyle(color: Colors.black, //标题\n shadows: [\n Shadow(color: Colors.blue, offset: Offset(1, 1), blurRadius: 2)\n ]),\n ),\n background: Image.asset(\n \"assets/images/caver.jpeg\", fit: BoxFit.cover,\n ),\n ),\n );\n }\n}\n"},{"id":null,"widgetId":191,"name":"SliverPadding基本使用","priority":1,"subtitle":" \n【sliver】 : 子组件 【Widget】\n【padding】 : 内边距 【EdgeInsetsGeometry】","code":"import 'package:flutter/material.dart';\nclass SliverPaddingDemo extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: [_buildSliverAppBar(), SliverPadding(\n padding: EdgeInsets.only(top: 10),\n sliver\n : _buildSliverGrid())],\n ),\n );\n }\n\n Widget _buildSliverGrid() => SliverGrid.extent(\n childAspectRatio: 1 / 0.618,\n maxCrossAxisExtent: 180,\n crossAxisSpacing: 5,\n mainAxisSpacing: 5,\n children: data\n .map((e) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: e,\n child: Text(\n colorString(e),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List _buildActions() => [\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":188,"name":"SliverList基本使用","priority":1,"subtitle":" \nSliverGrid.count 指定轴向数量构造\nSliverGrid.extent 指定轴向长度构造\n属性特征同GridView,可详见之","code":"import 'package:flutter/material.dart';\nclass SliverGirdDemo extends StatelessWidget {\n final data = List.generate(128, (i) => Color(0xFF6600FF - 2 * i));\n\n @override\n Widget build(BuildContext context) {\n return Container(\n height: 300,\n child: CustomScrollView(\n slivers: [_buildSliverAppBar(), _buildSliverList()],\n ),\n );\n }\n\n Widget _buildSliverList() => SliverGrid.extent(\n childAspectRatio: 1 / 0.618,\n maxCrossAxisExtent: 180,\n crossAxisSpacing: 5,\n mainAxisSpacing: 5,\n children: data\n .map((e) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 60,\n color: e,\n child: Text(\n colorString(e),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ))\n .toList(),\n );\n\n Widget _buildSliverAppBar() {\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n pinned: true,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(\n //伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List _buildActions() => [\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n}\n"},{"id":null,"widgetId":184,"name":"SliverAppBar基本使用","priority":1,"subtitle":" \n【leading】 : 左侧组件 【Widget】\n【title】 : 中间组件 【Widget】\n【actions】 : 尾部组件列表 【List】\n【floating】 : 是否浮动 【bool】\n【pinned】 : 是否顶部停留 【bool】\n【snap】 : 是否半收展 【bool】\n【bottom】 : 底部组件 【PreferredSizeWidget】\n【expandedHeight】 : 延展高度 【double】\n【elevation】 : 影深 【double】\n【flexibleSpace】 : 延展空间 【FlexibleSpaceBar】\n【backgroundColor】 : 背景色 【Color】\n【controller】 : 控制器 【ScrollController】\n snap为true时必需floating为true","code":"import 'package:flutter/material.dart';\nclass SliverAppBarDemo extends StatefulWidget {\n @override\n _SliverAppBarDemoState createState() => _SliverAppBarDemoState();\n}\n\nclass _SliverAppBarDemoState extends State {\n bool _floating = false;\n bool _pinned = false;\n bool _snap = false;\n\n final data = [\n Colors.purple[50],\n Colors.purple[100],\n Colors.purple[200],\n Colors.purple[300],\n Colors.purple[400],\n Colors.purple[500],\n Colors.purple[600],\n Colors.purple[700],\n Colors.purple[800],\n Colors.purple[900],\n ];\n\n @override\n Widget build(BuildContext context) {\n return Column(\n children: [\n _buildTool(),\n Container(\n height: 300,\n child: CustomScrollView(\n slivers: [\n _buildSliverAppBar(),\n _buildSliverFixedExtentList()\n ],\n ),\n ),\n ],\n );\n }\n\n Widget _buildSliverAppBar() {\n print(_floating);\n return SliverAppBar(\n expandedHeight: 190.0,\n leading: _buildLeading(),\n title: Text('张风捷特烈'),\n actions: _buildActions(),\n elevation: 5,\n floating: _floating,\n pinned: _pinned,\n snap: _snap,\n backgroundColor: Colors.orange,\n flexibleSpace: FlexibleSpaceBar(//伸展处布局\n titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距\n collapseMode: CollapseMode.parallax, //视差效果\n background: Image.asset(\n \"assets/images/caver.jpeg\",\n fit: BoxFit.cover,\n ),\n ),\n );\n }\n\n Widget _buildLeading() => Container(\n margin: EdgeInsets.all(10),\n child: Image.asset('assets/images/icon_head.png'));\n\n List _buildActions() => [\n IconButton(\n onPressed: () {},\n icon: Icon(\n Icons.star_border,\n color: Colors.white,\n ),\n )\n ];\n\n Widget _buildSliverFixedExtentList() => SliverFixedExtentList(\n itemExtent: 60,\n delegate: SliverChildBuilderDelegate(\n (_, int index) => Container(\n alignment: Alignment.center,\n width: 100,\n height: 50,\n color: data[index],\n child: Text(\n colorString(data[index]),\n style: TextStyle(color: Colors.white, shadows: [\n Shadow(\n color: Colors.black,\n offset: Offset(.5, .5),\n blurRadius: 2)\n ]),\n ),\n ),\n childCount: data.length),\n );\n\n String colorString(Color color) =>\n \"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}\";\n\n Widget _buildTool() {\n return Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: