├── .gitignore ├── .metadata ├── README.md ├── android ├── app │ ├── build.gradle │ └── src │ │ ├── debug │ │ └── AndroidManifest.xml │ │ ├── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ │ └── com │ │ │ │ └── sk │ │ │ │ └── flutter_training_app │ │ │ │ └── MainActivity.java │ │ └── res │ │ │ ├── drawable │ │ │ └── launch_background.xml │ │ │ ├── mipmap-hdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ └── ic_launcher.png │ │ │ └── values │ │ │ └── styles.xml │ │ └── profile │ │ └── AndroidManifest.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ └── gradle-wrapper.properties └── settings.gradle ├── assets ├── fonts │ ├── AntdIcons.ttf │ ├── Farrington-7B.ttf │ └── IconFont.ttf └── pics │ └── bank_zs.png ├── ios ├── Flutter │ ├── AppFrameworkInfo.plist │ ├── Debug.xcconfig │ └── Release.xcconfig ├── Runner.xcodeproj │ ├── project.pbxproj │ ├── project.xcworkspace │ │ └── contents.xcworkspacedata │ └── xcshareddata │ │ └── xcschemes │ │ └── Runner.xcscheme ├── Runner.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── WorkspaceSettings.xcsettings └── Runner │ ├── AppDelegate.swift │ ├── Assets.xcassets │ ├── AppIcon.appiconset │ │ ├── Contents.json │ │ ├── Icon-App-1024x1024@1x.png │ │ ├── Icon-App-20x20@1x.png │ │ ├── Icon-App-20x20@2x.png │ │ ├── Icon-App-20x20@3x.png │ │ ├── Icon-App-29x29@1x.png │ │ ├── Icon-App-29x29@2x.png │ │ ├── Icon-App-29x29@3x.png │ │ ├── Icon-App-40x40@1x.png │ │ ├── Icon-App-40x40@2x.png │ │ ├── Icon-App-40x40@3x.png │ │ ├── Icon-App-60x60@2x.png │ │ ├── Icon-App-60x60@3x.png │ │ ├── Icon-App-76x76@1x.png │ │ ├── Icon-App-76x76@2x.png │ │ └── Icon-App-83.5x83.5@2x.png │ └── LaunchImage.imageset │ │ ├── Contents.json │ │ ├── LaunchImage.png │ │ ├── LaunchImage@2x.png │ │ ├── LaunchImage@3x.png │ │ └── README.md │ ├── Base.lproj │ ├── LaunchScreen.storyboard │ └── Main.storyboard │ ├── Info.plist │ └── Runner-Bridging-Header.h ├── lib ├── basic_widgets │ ├── README.md │ ├── credit_card.dart │ ├── friend_circle.dart │ ├── index.dart │ ├── mock_data.dart │ ├── pet_card.dart │ └── screen_shots │ │ ├── credit_card.png │ │ ├── friend_circle.png │ │ └── pet_card.png ├── common │ ├── custom_icons.dart │ └── demo_tabs.dart ├── custom_icon │ ├── README.md │ ├── antd_icons.dart │ ├── index.dart │ ├── mock_data.dart │ └── screen_shots │ │ └── antd_icons.png ├── grid_view │ ├── README.md │ ├── color_grids.dart │ ├── guess_like_list.dart │ ├── index.dart │ ├── mock_data.dart │ ├── programme.dart │ ├── screen_shots │ │ ├── color_grids.png │ │ ├── programme_list.png │ │ └── service_categories.png │ ├── service_categories.dart │ └── service_item.dart ├── list_view │ ├── README.md │ ├── builder_usage.dart │ ├── friend_card.dart │ ├── index.dart │ ├── mock_data.dart │ ├── news_card.dart │ ├── normal_usage.dart │ ├── pull_down_refresh_usage.dart │ ├── pull_up_load_more_usage.dart │ ├── screen_shots │ │ ├── builder_usage.gif │ │ ├── normal_usage.gif │ │ ├── pull_down_refresh_usage.gif │ │ ├── pull_up_load_more_usage.gif │ │ └── separated_usage.gif │ ├── separated_usage.dart │ └── subscribe_account_card.dart ├── main.dart └── sliver_widgets │ ├── README.md │ ├── basic_usage.dart │ ├── custom_sliver_header_usage.dart │ ├── float_usage.dart │ ├── index.dart │ ├── pinned_usage.dart │ ├── screen_shots │ ├── custom-sliver-header.gif │ ├── sliverAppBar-float.gif │ ├── sliverAppBar-pinned.gif │ ├── sliverAppBar-snap.gif │ ├── sliverList-sliverGrid.gif │ └── sticky-tabBar.gif │ ├── snap_usage.dart │ └── sticky_usage.dart ├── pubspec.lock └── pubspec.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # Visual Studio Code related 19 | .vscode/ 20 | 21 | # Flutter/Dart/Pub related 22 | **/doc/api/ 23 | .dart_tool/ 24 | .flutter-plugins 25 | .packages 26 | .pub-cache/ 27 | .pub/ 28 | /build/ 29 | 30 | # Android related 31 | **/android/**/gradle-wrapper.jar 32 | **/android/.gradle 33 | **/android/captures/ 34 | **/android/gradlew 35 | **/android/gradlew.bat 36 | **/android/local.properties 37 | **/android/**/GeneratedPluginRegistrant.java 38 | 39 | # iOS/XCode related 40 | **/ios/**/*.mode1v3 41 | **/ios/**/*.mode2v3 42 | **/ios/**/*.moved-aside 43 | **/ios/**/*.pbxuser 44 | **/ios/**/*.perspectivev3 45 | **/ios/**/*sync/ 46 | **/ios/**/.sconsign.dblite 47 | **/ios/**/.tags* 48 | **/ios/**/.vagrant/ 49 | **/ios/**/DerivedData/ 50 | **/ios/**/Icon? 51 | **/ios/**/Pods/ 52 | **/ios/**/.symlinks/ 53 | **/ios/**/profile 54 | **/ios/**/xcuserdata 55 | **/ios/.generated/ 56 | **/ios/Flutter/App.framework 57 | **/ios/Flutter/Flutter.framework 58 | **/ios/Flutter/Generated.xcconfig 59 | **/ios/Flutter/app.flx 60 | **/ios/Flutter/app.zip 61 | **/ios/Flutter/flutter_assets/ 62 | **/ios/ServiceDefinitions.json 63 | **/ios/Runner/GeneratedPluginRegistrant.* 64 | 65 | # Exceptions to above rules. 66 | !**/ios/**/default.mode1v3 67 | !**/ios/**/default.mode2v3 68 | !**/ios/**/default.pbxuser 69 | !**/ios/**/default.perspectivev3 70 | !/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages 71 | -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: 7a4c33425ddd78c54aba07d86f3f9a4a0051769b 8 | channel: stable 9 | 10 | project_type: app 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flutter_training_app 2 | 3 | Flutter练习，欢迎Star，一起学习~ 4 | 5 | ## 文章 6 | 7 | - [用Flutter构建漂亮的UI界面 - 基础组件篇](https://github.com/SmallStoneSK/Blog/issues/12) 8 | - [Flutter滚动型容器组件 - ListView篇](https://github.com/SmallStoneSK/Blog/issues/13) 9 | - [Flutter网格型布局 - GridView篇](https://github.com/SmallStoneSK/Blog/issues/15) 10 | - [在Flutter中使用自定义Icon](https://github.com/SmallStoneSK/Blog/issues/14) 11 | - [在Flutter中创建有意思的滚动效果 - Sliver系列](https://github.com/SmallStoneSK/Blog/issues/18) 12 | 13 | ## 预览 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | def localProperties = new Properties() 2 | def localPropertiesFile = rootProject.file('local.properties') 3 | if (localPropertiesFile.exists()) { 4 | localPropertiesFile.withReader('UTF-8') { reader -> 5 | localProperties.load(reader) 6 | } 7 | } 8 | 9 | def flutterRoot = localProperties.getProperty('flutter.sdk') 10 | if (flutterRoot == null) { 11 | throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") 12 | } 13 | 14 | def flutterVersionCode = localProperties.getProperty('flutter.versionCode') 15 | if (flutterVersionCode == null) { 16 | flutterVersionCode = '1' 17 | } 18 | 19 | def flutterVersionName = localProperties.getProperty('flutter.versionName') 20 | if (flutterVersionName == null) { 21 | flutterVersionName = '1.0' 22 | } 23 | 24 | apply plugin: 'com.android.application' 25 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 26 | 27 | android { 28 | compileSdkVersion 28 29 | 30 | lintOptions { 31 | disable 'InvalidPackage' 32 | } 33 | 34 | defaultConfig { 35 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 36 | applicationId "com.sk.flutter_training_app" 37 | minSdkVersion 16 38 | targetSdkVersion 28 39 | versionCode flutterVersionCode.toInteger() 40 | versionName flutterVersionName 41 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 42 | } 43 | 44 | buildTypes { 45 | release { 46 | // TODO: Add your own signing config for the release build. 47 | // Signing with the debug keys for now, so `flutter run --release` works. 48 | signingConfig signingConfigs.debug 49 | } 50 | } 51 | } 52 | 53 | flutter { 54 | source '../..' 55 | } 56 | 57 | dependencies { 58 | testImplementation 'junit:junit:4.12' 59 | androidTestImplementation 'com.android.support.test:runner:1.0.2' 60 | androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' 61 | } 62 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 9 | 13 | 20 | 24 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/sk/flutter_training_app/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.sk.flutter_training_app; 2 | 3 | import android.os.Bundle; 4 | import io.flutter.app.FlutterActivity; 5 | import io.flutter.plugins.GeneratedPluginRegistrant; 6 | 7 | public class MainActivity extends FlutterActivity { 8 | @Override 9 | protected void onCreate(Bundle savedInstanceState) { 10 | super.onCreate(savedInstanceState); 11 | GeneratedPluginRegistrant.registerWith(this); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | -------------------------------------------------------------------------------- /android/app/src/profile/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | google() 4 | jcenter() 5 | } 6 | 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:3.2.1' 9 | } 10 | } 11 | 12 | allprojects { 13 | repositories { 14 | google() 15 | jcenter() 16 | } 17 | } 18 | 19 | rootProject.buildDir = '../build' 20 | subprojects { 21 | project.buildDir = "${rootProject.buildDir}/${project.name}" 22 | } 23 | subprojects { 24 | project.evaluationDependsOn(':app') 25 | } 26 | 27 | task clean(type: Delete) { 28 | delete rootProject.buildDir 29 | } 30 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | org.gradle.jvmargs=-Xmx1536M 2 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Jun 23 08:50:38 CEST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip 7 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | 3 | def flutterProjectRoot = rootProject.projectDir.parentFile.toPath() 4 | 5 | def plugins = new Properties() 6 | def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins') 7 | if (pluginsFile.exists()) { 8 | pluginsFile.withReader('UTF-8') { reader -> plugins.load(reader) } 9 | } 10 | 11 | plugins.each { name, path -> 12 | def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile() 13 | include ":$name" 14 | project(":$name").projectDir = pluginDirectory 15 | } 16 | -------------------------------------------------------------------------------- /assets/fonts/AntdIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/assets/fonts/AntdIcons.ttf -------------------------------------------------------------------------------- /assets/fonts/Farrington-7B.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/assets/fonts/Farrington-7B.ttf -------------------------------------------------------------------------------- /assets/fonts/IconFont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/assets/fonts/IconFont.ttf -------------------------------------------------------------------------------- /assets/pics/bank_zs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/assets/pics/bank_zs.png -------------------------------------------------------------------------------- /ios/Flutter/AppFrameworkInfo.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | App 9 | CFBundleIdentifier 10 | io.flutter.flutter.app 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | App 15 | CFBundlePackageType 16 | FMWK 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | MinimumOSVersion 24 | 8.0 25 | 26 | 27 | -------------------------------------------------------------------------------- /ios/Flutter/Debug.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /ios/Flutter/Release.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; }; 11 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; }; 12 | 3B80C3941E831B6300D905FE /* App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; }; 13 | 3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 3B80C3931E831B6300D905FE /* App.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; }; 14 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; }; 15 | 9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; }; 16 | 9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 9740EEBA1CF902C7004384FC /* Flutter.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; }; 17 | 9740EEB41CF90195004384FC /* Debug.xcconfig in Resources */ = {isa = PBXBuildFile; fileRef = 9740EEB21CF90195004384FC /* Debug.xcconfig */; }; 18 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; }; 19 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; }; 20 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; }; 21 | /* End PBXBuildFile section */ 22 | 23 | /* Begin PBXCopyFilesBuildPhase section */ 24 | 9705A1C41CF9048500538489 /* Embed Frameworks */ = { 25 | isa = PBXCopyFilesBuildPhase; 26 | buildActionMask = 2147483647; 27 | dstPath = ""; 28 | dstSubfolderSpec = 10; 29 | files = ( 30 | 3B80C3951E831B6300D905FE /* App.framework in Embed Frameworks */, 31 | 9705A1C71CF904A300538489 /* Flutter.framework in Embed Frameworks */, 32 | ); 33 | name = "Embed Frameworks"; 34 | runOnlyForDeploymentPostprocessing = 0; 35 | }; 36 | /* End PBXCopyFilesBuildPhase section */ 37 | 38 | /* Begin PBXFileReference section */ 39 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; }; 40 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; }; 41 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; }; 42 | 3B80C3931E831B6300D905FE /* App.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = App.framework; path = Flutter/App.framework; sourceTree = ""; }; 43 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = ""; }; 44 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 45 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; }; 46 | 9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = ""; }; 47 | 9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = ""; }; 48 | 9740EEBA1CF902C7004384FC /* Flutter.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Flutter.framework; path = Flutter/Flutter.framework; sourceTree = ""; }; 49 | 97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; }; 50 | 97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; }; 51 | 97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 52 | 97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; 53 | 97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 54 | /* End PBXFileReference section */ 55 | 56 | /* Begin PBXFrameworksBuildPhase section */ 57 | 97C146EB1CF9000F007C117D /* Frameworks */ = { 58 | isa = PBXFrameworksBuildPhase; 59 | buildActionMask = 2147483647; 60 | files = ( 61 | 9705A1C61CF904A100538489 /* Flutter.framework in Frameworks */, 62 | 3B80C3941E831B6300D905FE /* App.framework in Frameworks */, 63 | ); 64 | runOnlyForDeploymentPostprocessing = 0; 65 | }; 66 | /* End PBXFrameworksBuildPhase section */ 67 | 68 | /* Begin PBXGroup section */ 69 | 9740EEB11CF90186004384FC /* Flutter */ = { 70 | isa = PBXGroup; 71 | children = ( 72 | 3B80C3931E831B6300D905FE /* App.framework */, 73 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */, 74 | 9740EEBA1CF902C7004384FC /* Flutter.framework */, 75 | 9740EEB21CF90195004384FC /* Debug.xcconfig */, 76 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, 77 | 9740EEB31CF90195004384FC /* Generated.xcconfig */, 78 | ); 79 | name = Flutter; 80 | sourceTree = ""; 81 | }; 82 | 97C146E51CF9000F007C117D = { 83 | isa = PBXGroup; 84 | children = ( 85 | 9740EEB11CF90186004384FC /* Flutter */, 86 | 97C146F01CF9000F007C117D /* Runner */, 87 | 97C146EF1CF9000F007C117D /* Products */, 88 | ); 89 | sourceTree = ""; 90 | }; 91 | 97C146EF1CF9000F007C117D /* Products */ = { 92 | isa = PBXGroup; 93 | children = ( 94 | 97C146EE1CF9000F007C117D /* Runner.app */, 95 | ); 96 | name = Products; 97 | sourceTree = ""; 98 | }; 99 | 97C146F01CF9000F007C117D /* Runner */ = { 100 | isa = PBXGroup; 101 | children = ( 102 | 97C146FA1CF9000F007C117D /* Main.storyboard */, 103 | 97C146FD1CF9000F007C117D /* Assets.xcassets */, 104 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */, 105 | 97C147021CF9000F007C117D /* Info.plist */, 106 | 97C146F11CF9000F007C117D /* Supporting Files */, 107 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */, 108 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */, 109 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */, 110 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */, 111 | ); 112 | path = Runner; 113 | sourceTree = ""; 114 | }; 115 | 97C146F11CF9000F007C117D /* Supporting Files */ = { 116 | isa = PBXGroup; 117 | children = ( 118 | ); 119 | name = "Supporting Files"; 120 | sourceTree = ""; 121 | }; 122 | /* End PBXGroup section */ 123 | 124 | /* Begin PBXNativeTarget section */ 125 | 97C146ED1CF9000F007C117D /* Runner */ = { 126 | isa = PBXNativeTarget; 127 | buildConfigurationList = 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */; 128 | buildPhases = ( 129 | 9740EEB61CF901F6004384FC /* Run Script */, 130 | 97C146EA1CF9000F007C117D /* Sources */, 131 | 97C146EB1CF9000F007C117D /* Frameworks */, 132 | 97C146EC1CF9000F007C117D /* Resources */, 133 | 9705A1C41CF9048500538489 /* Embed Frameworks */, 134 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */, 135 | ); 136 | buildRules = ( 137 | ); 138 | dependencies = ( 139 | ); 140 | name = Runner; 141 | productName = Runner; 142 | productReference = 97C146EE1CF9000F007C117D /* Runner.app */; 143 | productType = "com.apple.product-type.application"; 144 | }; 145 | /* End PBXNativeTarget section */ 146 | 147 | /* Begin PBXProject section */ 148 | 97C146E61CF9000F007C117D /* Project object */ = { 149 | isa = PBXProject; 150 | attributes = { 151 | LastUpgradeCheck = 0910; 152 | ORGANIZATIONNAME = "The Chromium Authors"; 153 | TargetAttributes = { 154 | 97C146ED1CF9000F007C117D = { 155 | CreatedOnToolsVersion = 7.3.1; 156 | LastSwiftMigration = 0910; 157 | }; 158 | }; 159 | }; 160 | buildConfigurationList = 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */; 161 | compatibilityVersion = "Xcode 3.2"; 162 | developmentRegion = English; 163 | hasScannedForEncodings = 0; 164 | knownRegions = ( 165 | en, 166 | Base, 167 | ); 168 | mainGroup = 97C146E51CF9000F007C117D; 169 | productRefGroup = 97C146EF1CF9000F007C117D /* Products */; 170 | projectDirPath = ""; 171 | projectRoot = ""; 172 | targets = ( 173 | 97C146ED1CF9000F007C117D /* Runner */, 174 | ); 175 | }; 176 | /* End PBXProject section */ 177 | 178 | /* Begin PBXResourcesBuildPhase section */ 179 | 97C146EC1CF9000F007C117D /* Resources */ = { 180 | isa = PBXResourcesBuildPhase; 181 | buildActionMask = 2147483647; 182 | files = ( 183 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */, 184 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */, 185 | 9740EEB41CF90195004384FC /* Debug.xcconfig in Resources */, 186 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */, 187 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */, 188 | ); 189 | runOnlyForDeploymentPostprocessing = 0; 190 | }; 191 | /* End PBXResourcesBuildPhase section */ 192 | 193 | /* Begin PBXShellScriptBuildPhase section */ 194 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */ = { 195 | isa = PBXShellScriptBuildPhase; 196 | buildActionMask = 2147483647; 197 | files = ( 198 | ); 199 | inputPaths = ( 200 | ); 201 | name = "Thin Binary"; 202 | outputPaths = ( 203 | ); 204 | runOnlyForDeploymentPostprocessing = 0; 205 | shellPath = /bin/sh; 206 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" thin"; 207 | }; 208 | 9740EEB61CF901F6004384FC /* Run Script */ = { 209 | isa = PBXShellScriptBuildPhase; 210 | buildActionMask = 2147483647; 211 | files = ( 212 | ); 213 | inputPaths = ( 214 | ); 215 | name = "Run Script"; 216 | outputPaths = ( 217 | ); 218 | runOnlyForDeploymentPostprocessing = 0; 219 | shellPath = /bin/sh; 220 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" build"; 221 | }; 222 | /* End PBXShellScriptBuildPhase section */ 223 | 224 | /* Begin PBXSourcesBuildPhase section */ 225 | 97C146EA1CF9000F007C117D /* Sources */ = { 226 | isa = PBXSourcesBuildPhase; 227 | buildActionMask = 2147483647; 228 | files = ( 229 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */, 230 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */, 231 | ); 232 | runOnlyForDeploymentPostprocessing = 0; 233 | }; 234 | /* End PBXSourcesBuildPhase section */ 235 | 236 | /* Begin PBXVariantGroup section */ 237 | 97C146FA1CF9000F007C117D /* Main.storyboard */ = { 238 | isa = PBXVariantGroup; 239 | children = ( 240 | 97C146FB1CF9000F007C117D /* Base */, 241 | ); 242 | name = Main.storyboard; 243 | sourceTree = ""; 244 | }; 245 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */ = { 246 | isa = PBXVariantGroup; 247 | children = ( 248 | 97C147001CF9000F007C117D /* Base */, 249 | ); 250 | name = LaunchScreen.storyboard; 251 | sourceTree = ""; 252 | }; 253 | /* End PBXVariantGroup section */ 254 | 255 | /* Begin XCBuildConfiguration section */ 256 | 249021D3217E4FDB00AE95B9 /* Profile */ = { 257 | isa = XCBuildConfiguration; 258 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 259 | buildSettings = { 260 | ALWAYS_SEARCH_USER_PATHS = NO; 261 | CLANG_ANALYZER_NONNULL = YES; 262 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 263 | CLANG_CXX_LIBRARY = "libc++"; 264 | CLANG_ENABLE_MODULES = YES; 265 | CLANG_ENABLE_OBJC_ARC = YES; 266 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 267 | CLANG_WARN_BOOL_CONVERSION = YES; 268 | CLANG_WARN_COMMA = YES; 269 | CLANG_WARN_CONSTANT_CONVERSION = YES; 270 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 271 | CLANG_WARN_EMPTY_BODY = YES; 272 | CLANG_WARN_ENUM_CONVERSION = YES; 273 | CLANG_WARN_INFINITE_RECURSION = YES; 274 | CLANG_WARN_INT_CONVERSION = YES; 275 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 276 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 277 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 278 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 279 | CLANG_WARN_STRICT_PROTOTYPES = YES; 280 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 281 | CLANG_WARN_UNREACHABLE_CODE = YES; 282 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 283 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 284 | COPY_PHASE_STRIP = NO; 285 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 286 | ENABLE_NS_ASSERTIONS = NO; 287 | ENABLE_STRICT_OBJC_MSGSEND = YES; 288 | GCC_C_LANGUAGE_STANDARD = gnu99; 289 | GCC_NO_COMMON_BLOCKS = YES; 290 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 291 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 292 | GCC_WARN_UNDECLARED_SELECTOR = YES; 293 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 294 | GCC_WARN_UNUSED_FUNCTION = YES; 295 | GCC_WARN_UNUSED_VARIABLE = YES; 296 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 297 | MTL_ENABLE_DEBUG_INFO = NO; 298 | SDKROOT = iphoneos; 299 | TARGETED_DEVICE_FAMILY = "1,2"; 300 | VALIDATE_PRODUCT = YES; 301 | }; 302 | name = Profile; 303 | }; 304 | 249021D4217E4FDB00AE95B9 /* Profile */ = { 305 | isa = XCBuildConfiguration; 306 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 307 | buildSettings = { 308 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 309 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 310 | DEVELOPMENT_TEAM = S8QB4VV633; 311 | ENABLE_BITCODE = NO; 312 | FRAMEWORK_SEARCH_PATHS = ( 313 | "$(inherited)", 314 | "$(PROJECT_DIR)/Flutter", 315 | ); 316 | INFOPLIST_FILE = Runner/Info.plist; 317 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 318 | LIBRARY_SEARCH_PATHS = ( 319 | "$(inherited)", 320 | "$(PROJECT_DIR)/Flutter", 321 | ); 322 | PRODUCT_BUNDLE_IDENTIFIER = com.sk.flutterTrainingApp; 323 | PRODUCT_NAME = "$(TARGET_NAME)"; 324 | SWIFT_VERSION = 4.0; 325 | VERSIONING_SYSTEM = "apple-generic"; 326 | }; 327 | name = Profile; 328 | }; 329 | 97C147031CF9000F007C117D /* Debug */ = { 330 | isa = XCBuildConfiguration; 331 | baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */; 332 | buildSettings = { 333 | ALWAYS_SEARCH_USER_PATHS = NO; 334 | CLANG_ANALYZER_NONNULL = YES; 335 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 336 | CLANG_CXX_LIBRARY = "libc++"; 337 | CLANG_ENABLE_MODULES = YES; 338 | CLANG_ENABLE_OBJC_ARC = YES; 339 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 340 | CLANG_WARN_BOOL_CONVERSION = YES; 341 | CLANG_WARN_COMMA = YES; 342 | CLANG_WARN_CONSTANT_CONVERSION = YES; 343 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 344 | CLANG_WARN_EMPTY_BODY = YES; 345 | CLANG_WARN_ENUM_CONVERSION = YES; 346 | CLANG_WARN_INFINITE_RECURSION = YES; 347 | CLANG_WARN_INT_CONVERSION = YES; 348 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 349 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 350 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 351 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 352 | CLANG_WARN_STRICT_PROTOTYPES = YES; 353 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 354 | CLANG_WARN_UNREACHABLE_CODE = YES; 355 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 356 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 357 | COPY_PHASE_STRIP = NO; 358 | DEBUG_INFORMATION_FORMAT = dwarf; 359 | ENABLE_STRICT_OBJC_MSGSEND = YES; 360 | ENABLE_TESTABILITY = YES; 361 | GCC_C_LANGUAGE_STANDARD = gnu99; 362 | GCC_DYNAMIC_NO_PIC = NO; 363 | GCC_NO_COMMON_BLOCKS = YES; 364 | GCC_OPTIMIZATION_LEVEL = 0; 365 | GCC_PREPROCESSOR_DEFINITIONS = ( 366 | "DEBUG=1", 367 | "$(inherited)", 368 | ); 369 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 370 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 371 | GCC_WARN_UNDECLARED_SELECTOR = YES; 372 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 373 | GCC_WARN_UNUSED_FUNCTION = YES; 374 | GCC_WARN_UNUSED_VARIABLE = YES; 375 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 376 | MTL_ENABLE_DEBUG_INFO = YES; 377 | ONLY_ACTIVE_ARCH = YES; 378 | SDKROOT = iphoneos; 379 | TARGETED_DEVICE_FAMILY = "1,2"; 380 | }; 381 | name = Debug; 382 | }; 383 | 97C147041CF9000F007C117D /* Release */ = { 384 | isa = XCBuildConfiguration; 385 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 386 | buildSettings = { 387 | ALWAYS_SEARCH_USER_PATHS = NO; 388 | CLANG_ANALYZER_NONNULL = YES; 389 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 390 | CLANG_CXX_LIBRARY = "libc++"; 391 | CLANG_ENABLE_MODULES = YES; 392 | CLANG_ENABLE_OBJC_ARC = YES; 393 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 394 | CLANG_WARN_BOOL_CONVERSION = YES; 395 | CLANG_WARN_COMMA = YES; 396 | CLANG_WARN_CONSTANT_CONVERSION = YES; 397 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 398 | CLANG_WARN_EMPTY_BODY = YES; 399 | CLANG_WARN_ENUM_CONVERSION = YES; 400 | CLANG_WARN_INFINITE_RECURSION = YES; 401 | CLANG_WARN_INT_CONVERSION = YES; 402 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 403 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 404 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 405 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 406 | CLANG_WARN_STRICT_PROTOTYPES = YES; 407 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 408 | CLANG_WARN_UNREACHABLE_CODE = YES; 409 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 410 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 411 | COPY_PHASE_STRIP = NO; 412 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 413 | ENABLE_NS_ASSERTIONS = NO; 414 | ENABLE_STRICT_OBJC_MSGSEND = YES; 415 | GCC_C_LANGUAGE_STANDARD = gnu99; 416 | GCC_NO_COMMON_BLOCKS = YES; 417 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 418 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 419 | GCC_WARN_UNDECLARED_SELECTOR = YES; 420 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 421 | GCC_WARN_UNUSED_FUNCTION = YES; 422 | GCC_WARN_UNUSED_VARIABLE = YES; 423 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 424 | MTL_ENABLE_DEBUG_INFO = NO; 425 | SDKROOT = iphoneos; 426 | SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule"; 427 | TARGETED_DEVICE_FAMILY = "1,2"; 428 | VALIDATE_PRODUCT = YES; 429 | }; 430 | name = Release; 431 | }; 432 | 97C147061CF9000F007C117D /* Debug */ = { 433 | isa = XCBuildConfiguration; 434 | baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */; 435 | buildSettings = { 436 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 437 | CLANG_ENABLE_MODULES = YES; 438 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 439 | ENABLE_BITCODE = NO; 440 | FRAMEWORK_SEARCH_PATHS = ( 441 | "$(inherited)", 442 | "$(PROJECT_DIR)/Flutter", 443 | ); 444 | INFOPLIST_FILE = Runner/Info.plist; 445 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 446 | LIBRARY_SEARCH_PATHS = ( 447 | "$(inherited)", 448 | "$(PROJECT_DIR)/Flutter", 449 | ); 450 | PRODUCT_BUNDLE_IDENTIFIER = com.sk.flutterTrainingApp; 451 | PRODUCT_NAME = "$(TARGET_NAME)"; 452 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 453 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 454 | SWIFT_SWIFT3_OBJC_INFERENCE = On; 455 | SWIFT_VERSION = 4.0; 456 | VERSIONING_SYSTEM = "apple-generic"; 457 | }; 458 | name = Debug; 459 | }; 460 | 97C147071CF9000F007C117D /* Release */ = { 461 | isa = XCBuildConfiguration; 462 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 463 | buildSettings = { 464 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 465 | CLANG_ENABLE_MODULES = YES; 466 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 467 | ENABLE_BITCODE = NO; 468 | FRAMEWORK_SEARCH_PATHS = ( 469 | "$(inherited)", 470 | "$(PROJECT_DIR)/Flutter", 471 | ); 472 | INFOPLIST_FILE = Runner/Info.plist; 473 | LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks"; 474 | LIBRARY_SEARCH_PATHS = ( 475 | "$(inherited)", 476 | "$(PROJECT_DIR)/Flutter", 477 | ); 478 | PRODUCT_BUNDLE_IDENTIFIER = com.sk.flutterTrainingApp; 479 | PRODUCT_NAME = "$(TARGET_NAME)"; 480 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 481 | SWIFT_SWIFT3_OBJC_INFERENCE = On; 482 | SWIFT_VERSION = 4.0; 483 | VERSIONING_SYSTEM = "apple-generic"; 484 | }; 485 | name = Release; 486 | }; 487 | /* End XCBuildConfiguration section */ 488 | 489 | /* Begin XCConfigurationList section */ 490 | 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */ = { 491 | isa = XCConfigurationList; 492 | buildConfigurations = ( 493 | 97C147031CF9000F007C117D /* Debug */, 494 | 97C147041CF9000F007C117D /* Release */, 495 | 249021D3217E4FDB00AE95B9 /* Profile */, 496 | ); 497 | defaultConfigurationIsVisible = 0; 498 | defaultConfigurationName = Release; 499 | }; 500 | 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */ = { 501 | isa = XCConfigurationList; 502 | buildConfigurations = ( 503 | 97C147061CF9000F007C117D /* Debug */, 504 | 97C147071CF9000F007C117D /* Release */, 505 | 249021D4217E4FDB00AE95B9 /* Profile */, 506 | ); 507 | defaultConfigurationIsVisible = 0; 508 | defaultConfigurationName = Release; 509 | }; 510 | /* End XCConfigurationList section */ 511 | 512 | }; 513 | rootObject = 97C146E61CF9000F007C117D /* Project object */; 514 | } 515 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 31 | 32 | 33 | 34 | 40 | 41 | 42 | 43 | 44 | 45 | 56 | 58 | 64 | 65 | 66 | 67 | 68 | 69 | 75 | 77 | 83 | 84 | 85 | 86 | 88 | 89 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BuildSystemType 6 | Original 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/Runner/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import Flutter 3 | 4 | @UIApplicationMain 5 | @objc class AppDelegate: FlutterAppDelegate { 6 | override func application( 7 | _ application: UIApplication, 8 | didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]? 9 | ) -> Bool { 10 | GeneratedPluginRegistrant.register(with: self) 11 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "20x20", 5 | "idiom" : "iphone", 6 | "filename" : "Icon-App-20x20@2x.png", 7 | "scale" : "2x" 8 | }, 9 | { 10 | "size" : "20x20", 11 | "idiom" : "iphone", 12 | "filename" : "Icon-App-20x20@3x.png", 13 | "scale" : "3x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "Icon-App-29x29@1x.png", 19 | "scale" : "1x" 20 | }, 21 | { 22 | "size" : "29x29", 23 | "idiom" : "iphone", 24 | "filename" : "Icon-App-29x29@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "29x29", 29 | "idiom" : "iphone", 30 | "filename" : "Icon-App-29x29@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "40x40", 35 | "idiom" : "iphone", 36 | "filename" : "Icon-App-40x40@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "40x40", 41 | "idiom" : "iphone", 42 | "filename" : "Icon-App-40x40@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "60x60", 47 | "idiom" : "iphone", 48 | "filename" : "Icon-App-60x60@2x.png", 49 | "scale" : "2x" 50 | }, 51 | { 52 | "size" : "60x60", 53 | "idiom" : "iphone", 54 | "filename" : "Icon-App-60x60@3x.png", 55 | "scale" : "3x" 56 | }, 57 | { 58 | "size" : "20x20", 59 | "idiom" : "ipad", 60 | "filename" : "Icon-App-20x20@1x.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "20x20", 65 | "idiom" : "ipad", 66 | "filename" : "Icon-App-20x20@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "29x29", 71 | "idiom" : "ipad", 72 | "filename" : "Icon-App-29x29@1x.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "29x29", 77 | "idiom" : "ipad", 78 | "filename" : "Icon-App-29x29@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "40x40", 83 | "idiom" : "ipad", 84 | "filename" : "Icon-App-40x40@1x.png", 85 | "scale" : "1x" 86 | }, 87 | { 88 | "size" : "40x40", 89 | "idiom" : "ipad", 90 | "filename" : "Icon-App-40x40@2x.png", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "size" : "76x76", 95 | "idiom" : "ipad", 96 | "filename" : "Icon-App-76x76@1x.png", 97 | "scale" : "1x" 98 | }, 99 | { 100 | "size" : "76x76", 101 | "idiom" : "ipad", 102 | "filename" : "Icon-App-76x76@2x.png", 103 | "scale" : "2x" 104 | }, 105 | { 106 | "size" : "83.5x83.5", 107 | "idiom" : "ipad", 108 | "filename" : "Icon-App-83.5x83.5@2x.png", 109 | "scale" : "2x" 110 | }, 111 | { 112 | "size" : "1024x1024", 113 | "idiom" : "ios-marketing", 114 | "filename" : "Icon-App-1024x1024@1x.png", 115 | "scale" : "1x" 116 | } 117 | ], 118 | "info" : { 119 | "version" : 1, 120 | "author" : "xcode" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchImage.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchImage@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchImage@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md: -------------------------------------------------------------------------------- 1 | # Launch Screen Assets 2 | 3 | You can customize the launch screen with your own desired assets by replacing the image files in this directory. 4 | 5 | You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images. -------------------------------------------------------------------------------- /ios/Runner/Base.lproj/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /ios/Runner/Base.lproj/Main.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /ios/Runner/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | flutter_training_app 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | $(FLUTTER_BUILD_NAME) 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | $(FLUTTER_BUILD_NUMBER) 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIMainStoryboardFile 28 | Main 29 | UISupportedInterfaceOrientations 30 | 31 | UIInterfaceOrientationPortrait 32 | UIInterfaceOrientationLandscapeLeft 33 | UIInterfaceOrientationLandscapeRight 34 | 35 | UISupportedInterfaceOrientations~ipad 36 | 37 | UIInterfaceOrientationPortrait 38 | UIInterfaceOrientationPortraitUpsideDown 39 | UIInterfaceOrientationLandscapeLeft 40 | UIInterfaceOrientationLandscapeRight 41 | 42 | UIViewControllerBasedStatusBarAppearance 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /ios/Runner/Runner-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | #import "GeneratedPluginRegistrant.h" -------------------------------------------------------------------------------- /lib/basic_widgets/README.md: -------------------------------------------------------------------------------- 1 | # 基础组件 - 示例 2 | 3 | |1. [宠物卡片](./pet_card.dart)|2. [银行卡](./credit_card.dart)|3. [朋友圈](./friend_circle.dart)| 4 | |----|---|---| 5 | |||| 6 | -------------------------------------------------------------------------------- /lib/basic_widgets/credit_card.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class CreditCard extends StatelessWidget { 4 | final CreditCardViewModel data; 5 | 6 | const CreditCard({Key key, this.data}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return Container( 11 | height: 180, 12 | margin: EdgeInsets.fromLTRB(16, 16, 16, 0), 13 | padding: EdgeInsets.only(left: 20, top: 20), 14 | decoration: BoxDecoration( 15 | gradient: LinearGradient( 16 | begin: Alignment.topLeft, 17 | end: Alignment.bottomRight, 18 | colors: this.data.cardColors, 19 | ), 20 | borderRadius: BorderRadius.circular(8), 21 | boxShadow: [ 22 | BoxShadow( 23 | blurRadius: 6, 24 | spreadRadius: 4, 25 | color: Color.fromARGB(20, 0, 0, 0), 26 | ), 27 | ], 28 | ), 29 | child: Stack( 30 | children: [ 31 | Positioned( 32 | right: -100, 33 | bottom: -100, 34 | child: Image.asset( 35 | this.data.bankLogoUrl, 36 | width: 250, 37 | height: 250, 38 | color: Colors.white10, 39 | ), 40 | ), 41 | Positioned( 42 | left: 0, 43 | top: 0, 44 | right: 0, 45 | bottom: 0, 46 | child: Column( 47 | crossAxisAlignment: CrossAxisAlignment.start, 48 | children: [ 49 | Row( 50 | children: [ 51 | CircleAvatar( 52 | radius: 25, 53 | backgroundColor: Colors.white, 54 | child: Image.asset( 55 | this.data.bankLogoUrl, 56 | width: 36, 57 | height: 36, 58 | fit: BoxFit.scaleDown, 59 | ), 60 | ), 61 | Padding(padding: EdgeInsets.only(left: 15)), 62 | Column( 63 | crossAxisAlignment: CrossAxisAlignment.start, 64 | children: [ 65 | Text( 66 | this.data.bankName, 67 | style: TextStyle( 68 | fontSize: 19, 69 | fontWeight: FontWeight.bold, 70 | color: Colors.white, 71 | ), 72 | ), 73 | Text( 74 | this.data.cardType, 75 | style: TextStyle( 76 | fontSize: 14, 77 | color: Color.fromARGB(200, 255, 255, 255), 78 | ), 79 | ), 80 | ], 81 | ) 82 | ], 83 | ), 84 | Padding( 85 | padding: EdgeInsets.only(left: 65, top: 20), 86 | child: Text( 87 | this.data.cardNumber, 88 | style: TextStyle( 89 | fontSize: 16, 90 | fontFamily: 'Farrington', 91 | letterSpacing: 3, 92 | color: Colors.white, 93 | ), 94 | ), 95 | ), 96 | Padding( 97 | padding: EdgeInsets.only(left: 65, top: 15), 98 | child: Text( 99 | this.data.validDate, 100 | style: TextStyle( 101 | fontSize: 13, 102 | color: Colors.white, 103 | ), 104 | ), 105 | ), 106 | ], 107 | ), 108 | ), 109 | ], 110 | ), 111 | ); 112 | } 113 | } 114 | 115 | class CreditCardViewModel { 116 | /// 银行 117 | final String bankName; 118 | 119 | /// 银行Logo 120 | final String bankLogoUrl; 121 | 122 | /// 卡类型 123 | final String cardType; 124 | 125 | /// 卡号 126 | final String cardNumber; 127 | 128 | /// 卡片颜色 129 | final List cardColors; 130 | 131 | /// 有效期 132 | final String validDate; 133 | 134 | const CreditCardViewModel({ 135 | this.bankName, 136 | this.bankLogoUrl, 137 | this.cardType, 138 | this.cardNumber, 139 | this.cardColors, 140 | this.validDate, 141 | }); 142 | } 143 | -------------------------------------------------------------------------------- /lib/basic_widgets/friend_circle.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class FriendCircle extends StatelessWidget { 4 | final FriendCircleViewModel data; 5 | 6 | const FriendCircle({ 7 | Key key, 8 | this.data, 9 | }) : super(key: key); 10 | 11 | Widget renderComments() { 12 | return Container( 13 | margin: EdgeInsets.only(top: 10), 14 | padding: EdgeInsets.all(10), 15 | color: Color(0xFFF3F3F5), 16 | child: Column( 17 | crossAxisAlignment: CrossAxisAlignment.start, 18 | children: this.data.comments.map((comment) { 19 | return Text.rich( 20 | TextSpan( 21 | style: TextStyle( 22 | fontSize: 15, 23 | color: Color(0xFF333333), 24 | ), 25 | children: [ 26 | TextSpan( 27 | text: comment.fromUser, 28 | style: TextStyle( 29 | fontWeight: FontWeight.w500, 30 | color: Color(0xFF636F80), 31 | ), 32 | ), 33 | TextSpan(text: '：${comment.content}'), 34 | ]..insertAll(1, comment.source ? [TextSpan()] : [ 35 | TextSpan(text: ' 回复 '), 36 | TextSpan( 37 | text: comment.toUser, 38 | style: TextStyle( 39 | fontWeight: FontWeight.w500, 40 | color: Color(0xFF636F80), 41 | ), 42 | ), 43 | ], 44 | ), 45 | ), 46 | ); 47 | }).toList(), 48 | ), 49 | ); 50 | } 51 | 52 | @override 53 | Widget build(BuildContext context) { 54 | return Container( 55 | margin: EdgeInsets.only(top: 16), 56 | padding: EdgeInsets.symmetric(horizontal: 16), 57 | child: Row( 58 | crossAxisAlignment: CrossAxisAlignment.start, 59 | children: [ 60 | ClipRRect( 61 | borderRadius: BorderRadius.circular(6), 62 | child: Image.network( 63 | this.data.userImgUrl, 64 | width: 50, 65 | height: 50, 66 | ), 67 | ), 68 | Padding(padding: EdgeInsets.only(left: 12)), 69 | Expanded( 70 | child: Column( 71 | crossAxisAlignment: CrossAxisAlignment.start, 72 | mainAxisSize: MainAxisSize.min, 73 | children: [ 74 | Text( 75 | this.data.userName, 76 | style: TextStyle( 77 | fontSize: 19, 78 | fontWeight: FontWeight.bold, 79 | color: Color(0xFF636F80), 80 | ), 81 | ), 82 | Padding(padding: EdgeInsets.only(top: 6)), 83 | Text( 84 | this.data.saying, 85 | style: TextStyle( 86 | fontSize: 15, 87 | height: 0.8, 88 | color: Color(0xFF333333), 89 | ), 90 | ), 91 | Padding( 92 | padding: EdgeInsets.symmetric(vertical: 10), 93 | child: Image.network( 94 | this.data.pic, 95 | fit: BoxFit.fitWidth, 96 | ), 97 | ), 98 | Row( 99 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 100 | children: [ 101 | Text( 102 | this.data.publishTime, 103 | style: TextStyle( 104 | fontSize: 13, 105 | color: Color(0xFF999999), 106 | ), 107 | ), 108 | Icon( 109 | Icons.comment, 110 | size: 16, 111 | color: Color(0xFF999999), 112 | ), 113 | ], 114 | ), 115 | this.renderComments(), 116 | ], 117 | ), 118 | ), 119 | ], 120 | ), 121 | ); 122 | } 123 | } 124 | 125 | class FriendCircleViewModel { 126 | /// 用户名 127 | final String userName; 128 | 129 | /// 用户头像地址 130 | final String userImgUrl; 131 | 132 | /// 说说 133 | final String saying; 134 | 135 | /// 图片 136 | final String pic; 137 | 138 | ///发布时间 139 | final String publishTime; 140 | 141 | /// 评论内容 142 | final List comments; 143 | 144 | const FriendCircleViewModel({ 145 | this.userName, 146 | this.userImgUrl, 147 | this.saying, 148 | this.pic, 149 | this.publishTime, 150 | this.comments, 151 | }); 152 | } 153 | 154 | class Comment { 155 | /// 是否发起人 156 | final bool source; 157 | 158 | /// 评论者 159 | final String fromUser; 160 | 161 | /// 被评论者 162 | final String toUser; 163 | 164 | // 评论内容 165 | final String content; 166 | 167 | const Comment({ 168 | this.source, 169 | this.fromUser, 170 | this.toUser, 171 | this.content, 172 | }); 173 | } 174 | -------------------------------------------------------------------------------- /lib/basic_widgets/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'mock_data.dart'; 4 | import 'pet_card.dart'; 5 | import 'credit_card.dart'; 6 | import 'friend_circle.dart'; 7 | import '../common/demo_tabs.dart'; 8 | 9 | List demos = [ 10 | DemoTabViewModel(title: '宠物卡片', widget: PetCard(data: petCardData)), 11 | DemoTabViewModel(title: '银行卡', widget: CreditCard(data: creditCardData)), 12 | DemoTabViewModel(title: '微信朋友圈', widget: FriendCircle(data: friendCircleData)), 13 | ].map((item) => DemoTabViewModel( 14 | title: item.title, 15 | widget: Column( 16 | mainAxisSize: MainAxisSize.min, 17 | children: [item.widget], 18 | ), 19 | )).toList(); 20 | 21 | class BasicWidgetsDemo extends StatefulWidget { 22 | @override 23 | _BasicWidgetsDemoState createState() => _BasicWidgetsDemoState(); 24 | } 25 | 26 | class _BasicWidgetsDemoState extends State 27 | with SingleTickerProviderStateMixin { 28 | TabController tabController; 29 | 30 | @override 31 | void initState() { 32 | super.initState(); 33 | this.tabController = new TabController(length: demos.length, vsync: this); 34 | } 35 | 36 | @override 37 | void dispose() { 38 | super.dispose(); 39 | this.tabController.dispose(); 40 | } 41 | 42 | @override 43 | Widget build(BuildContext context) { 44 | return DemoTabs( 45 | title: '基础组件', 46 | demos: demos, 47 | tabScrollable: false, 48 | tabController: this.tabController, 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /lib/basic_widgets/mock_data.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'pet_card.dart'; 4 | import 'credit_card.dart'; 5 | import 'friend_circle.dart'; 6 | 7 | /// 宠物卡片mock数据 8 | const PetCardViewModel petCardData = PetCardViewModel( 9 | coverUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1425538345,901220022&fm=26&gp=0.jpg', 10 | userImgUrl: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1699287406,228622974&fm=26&gp=0.jpg', 11 | userName: '大米要煮小米粥', 12 | description: '小米 | 我家的小仓鼠', 13 | publishTime: '12:59', 14 | topic: '萌宠小屋', 15 | publishContent: '今天带着小VIVI去了爪子生活体验馆，好多好玩的小东西都想带回家！', 16 | replies: 356, 17 | likes: 258, 18 | shares: 126, 19 | ); 20 | 21 | /// 信用卡mock数据 22 | const CreditCardViewModel creditCardData = CreditCardViewModel( 23 | bankName: '招商银行', 24 | bankLogoUrl: 'assets/pics/bank_zs.png', 25 | cardType: '储蓄卡', 26 | cardNumber: '6210 **** **** 1426', 27 | cardColors: [Color(0xFFF17B68), Color(0xFFE95F66)], 28 | validDate: '10/27', 29 | ); 30 | 31 | /// 朋友圈mock数据 32 | const FriendCircleViewModel friendCircleData = FriendCircleViewModel( 33 | userName: '小石头', 34 | userImgUrl: 'https://mirror-gold-cdn.xitu.io/168e089a9fc6d1a7a5c?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1', 35 | saying: '听说Flutter很🔥，我也来凑热闹，github上建了一个仓库，欢迎来撩~✌✌✌', 36 | pic: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562427219775&di=0ffec9a8d7fd40f4b7b4260f2fefe910&imgtype=0&src=http%3A%2F%2Fimg3.mukewang.com%2F5c18cf540001ac8206000338.jpg', 37 | publishTime: '2小时前', 38 | comments: [ 39 | Comment( 40 | source: true, 41 | fromUser: '若海', 42 | toUser: '小石头', 43 | content: '性能如何？' 44 | ), 45 | Comment( 46 | source: false, 47 | fromUser: '小石头', 48 | toUser: '若海', 49 | content: '性能不错，但是开发体验感觉差一点。。。' 50 | ), 51 | Comment( 52 | source: false, 53 | fromUser: '若海', 54 | toUser: '小石头', 55 | content: '周末我也试试，嘻嘻~' 56 | ), 57 | Comment( 58 | source: true, 59 | fromUser: '大佬', 60 | toUser: '小石头', 61 | content: '卧槽，求求你别学了' 62 | ), 63 | Comment( 64 | source: true, 65 | fromUser: '产品', 66 | toUser: '小石头', 67 | content: '工作量不饱和啊你这是！' 68 | ), 69 | Comment( 70 | source: false, 71 | fromUser: '小石头', 72 | toUser: '大佬', 73 | content: '卧槽，大佬别闹，学不动了。。。' 74 | ), 75 | Comment( 76 | source: false, 77 | fromUser: '小石头', 78 | toUser: '产品', 79 | content: '不不不，你的需求都已经完成了~！' 80 | ), 81 | ], 82 | ); -------------------------------------------------------------------------------- /lib/basic_widgets/pet_card.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class PetCard extends StatelessWidget { 4 | final PetCardViewModel data; 5 | 6 | const PetCard({ 7 | Key key, 8 | this.data, 9 | }) : super(key: key); 10 | 11 | Widget renderCover() { 12 | return Stack( 13 | fit: StackFit.passthrough, 14 | children: [ 15 | ClipRRect( 16 | borderRadius: BorderRadius.only( 17 | topLeft: Radius.circular(8), 18 | topRight: Radius.circular(8), 19 | ), 20 | child: Image.network( 21 | data.coverUrl, 22 | height: 200, 23 | fit: BoxFit.fitWidth, 24 | ), 25 | ), 26 | Positioned( 27 | left: 0, 28 | top: 100, 29 | right: 0, 30 | bottom: 0, 31 | child: Container( 32 | decoration: BoxDecoration( 33 | gradient: LinearGradient( 34 | begin: Alignment.topCenter, 35 | end: Alignment.bottomCenter, 36 | colors: [ 37 | Color.fromARGB(0, 0, 0, 0), 38 | Color.fromARGB(80, 0, 0, 0), 39 | ], 40 | ), 41 | ), 42 | ), 43 | ), 44 | ], 45 | ); 46 | } 47 | 48 | Widget renderUserInfo() { 49 | return Container( 50 | margin: EdgeInsets.only(top: 16), 51 | padding: EdgeInsets.symmetric(horizontal: 16), 52 | child: Row( 53 | crossAxisAlignment: CrossAxisAlignment.start, 54 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 55 | children: [ 56 | Row( 57 | children: [ 58 | CircleAvatar( 59 | radius: 20, 60 | backgroundColor: Color(0xFFCCCCCC), 61 | backgroundImage: NetworkImage(data.userImgUrl), 62 | ), 63 | Padding(padding: EdgeInsets.only(left: 8)), 64 | Column( 65 | crossAxisAlignment: CrossAxisAlignment.start, 66 | children: [ 67 | Text( 68 | data.userName, 69 | style: TextStyle( 70 | fontSize: 15, 71 | fontWeight: FontWeight.bold, 72 | color: Color(0xFF333333), 73 | ), 74 | ), 75 | Padding(padding: EdgeInsets.only(top: 2)), 76 | Text( 77 | data.description, 78 | style: TextStyle( 79 | fontSize: 12, 80 | color: Color(0xFF999999), 81 | ), 82 | ), 83 | ], 84 | ), 85 | ], 86 | ), 87 | Text( 88 | data.publishTime, 89 | style: TextStyle( 90 | fontSize: 13, 91 | color: Color(0xFF999999), 92 | ), 93 | ), 94 | ], 95 | ), 96 | ); 97 | } 98 | 99 | Widget renderPublishContent() { 100 | return Container( 101 | margin: EdgeInsets.only(top: 16), 102 | padding: EdgeInsets.symmetric(horizontal: 16), 103 | child: Column( 104 | crossAxisAlignment: CrossAxisAlignment.start, 105 | children: [ 106 | Container( 107 | margin: EdgeInsets.only(bottom: 14), 108 | padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2), 109 | decoration: BoxDecoration( 110 | color: Color(0xFFFFC600), 111 | borderRadius: BorderRadius.only( 112 | topRight: Radius.circular(8), 113 | bottomLeft: Radius.circular(8), 114 | bottomRight: Radius.circular(8), 115 | ), 116 | ), 117 | child: Text( 118 | '# ${data.topic}', 119 | style: TextStyle( 120 | fontSize: 12, 121 | color: Colors.white, 122 | ), 123 | ), 124 | ), 125 | Text( 126 | data.publishContent, 127 | maxLines: 2, 128 | overflow: TextOverflow.ellipsis, 129 | style: TextStyle( 130 | fontSize: 15, 131 | fontWeight: FontWeight.bold, 132 | color: Color(0xFF333333), 133 | ), 134 | ), 135 | ], 136 | ), 137 | ); 138 | } 139 | 140 | Widget renderInteractionArea() { 141 | return Container( 142 | margin: EdgeInsets.symmetric(vertical: 16), 143 | padding: EdgeInsets.symmetric(horizontal: 16), 144 | child: Row( 145 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 146 | children: [ 147 | Row( 148 | children: [ 149 | Icon( 150 | Icons.message, 151 | size: 16, 152 | color: Color(0xFF999999), 153 | ), 154 | Padding(padding: EdgeInsets.only(left: 6)), 155 | Text( 156 | data.replies.toString(), 157 | style: TextStyle( 158 | fontSize: 15, 159 | color: Color(0xFF999999), 160 | ), 161 | ), 162 | ], 163 | ), 164 | Row( 165 | children: [ 166 | Icon( 167 | Icons.favorite, 168 | size: 16, 169 | color: Color(0xFFFFC600), 170 | ), 171 | Padding(padding: EdgeInsets.only(left: 6)), 172 | Text( 173 | data.likes.toString(), 174 | style: TextStyle( 175 | fontSize: 15, 176 | color: Color(0xFF999999), 177 | ), 178 | ), 179 | ], 180 | ), 181 | Row( 182 | children: [ 183 | Icon( 184 | Icons.share, 185 | size: 16, 186 | color: Color(0xFF999999), 187 | ), 188 | Padding(padding: EdgeInsets.only(left: 6)), 189 | Text( 190 | data.shares.toString(), 191 | style: TextStyle( 192 | fontSize: 15, 193 | color: Color(0xFF999999), 194 | ), 195 | ), 196 | ], 197 | ), 198 | ], 199 | ), 200 | ); 201 | } 202 | 203 | @override 204 | Widget build(BuildContext context) { 205 | return Container( 206 | margin: EdgeInsets.fromLTRB(16, 16, 16, 0), 207 | decoration: BoxDecoration( 208 | color: Colors.white, 209 | borderRadius: BorderRadius.circular(8), 210 | boxShadow: [ 211 | BoxShadow( 212 | blurRadius: 6, 213 | spreadRadius: 4, 214 | color: Color.fromARGB(20, 0, 0, 0), 215 | ), 216 | ], 217 | ), 218 | child: Column( 219 | crossAxisAlignment: CrossAxisAlignment.stretch, 220 | children: [ 221 | this.renderCover(), 222 | this.renderUserInfo(), 223 | this.renderPublishContent(), 224 | this.renderInteractionArea(), 225 | ], 226 | ), 227 | ); 228 | } 229 | } 230 | 231 | class PetCardViewModel { 232 | /// 封面地址 233 | final String coverUrl; 234 | 235 | /// 用户头像地址 236 | final String userImgUrl; 237 | 238 | /// 用户名 239 | final String userName; 240 | 241 | /// 用户描述 242 | final String description; 243 | 244 | /// 话题 245 | final String topic; 246 | 247 | /// 发布时间 248 | final String publishTime; 249 | 250 | /// 发布内容 251 | final String publishContent; 252 | 253 | /// 回复数量 254 | final int replies; 255 | 256 | /// 喜欢数量 257 | final int likes; 258 | 259 | /// 分享数量 260 | final int shares; 261 | 262 | const PetCardViewModel({ 263 | this.coverUrl, 264 | this.userImgUrl, 265 | this.userName, 266 | this.description, 267 | this.topic, 268 | this.publishTime, 269 | this.publishContent, 270 | this.replies, 271 | this.likes, 272 | this.shares, 273 | }); 274 | } 275 | -------------------------------------------------------------------------------- /lib/basic_widgets/screen_shots/credit_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/basic_widgets/screen_shots/credit_card.png -------------------------------------------------------------------------------- /lib/basic_widgets/screen_shots/friend_circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/basic_widgets/screen_shots/friend_circle.png -------------------------------------------------------------------------------- /lib/basic_widgets/screen_shots/pet_card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/basic_widgets/screen_shots/pet_card.png -------------------------------------------------------------------------------- /lib/common/custom_icons.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class CustomIcons { 4 | /// 早餐 5 | static const IconData breakFirst = IconData(0xe642, fontFamily: 'IconFont'); 6 | 7 | /// 炸鸡 8 | static const IconData friedFood = IconData(0xe506, fontFamily: 'IconFont'); 9 | 10 | /// 摩托车 11 | static const IconData motorbike = IconData(0xe62d, fontFamily: 'IconFont'); 12 | 13 | /// 包子 14 | static const IconData baozi = IconData(0xe61a, fontFamily: 'IconFont'); 15 | 16 | /// 店铺 17 | static const IconData shop = IconData(0xe619, fontFamily: 'IconFont'); 18 | 19 | /// 甜品 20 | static const IconData sweetmeats = IconData(0xe606, fontFamily: 'IconFont'); 21 | 22 | /// 货车 23 | static const IconData truck = IconData(0xe602, fontFamily: 'IconFont'); 24 | 25 | /// 跑腿 26 | static const IconData errand = IconData(0xe7b3, fontFamily: 'IconFont'); 27 | 28 | /// 湘菜 29 | static const IconData xiangCuisine = IconData(0xe63b, fontFamily: 'IconFont'); 30 | 31 | /// 全部分类 32 | static const IconData allCategories = 33 | IconData(0xe508, fontFamily: 'IconFont'); 34 | } 35 | -------------------------------------------------------------------------------- /lib/common/demo_tabs.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class DemoTabViewModel { 4 | final String title; 5 | final Widget widget; 6 | 7 | const DemoTabViewModel({ 8 | this.title, 9 | this.widget, 10 | }); 11 | } 12 | 13 | class DemoTabs extends StatelessWidget { 14 | final String title; 15 | final List demos; 16 | final bool tabScrollable; 17 | final TabController tabController; 18 | 19 | DemoTabs({ 20 | this.title, 21 | this.demos, 22 | this.tabScrollable = true, 23 | this.tabController, 24 | }); 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | appBar: AppBar( 30 | title: Text(this.title), 31 | bottom: TabBar( 32 | controller: this.tabController, 33 | isScrollable: this.tabScrollable, 34 | tabs: this.demos.map((item) => Tab(text: item.title)).toList(), 35 | ), 36 | ), 37 | body: TabBarView( 38 | controller: this.tabController, 39 | children: this.demos.map((item) => item.widget).toList(), 40 | ), 41 | ); 42 | } 43 | } -------------------------------------------------------------------------------- /lib/custom_icon/README.md: -------------------------------------------------------------------------------- 1 | # ListView列表组件 - 示例 2 | 3 | |1. [Antd图标](./antd_icons.dart)| 4 | |----| 5 | || 6 | -------------------------------------------------------------------------------- /lib/custom_icon/index.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math' as math; 2 | import 'package:flutter/material.dart'; 3 | 4 | import 'mock_data.dart'; 5 | 6 | class CustomIconsDemo extends StatelessWidget { 7 | Color makeRandomColor() { 8 | return Color((math.Random().nextDouble() * 0xFFFFFF).toInt() << 0) 9 | .withOpacity(1.0); 10 | } 11 | 12 | @override 13 | Widget build(BuildContext context) { 14 | return Scaffold( 15 | appBar: AppBar( 16 | title: Text('自定义Icon'), 17 | ), 18 | body: GridView.builder( 19 | itemCount: iconList.length, 20 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 21 | crossAxisCount: 5, 22 | ), 23 | itemBuilder: (context, index) { 24 | return Center( 25 | child: Icon( 26 | iconList[index], 27 | size: 30, 28 | color: Colors.black, 29 | ), 30 | ); 31 | }, 32 | ), 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /lib/custom_icon/mock_data.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'antd_icons.dart'; 4 | 5 | final List iconList = [ 6 | AntdIcons.checkCircle, 7 | AntdIcons.CI, 8 | AntdIcons.Dollar, 9 | AntdIcons.compass, 10 | AntdIcons.closeCircle, 11 | AntdIcons.frown, 12 | AntdIcons.infoCircle, 13 | AntdIcons.leftCircle, 14 | AntdIcons.downCircle, 15 | AntdIcons.EURO, 16 | AntdIcons.copyright, 17 | AntdIcons.minusCircle, 18 | AntdIcons.meh, 19 | AntdIcons.plusCircle, 20 | AntdIcons.playCircle, 21 | AntdIcons.questionCircle, 22 | AntdIcons.Pound, 23 | AntdIcons.rightCircle, 24 | AntdIcons.smile, 25 | AntdIcons.trademark, 26 | AntdIcons.timeCircle, 27 | AntdIcons.timeOut, 28 | AntdIcons.earth, 29 | AntdIcons.YUAN, 30 | AntdIcons.upCircle, 31 | AntdIcons.warningCircle, 32 | AntdIcons.sync, 33 | AntdIcons.transaction, 34 | AntdIcons.undo, 35 | AntdIcons.redo, 36 | AntdIcons.reload, 37 | AntdIcons.reloadTime, 38 | AntdIcons.message, 39 | AntdIcons.dashboard, 40 | AntdIcons.issuesClose, 41 | AntdIcons.poweroff, 42 | AntdIcons.logout, 43 | AntdIcons.pieChart, 44 | AntdIcons.setting, 45 | AntdIcons.eye, 46 | AntdIcons.location, 47 | AntdIcons.editSquare, 48 | AntdIcons.export, 49 | AntdIcons.save, 50 | AntdIcons.Import, 51 | AntdIcons.appStore, 52 | AntdIcons.closeSquare, 53 | AntdIcons.downSquare, 54 | AntdIcons.layout, 55 | AntdIcons.leftSquare, 56 | AntdIcons.playSquare, 57 | AntdIcons.control, 58 | AntdIcons.codeLibrary, 59 | AntdIcons.detail, 60 | AntdIcons.minusSquare, 61 | AntdIcons.plusSquare, 62 | AntdIcons.rightSquare, 63 | AntdIcons.project, 64 | AntdIcons.wallet, 65 | AntdIcons.upSquare, 66 | AntdIcons.calculator, 67 | AntdIcons.interation, 68 | AntdIcons.checkSquare, 69 | AntdIcons.border, 70 | AntdIcons.borderOuter, 71 | AntdIcons.borderTop, 72 | AntdIcons.borderBottom, 73 | AntdIcons.borderLeft, 74 | AntdIcons.borderRight, 75 | AntdIcons.borderInner, 76 | AntdIcons.borderVerticle, 77 | AntdIcons.borderHorizontal, 78 | AntdIcons.radiusBottomleft, 79 | AntdIcons.radiusBottomright, 80 | AntdIcons.radiusUpleft, 81 | AntdIcons.radiusUpright, 82 | AntdIcons.radiusSetting, 83 | AntdIcons.addUser, 84 | AntdIcons.deleteTeam, 85 | AntdIcons.deleteUser, 86 | AntdIcons.addteam, 87 | AntdIcons.user, 88 | AntdIcons.team, 89 | AntdIcons.areaChart, 90 | AntdIcons.lineChart, 91 | AntdIcons.barChart, 92 | AntdIcons.pointMap, 93 | AntdIcons.container, 94 | AntdIcons.database, 95 | AntdIcons.sever, 96 | AntdIcons.mobile, 97 | AntdIcons.tablet, 98 | AntdIcons.redEnvelope, 99 | AntdIcons.book, 100 | AntdIcons.fileDone, 101 | AntdIcons.reconciliation, 102 | AntdIcons.fileException, 103 | AntdIcons.fileSync, 104 | AntdIcons.fileSearch, 105 | AntdIcons.solution, 106 | AntdIcons.fileProtect, 107 | AntdIcons.fileAdd, 108 | AntdIcons.fileExcel, 109 | AntdIcons.fileExclamation, 110 | AntdIcons.filePdf, 111 | AntdIcons.fileImage, 112 | AntdIcons.fileMarkdown, 113 | AntdIcons.fileUnknown, 114 | AntdIcons.filePpt, 115 | AntdIcons.fileWord, 116 | AntdIcons.file, 117 | AntdIcons.fileZip, 118 | AntdIcons.fileText, 119 | AntdIcons.fileCopy, 120 | AntdIcons.snippets, 121 | AntdIcons.audit, 122 | AntdIcons.diff, 123 | AntdIcons.BatchFolding, 124 | AntdIcons.securityScan, 125 | AntdIcons.propertySafety, 126 | AntdIcons.safetyCertificate, 127 | AntdIcons.insurance, 128 | AntdIcons.alert, 129 | AntdIcons.delete, 130 | AntdIcons.hourglass, 131 | AntdIcons.bulb, 132 | AntdIcons.experiment, 133 | AntdIcons.bell, 134 | AntdIcons.trophy, 135 | AntdIcons.rest, 136 | AntdIcons.USB, 137 | AntdIcons.skin, 138 | AntdIcons.home, 139 | AntdIcons.bank, 140 | AntdIcons.filter, 141 | AntdIcons.funnelPlot, 142 | AntdIcons.like, 143 | AntdIcons.unlike, 144 | AntdIcons.unlock, 145 | AntdIcons.lock, 146 | AntdIcons.customerservice, 147 | AntdIcons.flag, 148 | AntdIcons.moneyCollect, 149 | AntdIcons.medicinebox, 150 | AntdIcons.shop, 151 | AntdIcons.rocket, 152 | AntdIcons.shopping, 153 | AntdIcons.folder, 154 | AntdIcons.folderOpen, 155 | AntdIcons.folderAdd, 156 | AntdIcons.deploymentUnit, 157 | AntdIcons.accountBook, 158 | AntdIcons.contacts, 159 | AntdIcons.carryOut, 160 | AntdIcons.calendarCheck, 161 | AntdIcons.calendar, 162 | AntdIcons.scan, 163 | AntdIcons.select, 164 | AntdIcons.boxPlot, 165 | AntdIcons.build, 166 | AntdIcons.sliders, 167 | AntdIcons.laptop, 168 | AntdIcons.barcode, 169 | AntdIcons.camera, 170 | AntdIcons.cluster, 171 | AntdIcons.gateway, 172 | AntdIcons.car, 173 | AntdIcons.printer, 174 | AntdIcons.read, 175 | AntdIcons.cloudServer, 176 | AntdIcons.cloudUpload, 177 | AntdIcons.cloud, 178 | AntdIcons.cloudDownload, 179 | AntdIcons.cloudSync, 180 | AntdIcons.video, 181 | AntdIcons.notification, 182 | AntdIcons.sound, 183 | AntdIcons.radarChart, 184 | AntdIcons.qrcode, 185 | AntdIcons.fund, 186 | AntdIcons.image, 187 | AntdIcons.mail, 188 | AntdIcons.table, 189 | AntdIcons.idCard, 190 | AntdIcons.creditCard, 191 | AntdIcons.heart, 192 | AntdIcons.block, 193 | AntdIcons.error, 194 | AntdIcons.star, 195 | AntdIcons.gold, 196 | AntdIcons.heatMap, 197 | AntdIcons.wifi, 198 | AntdIcons.attachment, 199 | AntdIcons.edit, 200 | AntdIcons.key, 201 | AntdIcons.api, 202 | AntdIcons.disconnect, 203 | AntdIcons.highlight, 204 | AntdIcons.monitor, 205 | AntdIcons.link, 206 | AntdIcons.man, 207 | AntdIcons.percentage, 208 | AntdIcons.pushpin, 209 | AntdIcons.phone, 210 | AntdIcons.shake, 211 | AntdIcons.tag, 212 | AntdIcons.wrench, 213 | AntdIcons.tags, 214 | AntdIcons.scissor, 215 | AntdIcons.mr, 216 | AntdIcons.share, 217 | AntdIcons.branches, 218 | AntdIcons.fork, 219 | AntdIcons.shrink, 220 | AntdIcons.arrawsalt, 221 | AntdIcons.verticalRight, 222 | AntdIcons.verticalLeft, 223 | AntdIcons.right, 224 | AntdIcons.left, 225 | AntdIcons.up, 226 | AntdIcons.down, 227 | AntdIcons.fullscreen, 228 | AntdIcons.fullscreenExit, 229 | AntdIcons.doubleleft, 230 | AntdIcons.doubleRight, 231 | AntdIcons.arrowright, 232 | AntdIcons.arrowup, 233 | AntdIcons.arrowleft, 234 | AntdIcons.arrowdown, 235 | AntdIcons.upload, 236 | AntdIcons.columHeight, 237 | AntdIcons.verticalAlignBotto, 238 | AntdIcons.verticalAlignMiddl, 239 | AntdIcons.totop, 240 | AntdIcons.verticalAlignTop, 241 | AntdIcons.download, 242 | AntdIcons.sortDescending, 243 | AntdIcons.sortAscending, 244 | AntdIcons.fall, 245 | AntdIcons.swap, 246 | AntdIcons.stock, 247 | AntdIcons.rise, 248 | AntdIcons.indent, 249 | AntdIcons.outdent, 250 | AntdIcons.menu, 251 | AntdIcons.unorderedList, 252 | AntdIcons.orderedList, 253 | AntdIcons.alignRight, 254 | AntdIcons.alignCenter, 255 | AntdIcons.alignLeft, 256 | AntdIcons.picCenter, 257 | AntdIcons.picRight, 258 | AntdIcons.picLeft, 259 | AntdIcons.bold, 260 | AntdIcons.fontColors, 261 | AntdIcons.exclaimination, 262 | AntdIcons.fontSize, 263 | AntdIcons.infomation, 264 | AntdIcons.lineHeight, 265 | AntdIcons.strikethrough, 266 | AntdIcons.underline, 267 | AntdIcons.number, 268 | AntdIcons.italic, 269 | AntdIcons.code, 270 | AntdIcons.columnWidth, 271 | AntdIcons.check, 272 | AntdIcons.ellipsis, 273 | AntdIcons.dash, 274 | AntdIcons.close, 275 | AntdIcons.enter, 276 | AntdIcons.line, 277 | AntdIcons.minus, 278 | AntdIcons.question, 279 | AntdIcons.rollback, 280 | AntdIcons.smallDash, 281 | AntdIcons.pause, 282 | AntdIcons.bgColors, 283 | AntdIcons.crown, 284 | AntdIcons.drag, 285 | AntdIcons.desktop, 286 | AntdIcons.gift, 287 | AntdIcons.stop, 288 | AntdIcons.fire, 289 | AntdIcons.thunderbolt, 290 | AntdIcons.checkCircleFill, 291 | AntdIcons.leftCircleFill, 292 | AntdIcons.downCircleFill, 293 | AntdIcons.minusCircleFill, 294 | AntdIcons.closeCircleFill, 295 | AntdIcons.infoCircleFill, 296 | AntdIcons.upCircleFill, 297 | AntdIcons.rightCircleFill, 298 | AntdIcons.plusCircleFill, 299 | AntdIcons.questionCircleFill, 300 | AntdIcons.EUROCircleFill, 301 | AntdIcons.frownFill, 302 | AntdIcons.copyrightCircleFil, 303 | AntdIcons.CICircleFill, 304 | AntdIcons.compassFill, 305 | AntdIcons.DollarCircleFill, 306 | AntdIcons.poweroffCircleFill, 307 | AntdIcons.mehFill, 308 | AntdIcons.playCircleFill, 309 | AntdIcons.PoundCircleFill, 310 | AntdIcons.smileFill, 311 | AntdIcons.stopFill, 312 | AntdIcons.warningCircleFill, 313 | AntdIcons.timeCircleFill, 314 | AntdIcons.trademarkCircleFil, 315 | AntdIcons.YUANCircleFill, 316 | AntdIcons.heartFill, 317 | AntdIcons.pieChartCircleFil, 318 | AntdIcons.dashboardFill, 319 | AntdIcons.messageFill, 320 | AntdIcons.checkSquareFill, 321 | AntdIcons.downSquareFill, 322 | AntdIcons.minusSquareFill, 323 | AntdIcons.closeSquareFill, 324 | AntdIcons.codeLibraryFill, 325 | AntdIcons.leftSquareFill, 326 | AntdIcons.playSquareFill, 327 | AntdIcons.upSquareFill, 328 | AntdIcons.rightSquareFill, 329 | AntdIcons.plusSquareFill, 330 | AntdIcons.accountBookFill, 331 | AntdIcons.carryOutFill, 332 | AntdIcons.calendarFill, 333 | AntdIcons.calculatorFill, 334 | AntdIcons.interationFill, 335 | AntdIcons.projectFill, 336 | AntdIcons.detailFill, 337 | AntdIcons.saveFill, 338 | AntdIcons.walletFill, 339 | AntdIcons.controlFill, 340 | AntdIcons.layoutFill, 341 | AntdIcons.appStoreFill, 342 | AntdIcons.mobileFill, 343 | AntdIcons.tabletFill, 344 | AntdIcons.bookFill, 345 | AntdIcons.redEnvelopeFill, 346 | AntdIcons.safetyCertificateF, 347 | AntdIcons.propertySafetyFill, 348 | AntdIcons.insuranceFill, 349 | AntdIcons.securityScanFill, 350 | AntdIcons.fileExclamationFil, 351 | AntdIcons.fileAddFill, 352 | AntdIcons.fileFill, 353 | AntdIcons.fileExcelFill, 354 | AntdIcons.fileMarkdownFill, 355 | AntdIcons.fileTextFill, 356 | AntdIcons.filePptFill, 357 | AntdIcons.fileUnknownFill, 358 | AntdIcons.fileWordFill, 359 | AntdIcons.fileZipFill, 360 | AntdIcons.filePdfFill, 361 | AntdIcons.fileImageFill, 362 | AntdIcons.diffFill, 363 | AntdIcons.fileCopyFill, 364 | AntdIcons.snippetsFill, 365 | AntdIcons.batchFoldingFill, 366 | AntdIcons.reconciliationFill, 367 | AntdIcons.folderAddFill, 368 | AntdIcons.folderFill, 369 | AntdIcons.folderOpenFill, 370 | AntdIcons.databaseFill, 371 | AntdIcons.containerFill, 372 | AntdIcons.severFill, 373 | AntdIcons.calendarCheckFill, 374 | AntdIcons.imageFill, 375 | AntdIcons.idCardFill, 376 | AntdIcons.creditCardFill, 377 | AntdIcons.fundFill, 378 | AntdIcons.readFill, 379 | AntdIcons.contactsFill, 380 | AntdIcons.deleteFill, 381 | AntdIcons.notificationFill, 382 | AntdIcons.flagFill, 383 | AntdIcons.moneyCollectFill, 384 | AntdIcons.medicineBoxFill, 385 | AntdIcons.restFill, 386 | AntdIcons.shoppingFill, 387 | AntdIcons.skinFill, 388 | AntdIcons.videoFill, 389 | AntdIcons.soundFill, 390 | AntdIcons.bulbFill, 391 | AntdIcons.bellFill, 392 | AntdIcons.filterFill, 393 | AntdIcons.fireFill, 394 | AntdIcons.funnelPlotFill, 395 | AntdIcons.giftFill, 396 | AntdIcons.hourglassFill, 397 | AntdIcons.homeFill, 398 | AntdIcons.trophyFill, 399 | AntdIcons.locationFill, 400 | AntdIcons.cloudFill, 401 | AntdIcons.customerserviceFill, 402 | AntdIcons.experimentFill, 403 | AntdIcons.eyeFill, 404 | AntdIcons.likeFill, 405 | AntdIcons.lockFill, 406 | AntdIcons.unlikeFill, 407 | AntdIcons.starFill, 408 | AntdIcons.unlockFill, 409 | AntdIcons.alertFill, 410 | AntdIcons.apiFill, 411 | AntdIcons.highlightFill, 412 | AntdIcons.phoneFill, 413 | AntdIcons.editFill, 414 | AntdIcons.pushpinFill, 415 | AntdIcons.rocketFill, 416 | AntdIcons.thunderboltFill, 417 | AntdIcons.tagFill, 418 | AntdIcons.wrenchFill, 419 | AntdIcons.tagsFill, 420 | AntdIcons.bankFill, 421 | AntdIcons.cameraFill, 422 | AntdIcons.errorFill, 423 | AntdIcons.crownFill, 424 | AntdIcons.mailFill, 425 | AntdIcons.carFill, 426 | AntdIcons.printerFill, 427 | AntdIcons.shopFill, 428 | AntdIcons.settingFill, 429 | AntdIcons.USBFill, 430 | AntdIcons.goldenFill, 431 | AntdIcons.buildFill, 432 | AntdIcons.boxPlotFill, 433 | AntdIcons.slidersFill, 434 | AntdIcons.alibaba, 435 | AntdIcons.alibabacloud, 436 | AntdIcons.antDesign, 437 | AntdIcons.antCloud, 438 | AntdIcons.behance, 439 | AntdIcons.googlePlus, 440 | AntdIcons.medium, 441 | AntdIcons.google, 442 | AntdIcons.IE, 443 | AntdIcons.amazon, 444 | AntdIcons.slack, 445 | AntdIcons.alipay, 446 | AntdIcons.taobao, 447 | AntdIcons.zhihu, 448 | AntdIcons.HTML5, 449 | AntdIcons.linkedin, 450 | AntdIcons.yahoo, 451 | AntdIcons.facebook, 452 | AntdIcons.skype, 453 | AntdIcons.CodeSandbox, 454 | AntdIcons.chrome, 455 | AntdIcons.codepen, 456 | AntdIcons.aliwangwang, 457 | AntdIcons.apple, 458 | AntdIcons.android, 459 | AntdIcons.sketch, 460 | AntdIcons.Gitlab, 461 | AntdIcons.dribbble, 462 | AntdIcons.instagram, 463 | AntdIcons.reddit, 464 | AntdIcons.windows, 465 | AntdIcons.yuque, 466 | AntdIcons.Youtube, 467 | AntdIcons.GitlabFill, 468 | AntdIcons.dropbox, 469 | AntdIcons.dingtalk, 470 | AntdIcons.androidFill, 471 | AntdIcons.appleFill, 472 | AntdIcons.HTML5Fill, 473 | AntdIcons.windowsFill, 474 | AntdIcons.QQ, 475 | AntdIcons.twitter, 476 | AntdIcons.skypeFill, 477 | AntdIcons.weibo, 478 | AntdIcons.yuqueFill, 479 | AntdIcons.YoutubeFill, 480 | AntdIcons.yahooFill, 481 | AntdIcons.wechatFill, 482 | AntdIcons.chromeFill, 483 | AntdIcons.alipayCircleFill, 484 | AntdIcons.aliwangwangFill, 485 | AntdIcons.behanceCircleFill, 486 | AntdIcons.amazonCircleFill, 487 | AntdIcons.codepenCircleFill, 488 | AntdIcons.CodeSandboxCircleF, 489 | AntdIcons.dropboxCircleFill, 490 | AntdIcons.githubFill, 491 | AntdIcons.dribbbleCircleFill, 492 | AntdIcons.googlePlusCircleF, 493 | AntdIcons.mediumCircleFill, 494 | AntdIcons.QQCircleFill, 495 | AntdIcons.IECircleFill, 496 | AntdIcons.googleCircleFill, 497 | AntdIcons.dingtalkCircleFill, 498 | AntdIcons.sketchCircleFill, 499 | AntdIcons.slackCircleFill, 500 | AntdIcons.twitterCircleFill, 501 | AntdIcons.taobaoCircleFill, 502 | AntdIcons.weiboCircleFill, 503 | AntdIcons.zhihuCircleFill, 504 | AntdIcons.redditCircleFill, 505 | AntdIcons.alipaySquareFill, 506 | AntdIcons.dingtalkSquareFill, 507 | AntdIcons.CodeSandboxSquareF, 508 | AntdIcons.behanceSquareFill, 509 | AntdIcons.amazonSquareFill, 510 | AntdIcons.codepenSquareFill, 511 | AntdIcons.dribbbleSquareFill, 512 | AntdIcons.dropboxSquareFill, 513 | AntdIcons.facebookFill, 514 | AntdIcons.googlePlusSquareF, 515 | AntdIcons.googleSquareFill, 516 | AntdIcons.instagramFill, 517 | AntdIcons.IESquareFill, 518 | AntdIcons.mediumSquareFill, 519 | AntdIcons.linkedinFill, 520 | AntdIcons.QQSquareFill, 521 | AntdIcons.redditSquareFill, 522 | AntdIcons.twitterSquareFill, 523 | AntdIcons.sketchSquareFill, 524 | AntdIcons.slackSquareFill, 525 | AntdIcons.taobaoSquareFill, 526 | AntdIcons.weiboSquareFill, 527 | AntdIcons.zhihuSquareFill, 528 | AntdIcons.zoomOut, 529 | AntdIcons.apartment, 530 | AntdIcons.audio, 531 | AntdIcons.audioFill, 532 | AntdIcons.robot, 533 | AntdIcons.zoomIn, 534 | AntdIcons.robotFill, 535 | AntdIcons.bugFill, 536 | AntdIcons.bug, 537 | AntdIcons.audioStatic, 538 | AntdIcons.comment, 539 | AntdIcons.signalFill, 540 | AntdIcons.verified, 541 | AntdIcons.shortcutFill, 542 | AntdIcons.videocameraAdd, 543 | AntdIcons.switchUser, 544 | AntdIcons.whatsapp, 545 | AntdIcons.appstoreAdd, 546 | AntdIcons.caretDown, 547 | AntdIcons.backward, 548 | AntdIcons.caretUp, 549 | AntdIcons.caretRight, 550 | AntdIcons.caretLeft, 551 | AntdIcons.fastBackward, 552 | AntdIcons.forward, 553 | AntdIcons.fastForward, 554 | AntdIcons.search, 555 | AntdIcons.retweet, 556 | AntdIcons.login, 557 | AntdIcons.stepBackward, 558 | AntdIcons.stepForward, 559 | AntdIcons.swapRight, 560 | AntdIcons.swapLeft, 561 | AntdIcons.woman, 562 | AntdIcons.plus, 563 | AntdIcons.eyeCloseFill, 564 | AntdIcons.eyeClose, 565 | AntdIcons.clear, 566 | AntdIcons.collapse, 567 | AntdIcons.expand, 568 | AntdIcons.deleteColumn, 569 | AntdIcons.mergeCells, 570 | AntdIcons.subnode, 571 | AntdIcons.rotateLeft, 572 | AntdIcons.rotateRight, 573 | AntdIcons.insertRowBelow, 574 | AntdIcons.insertRowAbove, 575 | AntdIcons.solitCells, 576 | AntdIcons.formatPainter, 577 | AntdIcons.insertRowRight, 578 | AntdIcons.formatPainterFill, 579 | AntdIcons.insertRowLeft, 580 | AntdIcons.translate, 581 | AntdIcons.deleteRow, 582 | AntdIcons.sisternode, 583 | AntdIcons.FieldNumber, 584 | AntdIcons.FieldString, 585 | AntdIcons.Function, 586 | AntdIcons.FieldTime, 587 | AntdIcons.GIF, 588 | AntdIcons.Partition, 589 | AntdIcons.index, 590 | AntdIcons.StoredProcedure, 591 | AntdIcons.FieldBinary, 592 | AntdIcons.ConsoleSQL, 593 | AntdIcons.aim, 594 | AntdIcons.compress, 595 | AntdIcons.expend, 596 | AntdIcons.folderView, 597 | AntdIcons.fileGIF, 598 | AntdIcons.group, 599 | AntdIcons.send, 600 | AntdIcons.Report, 601 | AntdIcons.View, 602 | AntdIcons.shortcut, 603 | AntdIcons.ungroup, 604 | ]; 605 | -------------------------------------------------------------------------------- /lib/custom_icon/screen_shots/antd_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/custom_icon/screen_shots/antd_icons.png -------------------------------------------------------------------------------- /lib/grid_view/README.md: -------------------------------------------------------------------------------- 1 | # 网格组件 - 示例 2 | 3 | |1. [彩色格子](./color_grids.dart)|2. [美团 - 服务菜单](./service_categories.dart)|3. [喜马拉雅 - 相声列表](./guess_like_list.dart)| 4 | |----|---|---| 5 | |||| 6 | -------------------------------------------------------------------------------- /lib/grid_view/color_grids.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class ColorGrids extends StatelessWidget { 4 | @override 5 | Widget build(BuildContext context) { 6 | return GridView( 7 | padding: EdgeInsets.all(10), 8 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 9 | crossAxisCount: 3, 10 | mainAxisSpacing: 10, 11 | crossAxisSpacing: 10, 12 | ), 13 | children: [ 14 | Container(color: Colors.red), 15 | Container(color: Colors.indigo), 16 | Container(color: Colors.lime), 17 | Container(color: Colors.purple), 18 | Container(color: Colors.green), 19 | Container(color: Colors.pink), 20 | Container(color: Colors.cyan), 21 | Container(color: Colors.amber), 22 | Container(color: Colors.redAccent), 23 | Container(color: Colors.teal), 24 | Container(color: Colors.orange), 25 | Container(color: Colors.brown), 26 | ], 27 | ); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /lib/grid_view/guess_like_list.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'mock_data.dart'; 4 | import 'programme.dart'; 5 | 6 | class GuessLikeList extends StatelessWidget { 7 | Widget renderHeader() { 8 | return Padding( 9 | padding: EdgeInsets.symmetric(vertical: 10, horizontal: 16), 10 | child: Row( 11 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 12 | children: [ 13 | Text( 14 | '猜你喜欢', 15 | style: TextStyle( 16 | fontSize: 22, 17 | fontWeight: FontWeight.bold, 18 | color: Color(0xFF333333), 19 | ), 20 | ), 21 | Row( 22 | children: [ 23 | Text( 24 | '更多', 25 | style: TextStyle( 26 | fontSize: 15, 27 | color: Color(0xFF666666), 28 | ), 29 | ), 30 | Icon( 31 | Icons.keyboard_arrow_right, 32 | size: 20, 33 | color: Color(0xFF999999), 34 | ), 35 | ], 36 | ), 37 | ], 38 | ), 39 | ); 40 | } 41 | 42 | Widget renderBody() { 43 | return GridView.builder( 44 | shrinkWrap: true, 45 | itemCount: programmeList.length, 46 | physics: NeverScrollableScrollPhysics(), 47 | padding: EdgeInsets.symmetric(horizontal: 16), 48 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 49 | crossAxisCount: 3, 50 | mainAxisSpacing: 10, 51 | crossAxisSpacing: 10, 52 | childAspectRatio: 0.7, 53 | ), 54 | itemBuilder: (context, index) { 55 | return Programme(data: programmeList[index]); 56 | }, 57 | ); 58 | } 59 | 60 | @override 61 | Widget build(BuildContext context) { 62 | return Container( 63 | color: Colors.white, 64 | child: Column( 65 | mainAxisSize: MainAxisSize.min, 66 | children: [ 67 | this.renderHeader(), 68 | this.renderBody(), 69 | ], 70 | ), 71 | ); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /lib/grid_view/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../common/demo_tabs.dart'; 4 | import 'color_grids.dart'; 5 | import 'service_categories.dart'; 6 | import 'guess_like_list.dart'; 7 | 8 | List demos = [ 9 | DemoTabViewModel(title: '彩色格子', widget: ColorGrids()), 10 | DemoTabViewModel(title: '美团 - 服务菜单', widget: ServiceCategories()), 11 | DemoTabViewModel(title: '喜马拉雅 - 相声列表', widget: GuessLikeList()), 12 | ]; 13 | 14 | class GridViewDemo extends StatefulWidget { 15 | @override 16 | _GridViewDemoState createState() => _GridViewDemoState(); 17 | } 18 | 19 | class _GridViewDemoState extends State 20 | with SingleTickerProviderStateMixin { 21 | TabController tabController; 22 | 23 | @override 24 | void initState() { 25 | super.initState(); 26 | this.tabController = new TabController(length: demos.length, vsync: this); 27 | } 28 | 29 | @override 30 | void dispose() { 31 | super.dispose(); 32 | this.tabController.dispose(); 33 | } 34 | 35 | @override 36 | Widget build(BuildContext context) { 37 | return DemoTabs( 38 | demos: demos, 39 | title: 'GridView组件', 40 | tabController: this.tabController, 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /lib/grid_view/mock_data.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'programme.dart'; 4 | import 'service_item.dart'; 5 | import '../common/custom_icons.dart'; 6 | 7 | /// 喜马拉雅 - 相声节目清单 8 | const List programmeList = [ 9 | ProgrammeViewModel( 10 | title: '笑坛三巨匠之一：郭德纲最新高清相声集', 11 | playsCount: 363182465, 12 | needVip: false, 13 | coverImgUrl: 14 | 'http://imagev2.xmcdn.com/group61/M0A/5D/74/wKgMcF0IoUmCLEZIAAfqML_y44E351.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png', 15 | ), 16 | ProgrammeViewModel( 17 | title: '德云社相声十年经典之一', 18 | playsCount: 10236432, 19 | needVip: false, 20 | coverImgUrl: 21 | 'http://imagev2.xmcdn.com/group43/M01/AC/C8/wKgKklskehLi4XS1AARLpcjABqA907.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png', 22 | ), 23 | ProgrammeViewModel( 24 | title: '郭德纲经典相声', 25 | playsCount: 8628885, 26 | needVip: true, 27 | coverImgUrl: 28 | 'http://imagev2.xmcdn.com/group63/M02/5E/4C/wKgMaF0IomXwR0fMAAbRPUR6d-E118.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png', 29 | ), 30 | ProgrammeViewModel( 31 | title: '丑女也能做皇后 | 郭德纲笑说钟无艳的绝世奇闻', 32 | playsCount: 35346856, 33 | needVip: false, 34 | coverImgUrl: 35 | 'http://imagev2.xmcdn.com/group61/M01/5D/AD/wKgMZl0Io4zSQaoqAApJnId5Fxs220.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png', 36 | ), 37 | ProgrammeViewModel( 38 | title: '女妖精的一推就软？听郭德纲单口《九尾狐》', 39 | playsCount: 17787252, 40 | needVip: true, 41 | coverImgUrl: 42 | 'http://imagev2.xmcdn.com/group63/M04/60/DB/wKgMaF0Ir5bAs3I6AAi5jSpprHU406.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png', 43 | ), 44 | ProgrammeViewModel( 45 | title: '周文强老师财富本质课程独播', 46 | playsCount: 10361, 47 | needVip: false, 48 | coverImgUrl: 49 | 'http://imagev2.xmcdn.com/group63/M04/11/7C/wKgMaF0hpLWDI57SAALanlUKN40914.jpg!op_type=5&upload_type=album&device_type=ios&name=large&magick=png', 50 | ), 51 | ]; 52 | 53 | /// 美团 - 服务菜单 54 | const List serviceList = [ 55 | ServiceItemViewModel( 56 | title: '精选早餐', 57 | icon: Icon( 58 | CustomIcons.breakFirst, 59 | size: 25, 60 | color: Colors.lightBlue, 61 | ), 62 | ), 63 | ServiceItemViewModel( 64 | title: '包子', 65 | icon: Icon( 66 | CustomIcons.baozi, 67 | size: 25, 68 | color: Colors.orangeAccent, 69 | ), 70 | ), 71 | ServiceItemViewModel( 72 | title: '炸鸡', 73 | icon: Icon( 74 | CustomIcons.friedFood, 75 | size: 29, 76 | color: Colors.deepOrangeAccent, 77 | ), 78 | ), 79 | ServiceItemViewModel( 80 | title: '网红甜品', 81 | icon: Icon( 82 | CustomIcons.sweetmeats, 83 | size: 30, 84 | color: Colors.pinkAccent, 85 | ), 86 | ), 87 | ServiceItemViewModel( 88 | title: '湘菜', 89 | icon: Icon( 90 | CustomIcons.xiangCuisine, 91 | size: 20, 92 | color: Colors.redAccent, 93 | ), 94 | ), 95 | ServiceItemViewModel( 96 | title: '减免配送费', 97 | icon: Icon( 98 | CustomIcons.truck, 99 | size: 25, 100 | color: Colors.orange, 101 | ), 102 | ), 103 | ServiceItemViewModel( 104 | title: '美团专送', 105 | icon: Icon( 106 | CustomIcons.motorbike, 107 | size: 28, 108 | color: Colors.blueAccent, 109 | ), 110 | ), 111 | ServiceItemViewModel( 112 | title: '到点自取', 113 | icon: Icon( 114 | CustomIcons.shop, 115 | size: 25, 116 | color: Colors.lightGreen, 117 | ), 118 | ), 119 | ServiceItemViewModel( 120 | title: '跑腿代购', 121 | icon: Icon( 122 | CustomIcons.errand, 123 | size: 25, 124 | color: Colors.red, 125 | ), 126 | ), 127 | ServiceItemViewModel( 128 | title: '全部分类', 129 | icon: Icon( 130 | CustomIcons.allCategories, 131 | size: 25, 132 | color: Colors.amber, 133 | ), 134 | ), 135 | ]; 136 | -------------------------------------------------------------------------------- /lib/grid_view/programme.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Programme extends StatelessWidget { 4 | final ProgrammeViewModel data; 5 | 6 | const Programme({Key key, this.data}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | double coverSize = 110; 11 | return Column( 12 | children: [ 13 | Expanded( 14 | child: ClipRRect( 15 | borderRadius: BorderRadius.circular(4), 16 | child: Stack( 17 | fit: StackFit.passthrough, 18 | children: [ 19 | Image.network( 20 | this.data.coverImgUrl, 21 | fit: BoxFit.cover, 22 | ), 23 | Positioned( 24 | left: 0, 25 | right: 0, 26 | bottom: 0, 27 | height: coverSize / 2, 28 | child: Container( 29 | decoration: BoxDecoration( 30 | gradient: LinearGradient( 31 | begin: Alignment.topCenter, 32 | end: Alignment.bottomCenter, 33 | colors: [ 34 | Colors.transparent, 35 | Color.fromARGB(100, 0, 0, 0) 36 | ], 37 | ), 38 | ), 39 | ), 40 | ), 41 | Positioned( 42 | left: 0, 43 | right: 0, 44 | bottom: 0, 45 | child: Padding( 46 | padding: EdgeInsets.all(5), 47 | child: Row( 48 | children: [ 49 | Icon( 50 | Icons.play_arrow, 51 | color: Colors.white, 52 | size: 13, 53 | ), 54 | Padding(padding: EdgeInsets.only(left: 5)), 55 | Text( 56 | Helper.numFormat(this.data.playsCount), 57 | style: TextStyle( 58 | fontSize: 14, 59 | color: Colors.white, 60 | ), 61 | ), 62 | ], 63 | ), 64 | ), 65 | ), 66 | !this.data.needVip ? null : Positioned( 67 | left: 0, 68 | top: 0, 69 | child: Container( 70 | padding: EdgeInsets.fromLTRB(5, 2, 10, 2), 71 | decoration: BoxDecoration( 72 | borderRadius: BorderRadius.only( 73 | topLeft: Radius.circular(4), 74 | bottomRight: Radius.circular(20), 75 | ), 76 | gradient: LinearGradient( 77 | colors: [Color(0xFFA17551), Color(0xFFCCBEB5)]), 78 | ), 79 | child: Text( 80 | 'VIP', 81 | style: TextStyle( 82 | fontSize: 14, 83 | fontWeight: FontWeight.bold, 84 | color: Colors.white, 85 | ), 86 | ), 87 | ), 88 | ), 89 | ].where((item) => item != null).toList(), 90 | ), 91 | ), 92 | ), 93 | Padding(padding: EdgeInsets.only(top: 5)), 94 | SizedBox( 95 | height: 40, 96 | child: Text( 97 | this.data.title, 98 | maxLines: 2, 99 | overflow: TextOverflow.ellipsis, 100 | style: TextStyle( 101 | fontSize: 15, 102 | fontWeight: FontWeight.w500, 103 | color: Color(0xFF333333), 104 | ), 105 | ), 106 | ), 107 | ], 108 | ); 109 | } 110 | } 111 | 112 | class Helper { 113 | static String numFormat(int num) { 114 | if (num / 10000 < 1) { 115 | return 'num'; 116 | } else if (num / 100000000 < 1) { 117 | return '${num ~/ 10000}万'; 118 | } else { 119 | return '${num ~/ 100000000}亿'; 120 | } 121 | } 122 | } 123 | 124 | class ProgrammeViewModel { 125 | /// 节目名称 126 | final String title; 127 | 128 | /// 播放量 129 | final int playsCount; 130 | 131 | /// 封面图地址 132 | final String coverImgUrl; 133 | 134 | /// 是否需要vip才能观看 135 | final bool needVip; 136 | 137 | const ProgrammeViewModel({ 138 | this.title, 139 | this.playsCount, 140 | this.coverImgUrl, 141 | this.needVip, 142 | }); 143 | } 144 | -------------------------------------------------------------------------------- /lib/grid_view/screen_shots/color_grids.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/grid_view/screen_shots/color_grids.png -------------------------------------------------------------------------------- /lib/grid_view/screen_shots/programme_list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/grid_view/screen_shots/programme_list.png -------------------------------------------------------------------------------- /lib/grid_view/screen_shots/service_categories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/grid_view/screen_shots/service_categories.png -------------------------------------------------------------------------------- /lib/grid_view/service_categories.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'service_item.dart'; 4 | import 'mock_data.dart'; 5 | 6 | class ServiceCategories extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return GridView.count( 10 | crossAxisCount: 5, 11 | padding: EdgeInsets.symmetric(vertical: 0), 12 | children: serviceList.map((item) => ServiceItem(data: item)).toList(), 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /lib/grid_view/service_item.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class ServiceItem extends StatelessWidget { 4 | final ServiceItemViewModel data; 5 | 6 | ServiceItem({Key key, this.data}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return Container( 11 | alignment: Alignment.center, 12 | padding: EdgeInsets.only(bottom: 5), 13 | child: Column( 14 | children: [ 15 | Expanded(child: this.data.icon), 16 | Text( 17 | this.data.title, 18 | style: TextStyle( 19 | fontSize: 13, 20 | color: Color(0xFF333333), 21 | ), 22 | ), 23 | ], 24 | ), 25 | ); 26 | } 27 | } 28 | 29 | class ServiceItemViewModel { 30 | /// 图标 31 | final Icon icon; 32 | 33 | /// 标题 34 | final String title; 35 | 36 | const ServiceItemViewModel({ 37 | this.icon, 38 | this.title, 39 | }); 40 | } 41 | -------------------------------------------------------------------------------- /lib/list_view/README.md: -------------------------------------------------------------------------------- 1 | # ListView列表组件 - 示例 2 | 3 | |1. [普通列表](./normal_usage.dart)|2. [公众号列表](./builder_usage.dart)|3. [支付宝好友列表](./separated_usage.dart)| 4 | |----|---|---| 5 | |||| 6 | 7 | |4. [下拉刷新](./pull_down_refresh_usage.dart)|5. [上拉加载](./pull_up_load_more_usage.dart)| 8 | |----|---| 9 | ||| -------------------------------------------------------------------------------- /lib/list_view/builder_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'mock_data.dart'; 4 | import 'subscribe_account_card.dart'; 5 | 6 | class SubscribeAccountList extends StatelessWidget { 7 | const SubscribeAccountList({Key key}) : super(key: key); 8 | 9 | @override 10 | Widget build(BuildContext context) { 11 | return Container( 12 | color: Color(0xFFEFEFEF), 13 | child: ListView.builder( 14 | itemCount: subscribeAccountList.length, 15 | itemBuilder: (context, index) { 16 | return SubscribeAccountCard(data: subscribeAccountList[index]); 17 | }, 18 | ), 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /lib/list_view/friend_card.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class FriendCard extends StatelessWidget { 4 | final FriendViewModel data; 5 | 6 | const FriendCard({ 7 | Key key, 8 | this.data, 9 | }) : super(key: key); 10 | 11 | @override 12 | Widget build(BuildContext context) { 13 | return Container( 14 | color: Colors.white, 15 | padding: EdgeInsets.all(15), 16 | child: Row( 17 | children: [ 18 | ClipRRect( 19 | borderRadius: BorderRadius.circular(4), 20 | child: Image.network( 21 | this.data.userImgUrl, 22 | width: 40, 23 | height: 40, 24 | ), 25 | ), 26 | Padding(padding: EdgeInsets.only(left: 15)), 27 | Expanded( 28 | child: Column( 29 | crossAxisAlignment: CrossAxisAlignment.stretch, 30 | children: [ 31 | Row( 32 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 33 | children: [ 34 | Text( 35 | this.data.userName, 36 | style: TextStyle( 37 | fontSize: 18, 38 | fontWeight: FontWeight.w500, 39 | color: Color(0xFF333333), 40 | ), 41 | ), 42 | Text( 43 | this.data.msgTime, 44 | style: TextStyle( 45 | fontSize: 13, 46 | color: Color(0xFF999999), 47 | ), 48 | ) 49 | ], 50 | ), 51 | Padding(padding: EdgeInsets.only(top: 2)), 52 | Text( 53 | this.data.msgContent, 54 | maxLines: 1, 55 | overflow: TextOverflow.ellipsis, 56 | style: TextStyle( 57 | fontSize: 15, 58 | color: Color(0xFF999999), 59 | ), 60 | ), 61 | ], 62 | ), 63 | ), 64 | ], 65 | ), 66 | ); 67 | } 68 | } 69 | 70 | class FriendViewModel { 71 | /// 用户昵称 72 | final String userName; 73 | 74 | /// 用户头像 75 | final String userImgUrl; 76 | 77 | /// 消息内容 78 | final String msgContent; 79 | 80 | /// 消息收到时间 81 | final String msgTime; 82 | 83 | const FriendViewModel({ 84 | this.userName, 85 | this.userImgUrl, 86 | this.msgContent, 87 | this.msgTime, 88 | }); 89 | } 90 | -------------------------------------------------------------------------------- /lib/list_view/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../common/demo_tabs.dart'; 4 | import 'normal_usage.dart'; 5 | import 'builder_usage.dart'; 6 | import 'separated_usage.dart'; 7 | import 'pull_down_refresh_usage.dart'; 8 | import 'pull_up_load_more_usage.dart'; 9 | 10 | const List demos = [ 11 | DemoTabViewModel(title: '普通用法', widget: NormalList()), 12 | DemoTabViewModel(title: 'builder用法', widget: SubscribeAccountList()), 13 | DemoTabViewModel(title: 'separated用法', widget: FriendList()), 14 | DemoTabViewModel(title: '下拉刷新用法', widget: PullDownRefreshList()), 15 | DemoTabViewModel(title: '上拉加载用法', widget: PullUpLoadMoreList()), 16 | ]; 17 | 18 | class ListViewDemo extends StatefulWidget { 19 | @override 20 | _ListViewDemoState createState() => _ListViewDemoState(); 21 | } 22 | 23 | class _ListViewDemoState extends State 24 | with SingleTickerProviderStateMixin { 25 | TabController tabController; 26 | 27 | @override 28 | void initState() { 29 | super.initState(); 30 | this.tabController = TabController(length: demos.length, vsync: this); 31 | } 32 | 33 | @override 34 | void dispose() { 35 | super.dispose(); 36 | this.tabController.dispose(); 37 | } 38 | 39 | @override 40 | Widget build(BuildContext context) { 41 | return DemoTabs( 42 | title: 'ListView组件', 43 | demos: demos, 44 | tabController: this.tabController, 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /lib/list_view/mock_data.dart: -------------------------------------------------------------------------------- 1 | import 'subscribe_account_card.dart'; 2 | import 'friend_card.dart'; 3 | import 'news_card.dart'; 4 | 5 | /// 公众号列表模拟数据 6 | const List subscribeAccountList = [ 7 | SubscribeAccountViewModel( 8 | accountImgUrl: 'http://wx.qlogo.cn/mmhead/ver_1/ZlEUgMmdukDlDjnIRjqBCSJNBtjWpocqGKGjpA9ImBkictzNPJCllxKXk3iaJ1qHZE8xQNarsH13kPDxDwLfLO3bly9tRKxweAX6ycibpoJENY/132', 9 | accountName: '前端外刊评论', 10 | publishTime: '2小时前', 11 | articles: [ 12 | Article( 13 | title: 'React16新特性全解（上）', 14 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/I4OWBs9UyBtjvym40lSP7MFmcgiaViaSia6iceaDutwREKcxE47k6dob7JgAicxNMVY8cenZ7e4v6jSrZ5ib4e7xC75w/640?wxtype=jpeg&wxfrom=0' 15 | ), 16 | Article( 17 | title: '最近，前端又火了哪些技术？', 18 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/jhtEbpg4m6E58ByJhbGYG6ibHg83xPucTGs0U00bbGpfCy7LAm36ZUVgS34hSmydI8ukZyGMG7W5uA7bJFAbCTw/640?wxtype=jpeg&wxfrom=0' 19 | ), 20 | Article( 21 | title: '开发者需要什么样的技术社区？', 22 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/I4OWBs9UyBtXq8jdK8cghjFjxhbJ9eiak751b8xc0y77L7xVGj4jGhlbI69tbiae4catwyFqE3BiaJLP0ViamOURuw/640?wxtype=jpeg&wxfrom=0' 23 | ) 24 | ], 25 | ), 26 | SubscribeAccountViewModel( 27 | accountImgUrl: 'http://wx.qlogo.cn/mmhead/ver_1/lAMlzCkVacwSrl7nlgP7ye93rVa1ibDyeNTT1CnIianT2f1zoTWVylIHiaG8NZEc4Cmrm4b6OibHqu1RxZRaqXGJadOXUmI3zRMU2lkDvFmIs8U/132', 28 | accountName: '中国日报双语新闻', 29 | publishTime: '16:30', 30 | articles: [ 31 | Article( 32 | title: '微博热搜乱象让人反思，这个时代到底需要什么样的icon？', 33 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/4UmsHtZZRbRzAY2kkJh125BsAhDVHiaOqUFRQCdFSIA6UVngnT9zTjjow2GzHTOTonYmt5xNxlRLkkbUc6ZDeTg/640?wxtype=jpeg&wxfrom=0' 34 | ), 35 | Article( 36 | title: '伊万卡韩国见EXO秒变迷妹？一旁老父亲特朗普的表情亮了', 37 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/qibibGYHXs208l2qNZ0bjPrhicpvYk7fXy5zLyuU4U8yIicuibMaVq4WscJvbgPXibYBibTgY9wySib93IxRIcsKYc4TSQ/300?wxtype=jpeg&wxfrom=0' 38 | ), 39 | Article( 40 | title: '想不到！贫民窟成印度最热门旅游景点', 41 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/qibibGYHXs208l2qNZ0bjPrhicpvYk7fXy50p3iav9HLY7gJGiaibcicQqZoncoLcIKMydrsGa9PSCHQKSnHYicPeyRDlQ/300?wxtype=jpeg&wxfrom=0' 42 | ), 43 | ], 44 | ), 45 | SubscribeAccountViewModel( 46 | accountImgUrl: 'http://wx.qlogo.cn/mmhead/ver_1/cCicCOP5a9icPAkmEW6h6onGqicAbPmhibYq1VhtK0ws2teiaQmO7CcibFibTVeJdJEUZZ2kicXH7yZuwTnBibUUqfxPMZribq31Wq9cSvp4Nwasp6T4E/132', 47 | accountName: 'CSDN', 48 | publishTime: '08:23', 49 | articles: [ 50 | Article( 51 | title: '微信停机断网可充话费；苹果正研发可折叠iPad', 52 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/Pn4Sm0RsAuiav1plfxDmPVM17eetJNY840CQbNTPwRh5LgYJZJAy9UCrgiccrF86HsILam7k6pPyYoNKwbza9sCw/640?wxtype=jpeg&wxfrom=0', 53 | ), 54 | Article( 55 | title: '微软欲打造开发者联盟！', 56 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/1hReHaqafacwZBZG9b2cZjzsiacGXZia2QfUFe0kR2ylz2COK7xibdicXou3f30LlBLZq43Hl1eeA5YFFIC9XrBwtw/300?wxtype=jpeg&wxfrom=0', 57 | ), 58 | Article( 59 | title: '关于第五届全国高校新一代信息技术暑假教师培训班的通知', 60 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/Pn4Sm0RsAuia3kKhScQicSjSfZ5ibmmGEtGR8q33JjAu3kOLzPCv6Kt24uAIlmAicicB7Ct69ZGHnibAVwHsftB4Ac0w/300?wxtype=jpeg&wxfrom=0', 61 | ), 62 | Article( 63 | title: '阿里90后科学家研发，达摩院开源新一代AI算法模型', 64 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/BnSNEaficFAaiagbjE0MibwDhGeKND27DfQuGWCaYCv3QOMcGXz5ZAw6QZooLOEV5o7Lxsm66tWOXBl10OCHF8U3A/300?wxtype=jpeg&wxfrom=0', 65 | ) 66 | ], 67 | ), 68 | SubscribeAccountViewModel( 69 | accountImgUrl: 'http://wx.qlogo.cn/mmhead/ver_1/Yp0beDghkpibRaU5xI4JkWfBK9fWddSdicIqCOaWJT23cQapfsV5iaER5KMIut1Mcs7Ay5dQw5XhdU78tZ0dNFEuAsOI7sNHFGicMzTfqLh5BRw/132', 70 | accountName: '瑞普PPT', 71 | publishTime: '昨天', 72 | articles: [ 73 | Article( 74 | title: '巡讲游记 | 在成都的街头走一走', 75 | coverImgUrl: 'http://mmbiz.qpic.cn/mmbiz_jpg/iaLiboDYic5KNUlXMOibs0whRqGoyGvZGsGIQ2Qibmz6ho6ibFgIhaYBpqV9ntNVmvFKfsfFJHpxTrp4UHLK3XlkkL6Q/640?wxtype=jpeg&wxfrom=0', 76 | ), 77 | ], 78 | ), 79 | ]; 80 | 81 | /// 好友列表模拟数据 82 | const List friendList = [ 83 | FriendViewModel( 84 | userName: '生活缴费', 85 | userImgUrl: 'http://alipay.dl.django.t.taobao.com/rest/1.0/image?fileIds=uYFc1rftQnOzQ6UIysboFQAAACMAAQQD&zoom=original', 86 | msgContent: '听说，这6个人的电费被承包了！', 87 | msgTime: '13:50', 88 | ), 89 | FriendViewModel( 90 | userName: '芝麻信用', 91 | userImgUrl: 'http://dl.django.t.taobao.com/rest/1.0/image?fileIds=3bFvYZLcSNy1TiMriy5WhAAAACMAAQED&zoom=2048w_1l', 92 | msgContent: '本月你的芝麻分评估已完成', 93 | msgTime: '07:17', 94 | ), 95 | FriendViewModel( 96 | userName: '网商银行', 97 | userImgUrl: 'http://alipay.dl.django.t.taobao.com/rest/1.0/image?fileIds=eQgixqanQuOWoptE3Ut_kQAAACMAAQQD&zoom=original', 98 | msgContent: '如何做到日流水460万', 99 | msgTime: '昨天', 100 | ), 101 | FriendViewModel( 102 | userName: '支付宝转账', 103 | userImgUrl: 'http://alipay.dl.django.t.taobao.com/rest/1.0/image?fileIds=eniYmF55SPGp4xhBsdDUpAAAACMAAQQD&zoom=original', 104 | msgContent: '请查收你的转账周报', 105 | msgTime: '昨天', 106 | ), 107 | FriendViewModel( 108 | userName: '蚂蚁森林', 109 | userImgUrl: 'https://oalipay-dl-django.alicdn.com/rest/1.0/image?fileIds=A7j1NJRVSlW9v88b3LRrkgAAACMAAQED&zoom=original', 110 | msgContent: '比花棒还好看的新树种来了！', 111 | msgTime: '星期五', 112 | ), 113 | FriendViewModel( 114 | userName: '蚂蚁庄园', 115 | userImgUrl: 'https://mdn.alipay.com/wsdk/img?fileid=A*7pQiRakjTPoAAAAAAAAAAABjAfYuAQ&bz=life_app&zoom=2048w_80q_1l', 116 | msgContent: '你有一封未读来信', 117 | msgTime: '星期四', 118 | ), 119 | FriendViewModel( 120 | userName: '支付宝车主服务', 121 | userImgUrl: 'https://oalipay-dl-django.alicdn.com/rest/1.0/image?fileIds=AOFWswJjTumOAH5ttFi2gwAAACMAAQED&zoom=2048w_1l', 122 | msgContent: '@所有车主，7月1日起可免费办理ETC啦！', 123 | msgTime: '星期三', 124 | ), 125 | FriendViewModel( 126 | userName: '城市服务', 127 | userImgUrl: 'https://oalipay-dl-django.alicdn.com/rest/1.0/image?fileIds=I-C2YMNfSESeqVw3CaQazQAAACMAAQED&zoom=2048w_80q_1l', 128 | msgContent: '有了它，垃圾再也不怕分错类啦！', 129 | msgTime: '星期二', 130 | ), 131 | FriendViewModel( 132 | userName: '交通出行', 133 | userImgUrl: 'https://mdn.alipay.com/wsdk/img?fileid=A*6R5cQbchQKMAAAAAAAAAAABjAfYuAQ&bz=life_app&zoom=2048w_80q_1l', 134 | msgContent: '领取你的每周出行签 | 送防晒伞', 135 | msgTime: '07-01', 136 | ), 137 | FriendViewModel( 138 | userName: '花呗', 139 | userImgUrl: 'https://oalipay-dl-django.alicdn.com/rest/1.0/image?fileIds=8JCRgxPlQvumNy9RDgtziQAAACMAAQED&zoom=2048w_80q_1l', 140 | msgContent: '帮你还花呗，离欧洲杯更近一点', 141 | msgTime: '06-29', 142 | ), 143 | ]; 144 | 145 | const List newsList = [ 146 | NewsViewModel( 147 | title: '中方将派军舰赴马六甲海峡护航本国船只？外交部：那是谣言', 148 | source: '环球网', 149 | comments: 71, 150 | coverImgUrl: 'https://p3.pstatp.com/list/190x124/pgc-image/RGSD09itseweQ', 151 | ), 152 | NewsViewModel( 153 | title: '211高校被误认野鸡大学发怒，名气还没“野鸡”大', 154 | source: '中国新闻周刊', 155 | comments: 980, 156 | coverImgUrl: 'https://p1.pstatp.com/list/190x124/pgc-image/7026a3edfe2b47f59eea94f2b8cd86a4', 157 | ), 158 | NewsViewModel( 159 | title: '广西矿王黎东明去世：瞒报81死矿难，把记者逼到悬崖边，遭售货员白眼后买下整柜台皮鞋', 160 | source: '大河看法', 161 | comments: 2759, 162 | coverImgUrl: 'https://p1.pstatp.com/list/190x124/pgc-image/c14366a3b7ab4a3384e3485697d103fe', 163 | ), 164 | NewsViewModel( 165 | title: '六旬父亲“为儿追凶”16年：“赔多少钱都不要，就要他偿命”', 166 | source: '中国新闻周刊', 167 | comments: 20645, 168 | coverImgUrl: 'https://p3.pstatp.com/list/190x124/pgc-image/c55f17d3a3ac4efe8eaedafdab111079', 169 | ), 170 | NewsViewModel( 171 | title: '五问玛莎拉蒂追尾案：肇事女孩有何背景？或面临死刑？', 172 | source: '环球网', 173 | comments: 2121, 174 | coverImgUrl: 'https://p1.pstatp.com/list/190x124/pgc-image/RVi866A4f9cVK2', 175 | ), 176 | NewsViewModel( 177 | title: '李若彤：当年为爱作出任性选择，如今看来都是最好的安排', 178 | source: '新京报', 179 | comments: 243, 180 | coverImgUrl: 'https://p3.pstatp.com/list/190x124/pgc-image/RVLwKBq5IQMvCW', 181 | ), 182 | NewsViewModel( 183 | title: '好惨一首都！“史诗级”暴雨把华盛顿淹成了……这个样子', 184 | source: '环球网', 185 | comments: 750, 186 | coverImgUrl: 'https://p1.pstatp.com/list/190x124/pgc-image/RVic5NyDDeVAi0' 187 | ), 188 | NewsViewModel( 189 | title: '原子弹爆炸半衰期动不动几万年，为何广岛和长崎现在就能居住了？', 190 | source: '怪罗科普', 191 | comments: 325, 192 | coverImgUrl: 'https://p1.pstatp.com/list/190x124/pgc-image/317a92302937426c999ea9a5b52121b1' 193 | ), 194 | NewsViewModel( 195 | title: '马超和关羽到底谁强？古书记载颠覆历史，学者：根本不是一个级别', 196 | source: '田君良', 197 | comments: 856, 198 | coverImgUrl: 'https://p3.pstatp.com/list/190x124/pgc-image/470fb21c5c884b119116179813b82d2b' 199 | ), 200 | ]; -------------------------------------------------------------------------------- /lib/list_view/news_card.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class NewsCard extends StatelessWidget { 4 | 5 | final NewsViewModel data; 6 | 7 | const NewsCard({Key key, this.data}) : super(key: key); 8 | 9 | @override 10 | Widget build(BuildContext context) { 11 | return Container( 12 | padding: EdgeInsets.all(16), 13 | child: Row( 14 | children: [ 15 | Expanded( 16 | child: Column( 17 | crossAxisAlignment: CrossAxisAlignment.start, 18 | children: [ 19 | Text( 20 | this.data.title, 21 | maxLines: 2, 22 | overflow: TextOverflow.ellipsis, 23 | style: TextStyle( 24 | fontSize: 17, 25 | fontWeight: FontWeight.bold, 26 | color: Color(0xFF333333), 27 | ), 28 | ), 29 | Padding(padding: EdgeInsets.only(top: 3)), 30 | Row( 31 | children: [ 32 | Text( 33 | '${this.data.source} ${this.data.comments}评论', 34 | style: TextStyle( 35 | fontSize: 13, 36 | color: Color(0xFF999999), 37 | ), 38 | ), 39 | ], 40 | ), 41 | ], 42 | ), 43 | ), 44 | Padding(padding: EdgeInsets.only(left: 16)), 45 | Image.network( 46 | this.data.coverImgUrl, 47 | width: 100, 48 | height: 60, 49 | fit: BoxFit.cover, 50 | ), 51 | ], 52 | ), 53 | ); 54 | } 55 | } 56 | 57 | class NewsViewModel { 58 | /// 新闻标题 59 | final String title; 60 | 61 | /// 来源 62 | final String source; 63 | 64 | /// 评论数量 65 | final int comments; 66 | 67 | /// 新闻配图 68 | final String coverImgUrl; 69 | 70 | const NewsViewModel({ 71 | this.title, 72 | this.source, 73 | this.comments, 74 | this.coverImgUrl, 75 | }); 76 | } 77 | -------------------------------------------------------------------------------- /lib/list_view/normal_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../basic_widgets/mock_data.dart'; 4 | import '../basic_widgets/pet_card.dart'; 5 | import '../basic_widgets/credit_card.dart'; 6 | import '../basic_widgets/friend_circle.dart'; 7 | 8 | class NormalList extends StatelessWidget { 9 | 10 | const NormalList({Key key}) : super(key: key); 11 | 12 | @override 13 | Widget build(BuildContext context) { 14 | return ListView( 15 | children: [ 16 | CreditCard(data: creditCardData), 17 | PetCard(data: petCardData), 18 | FriendCircle(data: friendCircleData), 19 | ], 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /lib/list_view/pull_down_refresh_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:toast/toast.dart'; 3 | 4 | import 'mock_data.dart'; 5 | import 'news_card.dart'; 6 | 7 | class PullDownRefreshList extends StatefulWidget { 8 | const PullDownRefreshList({Key key}) : super(key: key); 9 | 10 | @override 11 | _PullDownRefreshListState createState() => _PullDownRefreshListState(); 12 | } 13 | 14 | class _PullDownRefreshListState extends State { 15 | 16 | List list = newsList; 17 | 18 | Future onRefresh() { 19 | return Future.delayed(Duration(seconds: 1), () { 20 | Toast.show('当前已是最新数据', context); 21 | }); 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return RefreshIndicator( 27 | onRefresh: this.onRefresh, 28 | child: ListView.separated( 29 | itemCount: this.list.length, 30 | itemBuilder: (context, index) { 31 | return NewsCard(data: this.list[index]); 32 | }, 33 | separatorBuilder: (context, index) { 34 | return Divider(height: .5, color: Color(0xFFDDDDDD)); 35 | }, 36 | ), 37 | ); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /lib/list_view/pull_up_load_more_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'mock_data.dart'; 4 | import 'news_card.dart'; 5 | 6 | class PullUpLoadMoreList extends StatefulWidget { 7 | const PullUpLoadMoreList({Key key}) : super(key: key); 8 | 9 | @override 10 | _PullUpLoadMoreListState createState() => _PullUpLoadMoreListState(); 11 | } 12 | 13 | class _PullUpLoadMoreListState extends State { 14 | bool isLoading = false; 15 | ScrollController scrollController = ScrollController(); 16 | List list = List.from(newsList); 17 | 18 | @override 19 | void initState() { 20 | super.initState(); 21 | this.scrollController.addListener(() { 22 | if ( 23 | !this.isLoading && 24 | this.scrollController.position.pixels >= this.scrollController.position.maxScrollExtent 25 | ) { 26 | setState(() { 27 | this.isLoading = true; 28 | this.loadMoreData(); 29 | }); 30 | } 31 | }); 32 | } 33 | 34 | @override 35 | void dispose() { 36 | super.dispose(); 37 | this.scrollController.dispose(); 38 | } 39 | 40 | Future loadMoreData() { 41 | return Future.delayed(Duration(seconds: 1), () { 42 | setState(() { 43 | this.isLoading = false; 44 | this.list.addAll(newsList); 45 | }); 46 | }); 47 | } 48 | 49 | Widget renderBottom() { 50 | if(this.isLoading) { 51 | return Container( 52 | padding: EdgeInsets.symmetric(vertical: 15), 53 | child: Row( 54 | mainAxisAlignment: MainAxisAlignment.center, 55 | children: [ 56 | Text( 57 | '努力加载中...', 58 | style: TextStyle( 59 | fontSize: 15, 60 | color: Color(0xFF333333), 61 | ), 62 | ), 63 | Padding(padding: EdgeInsets.only(left: 10)), 64 | SizedBox( 65 | width: 20, 66 | height: 20, 67 | child: CircularProgressIndicator(strokeWidth: 3), 68 | ), 69 | ], 70 | ), 71 | ); 72 | } else { 73 | return Container( 74 | padding: EdgeInsets.symmetric(vertical: 15), 75 | alignment: Alignment.center, 76 | child: Text( 77 | '上拉加载更多', 78 | style: TextStyle( 79 | fontSize: 15, 80 | color: Color(0xFF333333), 81 | ), 82 | ), 83 | ); 84 | } 85 | } 86 | 87 | @override 88 | Widget build(BuildContext context) { 89 | return ListView.separated( 90 | controller: this.scrollController, 91 | itemCount: this.list.length + 1, 92 | separatorBuilder: (context, index) { 93 | return Divider(height: .5, color: Color(0xFFDDDDDD)); 94 | }, 95 | itemBuilder: (context, index) { 96 | if (index < this.list.length) { 97 | return NewsCard(data: this.list[index]); 98 | } else { 99 | return this.renderBottom(); 100 | } 101 | }, 102 | ); 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /lib/list_view/screen_shots/builder_usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/list_view/screen_shots/builder_usage.gif -------------------------------------------------------------------------------- /lib/list_view/screen_shots/normal_usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/list_view/screen_shots/normal_usage.gif -------------------------------------------------------------------------------- /lib/list_view/screen_shots/pull_down_refresh_usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/list_view/screen_shots/pull_down_refresh_usage.gif -------------------------------------------------------------------------------- /lib/list_view/screen_shots/pull_up_load_more_usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/list_view/screen_shots/pull_up_load_more_usage.gif -------------------------------------------------------------------------------- /lib/list_view/screen_shots/separated_usage.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/list_view/screen_shots/separated_usage.gif -------------------------------------------------------------------------------- /lib/list_view/separated_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'mock_data.dart'; 4 | import 'friend_card.dart'; 5 | 6 | class FriendList extends StatelessWidget { 7 | const FriendList({Key key}) : super(key: key); 8 | 9 | @override 10 | Widget build(BuildContext context) { 11 | return ListView.separated( 12 | itemCount: friendList.length, 13 | itemBuilder: (context, index) { 14 | return FriendCard(data: friendList[index]); 15 | }, 16 | separatorBuilder: (context, index) { 17 | return Divider( 18 | height: .5, 19 | indent: 75, 20 | color: Color(0xFFDDDDDD), 21 | ); 22 | }, 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /lib/list_view/subscribe_account_card.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class SubscribeAccountCard extends StatelessWidget { 4 | final SubscribeAccountViewModel data; 5 | 6 | const SubscribeAccountCard({ 7 | Key key, 8 | this.data, 9 | }) : super(key: key); 10 | 11 | Widget renderAccountInfo() { 12 | return Padding( 13 | padding: EdgeInsets.all(8), 14 | child: Row( 15 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 16 | children: [ 17 | Row( 18 | children: [ 19 | CircleAvatar( 20 | radius: 15, 21 | backgroundColor: Colors.grey, 22 | backgroundImage: NetworkImage(this.data.accountImgUrl), 23 | ), 24 | Padding(padding: EdgeInsets.only(left: 10)), 25 | Text( 26 | this.data.accountName, 27 | style: TextStyle( 28 | fontSize: 15, 29 | fontWeight: FontWeight.w500, 30 | color: Color(0xFF666666), 31 | ), 32 | ), 33 | ], 34 | ), 35 | Text( 36 | this.data.publishTime, 37 | style: TextStyle( 38 | fontSize: 13, 39 | color: Color(0xFF999999), 40 | ), 41 | ), 42 | ], 43 | ), 44 | ); 45 | } 46 | 47 | Widget renderCover() { 48 | final article = this.data.articles[0]; 49 | final shouldClip = this.data.articles.length <= 1; 50 | return ClipRRect( 51 | borderRadius: !shouldClip 52 | ? BorderRadius.circular(0) 53 | : BorderRadius.only( 54 | bottomLeft: Radius.circular(8), 55 | bottomRight: Radius.circular(8), 56 | ), 57 | child: Stack( 58 | fit: StackFit.passthrough, 59 | children: [ 60 | Image.network( 61 | article.coverImgUrl, 62 | height: 150, 63 | fit: BoxFit.cover, 64 | ), 65 | Positioned( 66 | left: 0, 67 | right: 0, 68 | bottom: 0, 69 | height: 100, 70 | child: Container( 71 | padding: EdgeInsets.fromLTRB(10, 0, 10, 10), 72 | alignment: Alignment.bottomLeft, 73 | decoration: BoxDecoration( 74 | gradient: LinearGradient( 75 | begin: Alignment.topCenter, 76 | end: Alignment.bottomCenter, 77 | colors: [Colors.transparent, Colors.black54], 78 | ), 79 | ), 80 | child: Text( 81 | article.title, 82 | maxLines: 2, 83 | overflow: TextOverflow.ellipsis, 84 | style: TextStyle( 85 | fontSize: 20, 86 | fontWeight: FontWeight.w500, 87 | color: Colors.white, 88 | ), 89 | ), 90 | ), 91 | ), 92 | ], 93 | ), 94 | ); 95 | } 96 | 97 | Widget renderArticles() { 98 | final articles = this.data.articles.sublist(1); 99 | return ListView.separated( 100 | shrinkWrap: true, 101 | itemCount: articles.length, 102 | physics: NeverScrollableScrollPhysics(), 103 | separatorBuilder: (context, index) { 104 | return Container( 105 | height: .5, 106 | margin: EdgeInsets.symmetric(horizontal: 15), 107 | color: Color(0xFFDDDDDD), 108 | ); 109 | }, 110 | itemBuilder: (context, index) { 111 | return Padding( 112 | padding: EdgeInsets.all(15), 113 | child: Row( 114 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 115 | crossAxisAlignment: CrossAxisAlignment.start, 116 | children: [ 117 | Expanded( 118 | child: Text( 119 | articles[index].title, 120 | maxLines: 2, 121 | overflow: TextOverflow.ellipsis, 122 | style: TextStyle( 123 | fontSize: 16, 124 | fontWeight: FontWeight.w500, 125 | color: Color(0xFF333333), 126 | ), 127 | ), 128 | ), 129 | Padding(padding: EdgeInsets.all(10)), 130 | Image.network( 131 | articles[index].coverImgUrl, 132 | width: 50, 133 | height: 50, 134 | fit: BoxFit.cover, 135 | ), 136 | ], 137 | ), 138 | ); 139 | }, 140 | ); 141 | } 142 | 143 | @override 144 | Widget build(BuildContext context) { 145 | return Container( 146 | margin: EdgeInsets.fromLTRB(16, 16, 16, 0), 147 | decoration: BoxDecoration( 148 | color: Colors.white, 149 | borderRadius: BorderRadius.circular(8), 150 | ), 151 | child: Column( 152 | crossAxisAlignment: CrossAxisAlignment.stretch, 153 | children: [ 154 | this.renderAccountInfo(), 155 | this.renderCover(), 156 | this.renderArticles(), 157 | ], 158 | ), 159 | ); 160 | } 161 | } 162 | 163 | class SubscribeAccountViewModel { 164 | /// 公众号头像 165 | final String accountImgUrl; 166 | 167 | /// 公众号名字 168 | final String accountName; 169 | 170 | /// 发布时间 171 | final String publishTime; 172 | 173 | /// 文章列表 174 | final List
articles; 175 | 176 | const SubscribeAccountViewModel({ 177 | this.accountImgUrl, 178 | this.accountName, 179 | this.publishTime, 180 | this.articles, 181 | }); 182 | } 183 | 184 | class Article { 185 | /// 封面图 186 | final String coverImgUrl; 187 | 188 | /// 文章标题 189 | final String title; 190 | 191 | const Article({ 192 | this.coverImgUrl, 193 | this.title, 194 | }); 195 | } 196 | -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'basic_widgets/index.dart'; 4 | import 'list_view/index.dart'; 5 | import 'grid_view/index.dart'; 6 | import 'custom_icon/index.dart'; 7 | import 'sliver_widgets/index.dart'; 8 | 9 | void main() => runApp(MyApp()); 10 | 11 | class MyApp extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return MaterialApp( 15 | title: 'Flutter Demo', 16 | theme: ThemeData( 17 | primarySwatch: Colors.blue, 18 | ), 19 | home: HomePage(), 20 | routes: { 21 | 'basic_widgets': (context) => BasicWidgetsDemo(), 22 | 'list_view': (context) => ListViewDemo(), 23 | 'grid_view': (context) => GridViewDemo(), 24 | 'custom_icons': (context) => CustomIconsDemo(), 25 | 'sliver_widgets': (context) => SliverWidgetsDemo() 26 | }, 27 | ); 28 | } 29 | } 30 | 31 | /// 颜色 32 | const List COLORS = [ 33 | Color(0xFFFF4777), 34 | Color(0xFFCA6924), 35 | Color(0xFF00BC12), 36 | Color(0xFF725E82), 37 | Color(0xFFFFA400), 38 | Color(0xFFDD7160), 39 | Color(0xFF5D513C), 40 | Color(0xFFD180D2), 41 | ]; 42 | 43 | /// 例子 44 | const DEMOS = [ 45 | Demo( 46 | title: '基础组件', 47 | description: '容器、行、列、文字、图片、图标等最常用组件，是构成界面的基础', 48 | routeName: 'basic_widgets', 49 | ), 50 | Demo( 51 | title: 'ListView组件', 52 | description: '滚动型容器列表组件，支持下拉刷新，上拉加载等交互操作', 53 | routeName: 'list_view', 54 | ), 55 | Demo( 56 | title: 'GridView组件', 57 | description: '网格布局，支持自定义每行显示的列数以及每一格的宽高比例', 58 | routeName: 'grid_view', 59 | ), 60 | Demo( 61 | title: '自定义Icon图标', 62 | description: '下载ttf字体文件，fonts声明，根据unicode码对照生成语义的图标类型', 63 | routeName: 'custom_icons', 64 | ), 65 | Demo( 66 | title: 'Sliver系列组件', 67 | description: '自定义高级滚动组件，float、snap、pinned效果任你组合', 68 | routeName: 'sliver_widgets', 69 | ), 70 | ]; 71 | 72 | class Demo { 73 | /// 标题 74 | final String title; 75 | 76 | /// 描述 77 | final String description; 78 | 79 | /// 路由名 80 | final String routeName; 81 | 82 | const Demo({ 83 | this.title, 84 | this.description, 85 | this.routeName, 86 | }); 87 | } 88 | 89 | class HomePage extends StatelessWidget { 90 | @override 91 | Widget build(BuildContext context) { 92 | return Scaffold( 93 | appBar: AppBar( 94 | centerTitle: true, 95 | title: Text('Flutter Training'), 96 | ), 97 | body: GridView.builder( 98 | itemCount: DEMOS.length, 99 | padding: EdgeInsets.all(16), 100 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 101 | crossAxisCount: 2, 102 | crossAxisSpacing: 16, 103 | mainAxisSpacing: 16, 104 | childAspectRatio: 1.0, 105 | ), 106 | itemBuilder: (context, index) { 107 | return FlatButton( 108 | onPressed: () => Navigator.pushNamed(context, DEMOS[index].routeName), 109 | color: COLORS[index % COLORS.length], 110 | shape: RoundedRectangleBorder( 111 | borderRadius: BorderRadius.circular(8), 112 | ), 113 | child: Column( 114 | mainAxisAlignment: MainAxisAlignment.center, 115 | crossAxisAlignment: CrossAxisAlignment.start, 116 | children: [ 117 | Expanded( 118 | flex: 1, 119 | child: Center( 120 | child: Text( 121 | DEMOS[index].title, 122 | style: TextStyle( 123 | fontSize: 20, 124 | fontWeight: FontWeight.bold, 125 | color: Colors.white, 126 | ), 127 | ), 128 | ), 129 | ), 130 | Expanded( 131 | flex: 1, 132 | child: Text( 133 | DEMOS[index].description, 134 | maxLines: 3, 135 | overflow: TextOverflow.ellipsis, 136 | style: TextStyle( 137 | fontSize: 14, 138 | fontWeight: FontWeight.bold, 139 | color: Colors.white70, 140 | ), 141 | ), 142 | ), 143 | ], 144 | ), 145 | ); 146 | }, 147 | ), 148 | ); 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /lib/sliver_widgets/README.md: -------------------------------------------------------------------------------- 1 | # CustomScrollView和Sliver系列 - 示例 2 | 3 | |1. [SliverList和SliverGrid](./basic_usage.dart)|2. [SliverAppBar float效果](./float_usage.dart)|3. [SliverAppBar snap效果](./snap_usage.dart)| 4 | |----|---|---| 5 | |||| 6 | 7 | |4. [SliverAppBar pinned效果](./pinned_usage.dart)|5. [sticky吸顶效果](./sticky_usage.dart)|6. [自定义头部](./custom_sliver_header_usage.dart)| 8 | |----|---|---| 9 | |||| -------------------------------------------------------------------------------- /lib/sliver_widgets/basic_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | final List colorList = [ 4 | Colors.red, 5 | Colors.orange, 6 | Colors.green, 7 | Colors.purple, 8 | Colors.blue, 9 | Colors.yellow, 10 | Colors.pink, 11 | Colors.teal, 12 | Colors.deepPurpleAccent 13 | ]; 14 | 15 | class BasicDemo extends StatelessWidget { 16 | final String title; 17 | 18 | BasicDemo({Key key, @required this.title}) : super(key: key); 19 | 20 | Widget renderTitle(String title) { 21 | return SliverToBoxAdapter( 22 | child: Padding( 23 | padding: EdgeInsets.symmetric(vertical: 16), 24 | child: Text( 25 | title, 26 | textAlign: TextAlign.center, 27 | style: TextStyle(fontSize: 20), 28 | ), 29 | ), 30 | ); 31 | } 32 | 33 | @override 34 | Widget build(BuildContext context) { 35 | return Scaffold( 36 | appBar: AppBar( 37 | title: Text(this.title), 38 | ), 39 | body: CustomScrollView( 40 | slivers: [ 41 | this.renderTitle('SliverGrid'), 42 | SliverGrid.count( 43 | crossAxisCount: 3, 44 | children: colorList.map((color) => Container(color: color)).toList(), 45 | ), 46 | this.renderTitle('SliverList'), 47 | SliverFixedExtentList( 48 | delegate: SliverChildBuilderDelegate( 49 | (context, index) => Container(color: colorList[index]), 50 | childCount: colorList.length, 51 | ), 52 | itemExtent: 100, 53 | ), 54 | ], 55 | ), 56 | ); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /lib/sliver_widgets/custom_sliver_header_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/services.dart'; 3 | 4 | class CustomSliverHeaderDemo extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return Scaffold( 8 | body: CustomScrollView( 9 | slivers: [ 10 | SliverPersistentHeader( 11 | pinned: true, 12 | delegate: SliverCustomHeaderDelegate( 13 | title: '哪吒之魔童降世', 14 | collapsedHeight: 40, 15 | expandedHeight: 300, 16 | paddingTop: MediaQuery.of(context).padding.top, 17 | coverImgUrl: 'https://img.zcool.cn/community/01c6615d3ae047a8012187f447cfef.jpg@1280w_1l_2o_100sh.jpg' 18 | ), 19 | ), 20 | SliverFillRemaining( 21 | child: FilmContent(), 22 | ) 23 | ], 24 | ), 25 | ); 26 | } 27 | } 28 | 29 | class SliverCustomHeaderDelegate extends SliverPersistentHeaderDelegate { 30 | final double collapsedHeight; 31 | final double expandedHeight; 32 | final double paddingTop; 33 | final String coverImgUrl; 34 | final String title; 35 | String statusBarMode = 'dark'; 36 | 37 | SliverCustomHeaderDelegate({ 38 | this.collapsedHeight, 39 | this.expandedHeight, 40 | this.paddingTop, 41 | this.coverImgUrl, 42 | this.title, 43 | }); 44 | 45 | @override 46 | double get minExtent => this.collapsedHeight + this.paddingTop; 47 | 48 | @override 49 | double get maxExtent => this.expandedHeight; 50 | 51 | @override 52 | bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) { 53 | return true; 54 | } 55 | 56 | void updateStatusBarBrightness(shrinkOffset) { 57 | if(shrinkOffset > 50 && this.statusBarMode == 'dark') { 58 | this.statusBarMode = 'light'; 59 | SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( 60 | statusBarBrightness: Brightness.light, 61 | statusBarIconBrightness: Brightness.light, 62 | )); 63 | } else if(shrinkOffset <= 50 && this.statusBarMode == 'light') { 64 | this.statusBarMode = 'dark'; 65 | SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( 66 | statusBarBrightness: Brightness.dark, 67 | statusBarIconBrightness: Brightness.dark, 68 | )); 69 | } 70 | } 71 | 72 | Color makeStickyHeaderBgColor(shrinkOffset) { 73 | final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255).clamp(0, 255).toInt(); 74 | return Color.fromARGB(alpha, 255, 255, 255); 75 | } 76 | 77 | Color makeStickyHeaderTextColor(shrinkOffset, isIcon) { 78 | if(shrinkOffset <= 50) { 79 | return isIcon ? Colors.white : Colors.transparent; 80 | } else { 81 | final int alpha = (shrinkOffset / (this.maxExtent - this.minExtent) * 255).clamp(0, 255).toInt(); 82 | return Color.fromARGB(alpha, 0, 0, 0); 83 | } 84 | } 85 | 86 | @override 87 | Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { 88 | this.updateStatusBarBrightness(shrinkOffset); 89 | return Container( 90 | height: this.maxExtent, 91 | width: MediaQuery.of(context).size.width, 92 | child: Stack( 93 | fit: StackFit.expand, 94 | children: [ 95 | Container(child: Image.network(this.coverImgUrl, fit: BoxFit.cover)), 96 | Positioned( 97 | left: 0, 98 | top: this.maxExtent / 2, 99 | right: 0, 100 | bottom: 0, 101 | child: Container( 102 | decoration: BoxDecoration( 103 | gradient: LinearGradient( 104 | begin: Alignment.topCenter, 105 | end: Alignment.bottomCenter, 106 | colors: [ 107 | Color(0x00000000), 108 | Color(0x90000000), 109 | ], 110 | ), 111 | ), 112 | ), 113 | ), 114 | Positioned( 115 | left: 0, 116 | right: 0, 117 | top: 0, 118 | child: Container( 119 | color: this.makeStickyHeaderBgColor(shrinkOffset), 120 | child: SafeArea( 121 | bottom: false, 122 | child: Container( 123 | height: this.collapsedHeight, 124 | child: Row( 125 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 126 | children: [ 127 | IconButton( 128 | icon: Icon( 129 | Icons.arrow_back_ios, 130 | color: this.makeStickyHeaderTextColor(shrinkOffset, true), 131 | ), 132 | onPressed: () => Navigator.pop(context), 133 | ), 134 | Text( 135 | this.title, 136 | style: TextStyle( 137 | fontSize: 20, 138 | fontWeight: FontWeight.w500, 139 | color: this.makeStickyHeaderTextColor(shrinkOffset, false), 140 | ), 141 | ), 142 | IconButton( 143 | icon: Icon( 144 | Icons.share, 145 | color: this.makeStickyHeaderTextColor(shrinkOffset, true), 146 | ), 147 | onPressed: () {}, 148 | ), 149 | ], 150 | ), 151 | ), 152 | ), 153 | ), 154 | ), 155 | ], 156 | ), 157 | ); 158 | } 159 | } 160 | 161 | class FilmContent extends StatelessWidget { 162 | @override 163 | Widget build(BuildContext context) { 164 | return Padding( 165 | padding: const EdgeInsets.all(16), 166 | child: Column( 167 | crossAxisAlignment: CrossAxisAlignment.start, 168 | children: [ 169 | Row( 170 | crossAxisAlignment: CrossAxisAlignment.start, 171 | children: [ 172 | ClipRRect( 173 | borderRadius: BorderRadius.circular(6), 174 | child: Image.network( 175 | 'https://img1.gamersky.com/image2019/07/20190725_ll_red_136_2/gamersky_07small_14_201972510258D0.jpg', 176 | width: 130, 177 | height: 180, 178 | fit: BoxFit.cover, 179 | ), 180 | ), 181 | Padding(padding: EdgeInsets.only(left: 16)), 182 | Column( 183 | crossAxisAlignment: CrossAxisAlignment.start, 184 | children: [ 185 | Text( 186 | '哪吒之魔童降世', 187 | style: TextStyle( 188 | fontSize: 25, 189 | fontWeight: FontWeight.bold, 190 | color: Color(0xFF333333), 191 | ), 192 | ), 193 | Padding(padding: EdgeInsets.only(top: 10)), 194 | Text( 195 | '动画/中国大陆/110分钟', 196 | style: TextStyle( 197 | fontSize: 15, 198 | color: Color(0xFF999999), 199 | ), 200 | ), 201 | Padding(padding: EdgeInsets.only(top: 2)), 202 | Text( 203 | '2019-07-26 08:00 中国大陆上映', 204 | style: TextStyle( 205 | fontSize: 15, 206 | color: Color(0xFF999999), 207 | ), 208 | ), 209 | Padding(padding: EdgeInsets.only(top: 2)), 210 | Text( 211 | '32.1万人想看/大V推荐度95%', 212 | style: TextStyle( 213 | fontSize: 15, 214 | color: Color(0xFF999999), 215 | ), 216 | ), 217 | ], 218 | ), 219 | ], 220 | ), 221 | Divider(height: 32), 222 | Column( 223 | crossAxisAlignment: CrossAxisAlignment.start, 224 | children: [ 225 | Text( 226 | '剧情简介', 227 | style: TextStyle( 228 | fontSize: 25, 229 | fontWeight: FontWeight.bold, 230 | color: Color(0xFF333333), 231 | ), 232 | ), 233 | Padding(padding: EdgeInsets.only(top: 10)), 234 | Text( 235 | '天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错，灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？', 236 | textAlign: TextAlign.justify, 237 | style: TextStyle( 238 | fontSize: 15, 239 | color: Color(0xFF999999), 240 | ), 241 | ), 242 | ], 243 | ), 244 | ], 245 | ), 246 | ); 247 | } 248 | } -------------------------------------------------------------------------------- /lib/sliver_widgets/float_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class FloatDemo extends StatelessWidget { 4 | final String title; 5 | 6 | FloatDemo({Key key, @required this.title}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return Scaffold( 11 | body: CustomScrollView( 12 | slivers: [ 13 | SliverAppBar( 14 | floating: true, 15 | expandedHeight: 250, 16 | elevation: 0, 17 | flexibleSpace: FlexibleSpaceBar( 18 | title: Text(this.title), 19 | background: Image.network( 20 | 'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg', 21 | fit: BoxFit.cover, 22 | ), 23 | ), 24 | ), 25 | SliverFixedExtentList( 26 | delegate: SliverChildBuilderDelegate( 27 | (context, index) { 28 | final isOdd = index % 2 == 1; 29 | return Container( 30 | alignment: Alignment.center, 31 | color: isOdd ? Colors.white : Color(0xFFEAEAEA), 32 | child: Text( 33 | index.toString(), 34 | style: TextStyle( 35 | fontSize: 30, 36 | fontWeight: FontWeight.w500, 37 | color: Colors.black, 38 | ), 39 | ), 40 | ); 41 | }, 42 | childCount: 50, 43 | ), 44 | itemExtent: 80, 45 | ), 46 | ], 47 | ), 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /lib/sliver_widgets/index.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'basic_usage.dart'; 4 | import 'float_usage.dart'; 5 | import 'pinned_usage.dart'; 6 | import 'snap_usage.dart'; 7 | import 'sticky_usage.dart'; 8 | import 'custom_sliver_header_usage.dart'; 9 | 10 | final List demos = [ 11 | DemoViewModal( 12 | title: 'Sliver - Grid和List混合使用', 13 | demo: BasicDemo(title: 'Sliver - Grid和List混合使用'), 14 | ), 15 | DemoViewModal( 16 | title: 'Sliver - float效果', 17 | demo: FloatDemo(title: 'Sliver - float效果'), 18 | ), 19 | DemoViewModal( 20 | title: 'Sliver - snap效果', 21 | demo: SnapDemo(title: 'Sliver - snap效果'), 22 | ), 23 | DemoViewModal( 24 | title: 'Sliver - pinned效果', 25 | demo: PinnedDemo(title: 'Sliver - pinned效果'), 26 | ), 27 | DemoViewModal( 28 | title: 'Sliver - sticky效果', 29 | demo: StickyDemo(title: 'Sliver - sticky效果'), 30 | ), 31 | DemoViewModal( 32 | title: 'Sliver - 自定义效果', 33 | demo: CustomSliverHeaderDemo(), 34 | ), 35 | ]; 36 | 37 | class DemoViewModal { 38 | final String title; 39 | final Widget demo; 40 | 41 | DemoViewModal({this.title, this.demo}); 42 | } 43 | 44 | class SliverWidgetsDemo extends StatelessWidget { 45 | @override 46 | Widget build(BuildContext context) { 47 | return Scaffold( 48 | appBar: AppBar( 49 | title: Text('Sliver系列组件'), 50 | ), 51 | body: ListView.builder( 52 | itemCount: demos.length, 53 | itemBuilder: (context, index) { 54 | return Padding( 55 | padding: EdgeInsets.fromLTRB(20, 20, 20, 0), 56 | child: RaisedButton( 57 | padding: EdgeInsets.symmetric(vertical: 13), 58 | shape: RoundedRectangleBorder( 59 | borderRadius: BorderRadius.circular(4), 60 | ), 61 | onPressed: () { 62 | Navigator.push( 63 | context, 64 | MaterialPageRoute( 65 | builder: (context) => demos[index].demo, 66 | ), 67 | ); 68 | }, 69 | child: Text(demos[index].title), 70 | ), 71 | ); 72 | }, 73 | ), 74 | ); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /lib/sliver_widgets/pinned_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class PinnedDemo extends StatelessWidget { 4 | final String title; 5 | 6 | PinnedDemo({Key key, @required this.title}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return Scaffold( 11 | body: CustomScrollView( 12 | slivers: [ 13 | SliverAppBar( 14 | pinned: true, 15 | expandedHeight: 250, 16 | elevation: 0, 17 | flexibleSpace: FlexibleSpaceBar( 18 | title: Text(this.title), 19 | background: Image.network( 20 | 'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg', 21 | fit: BoxFit.cover, 22 | ), 23 | ), 24 | ), 25 | SliverFixedExtentList( 26 | delegate: SliverChildBuilderDelegate( 27 | (context, index) { 28 | final isOdd = index % 2 == 1; 29 | return Container( 30 | alignment: Alignment.center, 31 | color: isOdd ? Colors.white : Color(0xFFEAEAEA), 32 | child: Text( 33 | index.toString(), 34 | style: TextStyle( 35 | fontSize: 30, 36 | fontWeight: FontWeight.w500, 37 | color: Colors.black, 38 | ), 39 | ), 40 | ); 41 | }, 42 | childCount: 50, 43 | ), 44 | itemExtent: 80, 45 | ), 46 | ], 47 | ), 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /lib/sliver_widgets/screen_shots/custom-sliver-header.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/sliver_widgets/screen_shots/custom-sliver-header.gif -------------------------------------------------------------------------------- /lib/sliver_widgets/screen_shots/sliverAppBar-float.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/sliver_widgets/screen_shots/sliverAppBar-float.gif -------------------------------------------------------------------------------- /lib/sliver_widgets/screen_shots/sliverAppBar-pinned.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/sliver_widgets/screen_shots/sliverAppBar-pinned.gif -------------------------------------------------------------------------------- /lib/sliver_widgets/screen_shots/sliverAppBar-snap.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/sliver_widgets/screen_shots/sliverAppBar-snap.gif -------------------------------------------------------------------------------- /lib/sliver_widgets/screen_shots/sliverList-sliverGrid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/sliver_widgets/screen_shots/sliverList-sliverGrid.gif -------------------------------------------------------------------------------- /lib/sliver_widgets/screen_shots/sticky-tabBar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SmallStoneSK/flutter_training_app/28d8fbf72cbdaea76ad1338ffb58458c1eed77be/lib/sliver_widgets/screen_shots/sticky-tabBar.gif -------------------------------------------------------------------------------- /lib/sliver_widgets/snap_usage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class SnapDemo extends StatelessWidget { 4 | final String title; 5 | 6 | SnapDemo({Key key, @required this.title}) : super(key: key); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return Scaffold( 11 | body: CustomScrollView( 12 | slivers: [ 13 | SliverAppBar( 14 | floating: true, 15 | snap: true, 16 | expandedHeight: 250, 17 | elevation: 0, 18 | flexibleSpace: FlexibleSpaceBar( 19 | title: Text(this.title), 20 | background: Image.network( 21 | 'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg', 22 | fit: BoxFit.cover, 23 | ), 24 | ), 25 | ), 26 | SliverFixedExtentList( 27 | delegate: SliverChildBuilderDelegate( 28 | (context, index) { 29 | final isOdd = index % 2 == 1; 30 | return Container( 31 | alignment: Alignment.center, 32 | color: isOdd ? Colors.white : Color(0xFFEAEAEA), 33 | child: Text( 34 | index.toString(), 35 | style: TextStyle( 36 | fontSize: 30, 37 | fontWeight: FontWeight.w500, 38 | color: Colors.black, 39 | ), 40 | ), 41 | ); 42 | }, 43 | childCount: 50, 44 | ), 45 | itemExtent: 80, 46 | ), 47 | ], 48 | ), 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /lib/sliver_widgets/sticky_usage.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math'; 2 | import 'package:flutter/material.dart'; 3 | 4 | class StickyDemo extends StatefulWidget { 5 | final String title; 6 | 7 | StickyDemo({Key key, this.title}) : super(key: key); 8 | 9 | @override 10 | _StickyDemoState createState() => _StickyDemoState(); 11 | } 12 | 13 | class _StickyDemoState extends State 14 | with SingleTickerProviderStateMixin { 15 | TabController tabController; 16 | 17 | @override 18 | void initState() { 19 | super.initState(); 20 | this.tabController = TabController(length: 2, vsync: this); 21 | } 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return Scaffold( 26 | body: CustomScrollView( 27 | slivers: [ 28 | SliverAppBar( 29 | pinned: true, 30 | elevation: 0, 31 | expandedHeight: 250, 32 | flexibleSpace: FlexibleSpaceBar( 33 | title: Text(this.widget.title), 34 | background: Image.network( 35 | 'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg', 36 | fit: BoxFit.cover, 37 | ), 38 | ), 39 | ), 40 | SliverPersistentHeader( 41 | pinned: true, 42 | delegate: StickyTabBarDelegate( 43 | child: TabBar( 44 | labelColor: Colors.black, 45 | controller: this.tabController, 46 | tabs: [ 47 | Tab(text: 'Home'), 48 | Tab(text: 'Profile'), 49 | ], 50 | ), 51 | ), 52 | ), 53 | SliverFillRemaining( 54 | child: TabBarView( 55 | controller: this.tabController, 56 | children: [ 57 | Center(child: Text('Content of Home')), 58 | Center(child: Text('Content of Profile')), 59 | ], 60 | ), 61 | ), 62 | ], 63 | ), 64 | ); 65 | } 66 | } 67 | 68 | class StickyTabBarDelegate extends SliverPersistentHeaderDelegate { 69 | final TabBar child; 70 | 71 | StickyTabBarDelegate({@required this.child}); 72 | 73 | @override 74 | Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) { 75 | return this.child; 76 | } 77 | 78 | @override 79 | double get maxExtent => this.child.preferredSize.height; 80 | 81 | @override 82 | double get minExtent => this.child.preferredSize.height; 83 | 84 | @override 85 | bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) { 86 | return true; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://www.dartlang.org/tools/pub/glossary#lockfile 3 | packages: 4 | async: 5 | dependency: transitive 6 | description: 7 | name: async 8 | url: "https://pub.flutter-io.cn" 9 | source: hosted 10 | version: "2.1.0" 11 | boolean_selector: 12 | dependency: transitive 13 | description: 14 | name: boolean_selector 15 | url: "https://pub.flutter-io.cn" 16 | source: hosted 17 | version: "1.0.4" 18 | charcode: 19 | dependency: transitive 20 | description: 21 | name: charcode 22 | url: "https://pub.flutter-io.cn" 23 | source: hosted 24 | version: "1.1.2" 25 | collection: 26 | dependency: transitive 27 | description: 28 | name: collection 29 | url: "https://pub.flutter-io.cn" 30 | source: hosted 31 | version: "1.14.11" 32 | cupertino_icons: 33 | dependency: "direct main" 34 | description: 35 | name: cupertino_icons 36 | url: "https://pub.flutter-io.cn" 37 | source: hosted 38 | version: "0.1.2" 39 | flutter: 40 | dependency: "direct main" 41 | description: flutter 42 | source: sdk 43 | version: "0.0.0" 44 | flutter_test: 45 | dependency: "direct dev" 46 | description: flutter 47 | source: sdk 48 | version: "0.0.0" 49 | matcher: 50 | dependency: transitive 51 | description: 52 | name: matcher 53 | url: "https://pub.flutter-io.cn" 54 | source: hosted 55 | version: "0.12.5" 56 | meta: 57 | dependency: transitive 58 | description: 59 | name: meta 60 | url: "https://pub.flutter-io.cn" 61 | source: hosted 62 | version: "1.1.6" 63 | path: 64 | dependency: transitive 65 | description: 66 | name: path 67 | url: "https://pub.flutter-io.cn" 68 | source: hosted 69 | version: "1.6.2" 70 | pedantic: 71 | dependency: transitive 72 | description: 73 | name: pedantic 74 | url: "https://pub.flutter-io.cn" 75 | source: hosted 76 | version: "1.5.0" 77 | quiver: 78 | dependency: transitive 79 | description: 80 | name: quiver 81 | url: "https://pub.flutter-io.cn" 82 | source: hosted 83 | version: "2.0.2" 84 | sky_engine: 85 | dependency: transitive 86 | description: flutter 87 | source: sdk 88 | version: "0.0.99" 89 | source_span: 90 | dependency: transitive 91 | description: 92 | name: source_span 93 | url: "https://pub.flutter-io.cn" 94 | source: hosted 95 | version: "1.5.5" 96 | stack_trace: 97 | dependency: transitive 98 | description: 99 | name: stack_trace 100 | url: "https://pub.flutter-io.cn" 101 | source: hosted 102 | version: "1.9.3" 103 | stream_channel: 104 | dependency: transitive 105 | description: 106 | name: stream_channel 107 | url: "https://pub.flutter-io.cn" 108 | source: hosted 109 | version: "2.0.0" 110 | string_scanner: 111 | dependency: transitive 112 | description: 113 | name: string_scanner 114 | url: "https://pub.flutter-io.cn" 115 | source: hosted 116 | version: "1.0.4" 117 | term_glyph: 118 | dependency: transitive 119 | description: 120 | name: term_glyph 121 | url: "https://pub.flutter-io.cn" 122 | source: hosted 123 | version: "1.1.0" 124 | test_api: 125 | dependency: transitive 126 | description: 127 | name: test_api 128 | url: "https://pub.flutter-io.cn" 129 | source: hosted 130 | version: "0.2.4" 131 | toast: 132 | dependency: "direct main" 133 | description: 134 | name: toast 135 | url: "https://pub.flutter-io.cn" 136 | source: hosted 137 | version: "0.1.4" 138 | typed_data: 139 | dependency: transitive 140 | description: 141 | name: typed_data 142 | url: "https://pub.flutter-io.cn" 143 | source: hosted 144 | version: "1.1.6" 145 | vector_math: 146 | dependency: transitive 147 | description: 148 | name: vector_math 149 | url: "https://pub.flutter-io.cn" 150 | source: hosted 151 | version: "2.0.8" 152 | sdks: 153 | dart: ">=2.2.0 <3.0.0" 154 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: flutter_training_app 2 | description: A Flutter application for training. 3 | 4 | # The following defines the version and build number for your application. 5 | # A version number is three numbers separated by dots, like 1.2.43 6 | # followed by an optional build number separated by a +. 7 | # Both the version and the builder number may be overridden in flutter 8 | # build by specifying --build-name and --build-number, respectively. 9 | # In Android, build-name is used as versionName while build-number used as versionCode. 10 | # Read more about Android versioning at https://developer.android.com/studio/publish/versioning 11 | # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. 12 | # Read more about iOS versioning at 13 | # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html 14 | version: 1.0.0+1 15 | 16 | environment: 17 | sdk: ">=2.1.0 <3.0.0" 18 | 19 | dependencies: 20 | flutter: 21 | sdk: flutter 22 | 23 | # The following adds the Cupertino Icons font to your application. 24 | # Use with the CupertinoIcons class for iOS style icons. 25 | cupertino_icons: ^0.1.2 26 | toast: ^0.1.3 27 | 28 | dev_dependencies: 29 | flutter_test: 30 | sdk: flutter 31 | 32 | 33 | # For information on the generic Dart part of this file, see the 34 | # following page: https://www.dartlang.org/tools/pub/pubspec 35 | 36 | # The following section is specific to Flutter. 37 | flutter: 38 | 39 | # The following line ensures that the Material Icons font is 40 | # included with your application, so that you can use the icons in 41 | # the material Icons class. 42 | uses-material-design: true 43 | 44 | # To add assets to your application, add an assets section, like this: 45 | assets: 46 | - assets/pics/bank_zs.png 47 | # - images/a_dot_burr.jpeg 48 | # - images/a_dot_ham.jpeg 49 | 50 | # An image asset can refer to one or more resolution-specific "variants", see 51 | # https://flutter.dev/assets-and-images/#resolution-aware. 52 | 53 | # For details regarding adding assets from package dependencies, see 54 | # https://flutter.dev/assets-and-images/#from-packages 55 | 56 | # To add custom fonts to your application, add a fonts section here, 57 | # in this "flutter" section. Each entry in this list should have a 58 | # "family" key with the font family name, and a "fonts" key with a 59 | # list giving the asset and other descriptors for the font. For 60 | # example: 61 | fonts: 62 | - family: Farrington 63 | fonts: 64 | - asset: assets/fonts/Farrington-7B.ttf 65 | - family: IconFont 66 | fonts: 67 | - asset: assets/fonts/IconFont.ttf 68 | - family: AntdIcons 69 | fonts: 70 | - asset: assets/fonts/AntdIcons.ttf 71 | # - family: Schyler 72 | # fonts: 73 | # - asset: fonts/Schyler-Regular.ttf 74 | # - asset: fonts/Schyler-Italic.ttf 75 | # style: italic 76 | # - family: Trajan Pro 77 | # fonts: 78 | # - asset: fonts/TrajanPro.ttf 79 | # - asset: fonts/TrajanPro_Bold.ttf 80 | # weight: 700 81 | # 82 | # For details regarding fonts from package dependencies, 83 | # see https://flutter.dev/custom-fonts/#from-packages 84 | --------------------------------------------------------------------------------