├── .flutter-plugins-dependencies ├── .github └── FUNDING.yml ├── .gitignore ├── .metadata ├── CONTRIBUTING.md ├── Header_fwg.png ├── LICENSE ├── README.md ├── Screen_1.png ├── _config.yml ├── android ├── .gitignore ├── app │ ├── build.gradle │ ├── proguard-rules.pro │ └── src │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── ic_launcher-web.png │ │ ├── kotlin │ │ └── guide │ │ │ └── flutter │ │ │ └── com │ │ │ └── flutterwidgetguide │ │ │ ├── Application.kt │ │ │ └── MainActivity.kt │ │ └── res │ │ ├── drawable │ │ ├── launch_background.xml │ │ └── noti.png │ │ ├── mipmap-anydpi-v26 │ │ ├── ic_launcher.xml │ │ └── ic_launcher_round.xml │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ ├── ic_launcher_foreground.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ ├── ic_launcher_foreground.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ ├── ic_launcher_foreground.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ ├── ic_launcher_foreground.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ ├── ic_launcher_foreground.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── ic_launcher_background.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ └── gradle-wrapper.properties ├── settings.gradle └── settings_aar.gradle ├── assets ├── fonts │ ├── CrimsonText-Regular.ttf │ └── Ubuntu-Regular.ttf └── images │ ├── dp.png │ ├── expanded_info.svg │ ├── github.png │ ├── linkedin.png │ ├── medium_icon.svg │ ├── slack_icon.svg │ └── twitter.png ├── flutter_01.log ├── flutter_widget_guide.iml ├── flutter_widget_guide_android.iml ├── ios ├── .gitignore ├── Flutter │ ├── AppFrameworkInfo.plist │ ├── Debug.xcconfig │ ├── Release.xcconfig │ └── flutter_export_environment.sh ├── Podfile ├── Podfile.lock ├── 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 ├── Ads.dart ├── Code.dart ├── CodeScreen.dart ├── VideoView.dart ├── bloc │ └── list_bloc.dart ├── main.dart ├── model │ ├── demo_model.dart │ └── list_Item.dart ├── myapp.dart ├── network │ └── api.dart ├── profile_screen.dart ├── screens │ ├── ComingSoon.dart │ ├── WebViewWidget.dart │ ├── absorb_pointer.dart │ ├── alert_dialog_widget.dart │ ├── align.dart │ ├── animated_builder.dart │ ├── animated_container.dart │ ├── animated_crossfade_widget.dart │ ├── animated_icon.dart │ ├── animated_list.dart │ ├── animated_opacity.dart │ ├── animated_padding.dart │ ├── animated_positioned.dart │ ├── animated_switcher.dart │ ├── animated_widget.dart │ ├── aspect_ratio.dart │ ├── backdrop_filter.dart │ ├── builder.dart │ ├── circularProgressIndicator.dart │ ├── clip_path.dart │ ├── clip_r_rect.dart │ ├── clipoval.dart │ ├── color_filtered.dart │ ├── constrained_box.dart │ ├── container.dart │ ├── cupertino_action_sheet.dart │ ├── cupertino_activity_indicator.dart │ ├── custom_paint.dart │ ├── datatable_widget.dart │ ├── dismissible.dart │ ├── divider.dart │ ├── draggable.dart │ ├── draggable_scrollable_sheet.dart │ ├── drawer_widget.dart │ ├── expanded.dart │ ├── fade_in_image.dart │ ├── fade_transition.dart │ ├── fitted_box.dart │ ├── flexible.dart │ ├── floating_action_button.dart │ ├── fractionally_sizedbox.dart │ ├── future_builder.dart │ ├── hero.dart │ ├── hero2.dart │ ├── home_page.dart │ ├── ignore_pointer.dart │ ├── image_widget.dart │ ├── indexed_stack.dart │ ├── inherited_model.dart │ ├── inherited_widget.dart │ ├── layout_builder.dart │ ├── limited_box.dart │ ├── list_tile.dart │ ├── list_view.dart │ ├── listwheelscrollview_widget.dart │ ├── media_query.dart │ ├── notification_listener.dart │ ├── opacity.dart │ ├── padding.dart │ ├── page_view.dart │ ├── placeholder.dart │ ├── positioned.dart │ ├── reorderable_listiew.dart │ ├── rich_text.dart │ ├── safe_area.dart │ ├── selectable_text.dart │ ├── semantics_widget.dart │ ├── shadermask_widget.dart │ ├── sized_box.dart │ ├── slider_widget.dart │ ├── sliver_app_bar.dart │ ├── sliver_grid.dart │ ├── sliver_list.dart │ ├── snackbar_widget.dart │ ├── spacer.dart │ ├── stack_widget.dart │ ├── stream_builder.dart │ ├── table.dart │ ├── tabs_widget.dart │ ├── toggle_buttons.dart │ ├── tooltip.dart │ ├── transform.dart │ ├── tween_animation_builder.dart │ ├── value_listenable_builder.dart │ └── wrap.dart ├── settings.dart ├── syntax_highlighter.dart ├── themes.dart ├── utils.dart ├── viewmodel │ └── list_viewmodel.dart └── widgets │ └── home_list_item.dart ├── medium_icon.png ├── pubspec.lock ├── pubspec.yaml ├── screen_2.png ├── screen_3.png ├── screen_4.png ├── slack_logo.png └── test └── widget_test.dart /.flutter-plugins-dependencies: -------------------------------------------------------------------------------- 1 | {"_info":"// This is a generated file; do not edit or check into version control.","dependencyGraph":[{"name":"firebase_admob","dependencies":["firebase_core"]},{"name":"firebase_analytics","dependencies":[]},{"name":"firebase_core","dependencies":["firebase_core_web"]},{"name":"firebase_core_web","dependencies":[]},{"name":"firebase_messaging","dependencies":[]},{"name":"firebase_remote_config","dependencies":[]},{"name":"package_info","dependencies":[]},{"name":"shared_preferences","dependencies":["shared_preferences_macos","shared_preferences_web"]},{"name":"shared_preferences_macos","dependencies":[]},{"name":"shared_preferences_web","dependencies":[]},{"name":"url_launcher","dependencies":["url_launcher_web","url_launcher_macos"]},{"name":"url_launcher_macos","dependencies":[]},{"name":"url_launcher_web","dependencies":[]},{"name":"webview_media","dependencies":[]}]} -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: ['https://www.paypal.me/annshsingh/'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .dart_tool/ 3 | 4 | .packages 5 | .pub/ 6 | 7 | build/ 8 | 9 | .flutter-plugins 10 | .idea 11 | 12 | upload_certificate.pem 13 | 14 | FlutterWidgetGuide.iml 15 | 16 | # Android related 17 | android/**/gradle-wrapper.jar 18 | android/.gradle 19 | android/captures/ 20 | android/gradlew 21 | android/gradlew.bat 22 | android/local.properties 23 | android/**/GeneratedPluginRegistrant.java 24 | android/key.properties 25 | android/app/google-services.json 26 | *.jks -------------------------------------------------------------------------------- /.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: e4b989bf3dbefc61f11bce298d16f92ebd9cde41 8 | channel: dev 9 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Flutter Widget Guide 2 | 3 | :+1::tada: Hey there, thanks for taking the time to contribute! :tada::+1: 4 | 5 | The following is a set of guidelines for contributing to [this](https://github.com/annshsingh/flutter-widget-guide) project. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request. 6 |
7 | 8 | #### Want to add a widget? 9 | 10 | All the widgets that have not been added to the project will be listed in the [README.md](https://github.com/annshsingh/flutter-widget-guide/blob/master/README.md) file. 11 | If you wish to add one, please raise a pull request with only the widget file. Don't make changes to any other file (unless absolutely required).
12 | > Note: Please have a look at the other widget screens and follow the same theme pattern. 13 | 14 | #### Things to keep in mind while raising a pull request. 15 | 16 | First of all, thanks again for taking out the time to contribute to this project.
17 | 18 | I will try my best to consider and add your contribution but to keep things clear for me as well as for other users, i would like you to have 19 | a look at the following points before raising a pull request: 20 | * If the pull request is to add a widget to the list: 21 | * Please provide the title of your PR as New Widget - ABCD widget 22 | * In the description of your PR mention the link of the widget from the widget of the week playlist along with a brief explaination of your implementation. 23 | * Try to make your implementation as interactive as possible as it helps the user to make changes to the widget and observe the widget behaviour. 24 | * Add comments in the dart file as it helps me as well as others to easily understand your code. 25 | * Try to limit the contribution to a single commit. 26 | * If the pull request is to change the formatting that does not directly affect the functionality of any of the widgets: 27 | * Please provide the title of your PR as Formatting - ABCD widget.dart, XYZ widget.dart (name of the file(s)) 28 | * Please specify the exact reason for your changes and the need for the same in the description. 29 | * Are you trying to file a bug? 30 | * Specify the title of you PR as Bug Report - ABCD widget.dart (name of the file(s)) 31 | * Give a detailed explanation in the description. 32 | 33 | Please reach out to me at - [Email](mailto:annsh29@gmail.com) if you want to discuss something related to the project or just want to have a chat :smiley: 34 |
Cheers :beers: 35 | -------------------------------------------------------------------------------- /Header_fwg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/Header_fwg.png -------------------------------------------------------------------------------- /Screen_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/Screen_1.png -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | *.class 3 | .gradle 4 | /local.properties 5 | /.idea/workspace.xml 6 | /.idea/libraries 7 | .DS_Store 8 | /build 9 | /captures 10 | GeneratedPluginRegistrant.java 11 | -------------------------------------------------------------------------------- /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 plugin: 'kotlin-android' 26 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 27 | 28 | def keystoreProperties = new Properties() 29 | def keystorePropertiesFile = rootProject.file('key.properties') 30 | if (keystorePropertiesFile.exists()) { 31 | keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) 32 | } 33 | 34 | android { 35 | compileSdkVersion 28 36 | buildToolsVersion '28.0.3' 37 | sourceSets { 38 | main.java.srcDirs += 'src/main/kotlin' 39 | } 40 | 41 | lintOptions { 42 | disable 'InvalidPackage' 43 | checkReleaseBuilds false 44 | } 45 | 46 | defaultConfig { 47 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 48 | applicationId "com.annsh.flutterwidgetguide" 49 | minSdkVersion 21 50 | targetSdkVersion 28 51 | versionCode flutterVersionCode.toInteger() 52 | versionName flutterVersionName 53 | testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" 54 | } 55 | 56 | signingConfigs { 57 | release { 58 | keyAlias keystoreProperties['keyAlias'] 59 | keyPassword keystoreProperties['keyPassword'] 60 | storeFile file(keystoreProperties['storeFile']) 61 | storePassword keystoreProperties['storePassword'] 62 | } 63 | } 64 | 65 | buildTypes { 66 | release { 67 | // TODO: Add your own signing config for the release build. 68 | // Signing with the debug keys for now, so `flutter run --release` works. 69 | signingConfig signingConfigs.release 70 | minifyEnabled false 71 | shrinkResources false 72 | useProguard true 73 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 74 | } 75 | 76 | } 77 | } 78 | 79 | flutter { 80 | source '../..' 81 | } 82 | 83 | dependencies { 84 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 85 | testImplementation 'junit:junit:4.12' 86 | androidTestImplementation 'androidx.test:runner:1.2.0' 87 | androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0' 88 | implementation "com.google.firebase:firebase-messaging:20.1.7" 89 | } 90 | 91 | apply plugin: 'com.google.gms.google-services' -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | #Flutter Wrapper 2 | -keep class io.flutter.app.** { *; } 3 | -keep class io.flutter.plugin.** { *; } 4 | -keep class io.flutter.util.** { *; } 5 | -keep class io.flutter.view.** { *; } 6 | -keep class io.flutter.** { *; } 7 | -keep class io.flutter.plugins.** { *; } -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 8 | 9 | 10 | 15 | 17 | 22 | 23 | 26 | 27 | 30 | 31 | 38 | 42 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /android/app/src/main/ic_launcher-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/ic_launcher-web.png -------------------------------------------------------------------------------- /android/app/src/main/kotlin/guide/flutter/com/flutterwidgetguide/Application.kt: -------------------------------------------------------------------------------- 1 | package guide.flutter.com.flutterwidgetguide 2 | 3 | import io.flutter.app.FlutterApplication 4 | import io.flutter.plugin.common.PluginRegistry 5 | import io.flutter.plugin.common.PluginRegistry.PluginRegistrantCallback 6 | import io.flutter.plugins.GeneratedPluginRegistrant 7 | import io.flutter.plugins.firebasemessaging.FlutterFirebaseMessagingService 8 | 9 | //Class added to support background operations for FCM notifications 10 | //Added this to android:name property of the tag in 11 | //manifest 12 | class Application : FlutterApplication(), PluginRegistrantCallback { 13 | override fun onCreate() { 14 | super.onCreate() 15 | FlutterFirebaseMessagingService.setPluginRegistrant(this) 16 | } 17 | 18 | override fun registerWith(registry: PluginRegistry?) { 19 | GeneratedPluginRegistrant.registerWith(registry) 20 | } 21 | } -------------------------------------------------------------------------------- /android/app/src/main/kotlin/guide/flutter/com/flutterwidgetguide/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package guide.flutter.com.flutterwidgetguide 2 | 3 | import android.os.Bundle 4 | 5 | import io.flutter.app.FlutterActivity 6 | import io.flutter.plugins.GeneratedPluginRegistrant 7 | 8 | class MainActivity(): FlutterActivity() { 9 | override fun onCreate(savedInstanceState: Bundle?) { 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/drawable/noti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/drawable/noti.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFFFFF 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.kotlin_version = '1.3.61' 3 | repositories { 4 | google() 5 | jcenter() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:3.5.3' 10 | classpath 'com.google.gms:google-services:4.3.3' 11 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | google() 18 | jcenter() 19 | } 20 | } 21 | 22 | rootProject.buildDir = '../build' 23 | subprojects { 24 | project.buildDir = "${rootProject.buildDir}/${project.name}" 25 | } 26 | subprojects { 27 | project.evaluationDependsOn(':app') 28 | } 29 | 30 | task clean(type: Delete) { 31 | delete rootProject.buildDir 32 | } 33 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | android.enableJetifier=true 2 | android.useAndroidX=true 3 | org.gradle.jvmargs=-Xmx1536M 4 | android.enableR8=true 5 | -------------------------------------------------------------------------------- /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-5.4.1-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 | -------------------------------------------------------------------------------- /android/settings_aar.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | -------------------------------------------------------------------------------- /assets/fonts/CrimsonText-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/assets/fonts/CrimsonText-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/Ubuntu-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/assets/fonts/Ubuntu-Regular.ttf -------------------------------------------------------------------------------- /assets/images/dp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/assets/images/dp.png -------------------------------------------------------------------------------- /assets/images/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/assets/images/github.png -------------------------------------------------------------------------------- /assets/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/assets/images/linkedin.png -------------------------------------------------------------------------------- /assets/images/medium_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/slack_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/assets/images/twitter.png -------------------------------------------------------------------------------- /flutter_widget_guide.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 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 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /flutter_widget_guide_android.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /ios/.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .vagrant/ 3 | .sconsign.dblite 4 | .svn/ 5 | 6 | .DS_Store 7 | *.swp 8 | profile 9 | 10 | DerivedData/ 11 | build/ 12 | GeneratedPluginRegistrant.h 13 | GeneratedPluginRegistrant.m 14 | 15 | .generated/ 16 | 17 | *.pbxuser 18 | *.mode1v3 19 | *.mode2v3 20 | *.perspectivev3 21 | 22 | !default.pbxuser 23 | !default.mode1v3 24 | !default.mode2v3 25 | !default.perspectivev3 26 | 27 | xcuserdata 28 | 29 | *.moved-aside 30 | 31 | *.pyc 32 | *sync/ 33 | Icon? 34 | .tags* 35 | 36 | /Flutter/app.flx 37 | /Flutter/app.zip 38 | /Flutter/flutter_assets/ 39 | /Flutter/App.framework 40 | /Flutter/Flutter.framework 41 | /Flutter/Generated.xcconfig 42 | /ServiceDefinitions.json 43 | 44 | Pods/ 45 | .symlinks/ 46 | -------------------------------------------------------------------------------- /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 "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig" 2 | #include "Generated.xcconfig" 3 | -------------------------------------------------------------------------------- /ios/Flutter/Release.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig" 2 | #include "Generated.xcconfig" 3 | -------------------------------------------------------------------------------- /ios/Flutter/flutter_export_environment.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # This is a generated file; do not edit or check into version control. 3 | export "FLUTTER_ROOT=/Users/annshsingh/Desktop/flutter/flutter" 4 | export "FLUTTER_APPLICATION_PATH=/Users/annshsingh/Desktop/Widget Guide/FlutterWidgetGuide" 5 | export "FLUTTER_TARGET=lib/main.dart" 6 | export "FLUTTER_BUILD_DIR=build" 7 | export "SYMROOT=${SOURCE_ROOT}/../build/ios" 8 | export "FLUTTER_FRAMEWORK_DIR=/Users/annshsingh/Desktop/flutter/flutter/bin/cache/artifacts/engine/ios" 9 | export "FLUTTER_BUILD_NAME=1.0.13" 10 | export "FLUTTER_BUILD_NUMBER=14" 11 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | # Uncomment this line to define a global platform for your project 2 | # platform :ios, '9.0' 3 | 4 | # CocoaPods analytics sends network stats synchronously affecting flutter build latency. 5 | ENV['COCOAPODS_DISABLE_STATS'] = 'true' 6 | 7 | project 'Runner', { 8 | 'Debug' => :debug, 9 | 'Profile' => :release, 10 | 'Release' => :release, 11 | } 12 | 13 | def parse_KV_file(file, separator='=') 14 | file_abs_path = File.expand_path(file) 15 | if !File.exists? file_abs_path 16 | return []; 17 | end 18 | pods_ary = [] 19 | skip_line_start_symbols = ["#", "/"] 20 | File.foreach(file_abs_path) { |line| 21 | next if skip_line_start_symbols.any? { |symbol| line =~ /^\s*#{symbol}/ } 22 | plugin = line.split(pattern=separator) 23 | if plugin.length == 2 24 | podname = plugin[0].strip() 25 | path = plugin[1].strip() 26 | podpath = File.expand_path("#{path}", file_abs_path) 27 | pods_ary.push({:name => podname, :path => podpath}); 28 | else 29 | puts "Invalid plugin specification: #{line}" 30 | end 31 | } 32 | return pods_ary 33 | end 34 | 35 | target 'Runner' do 36 | use_frameworks! 37 | 38 | # Prepare symlinks folder. We use symlinks to avoid having Podfile.lock 39 | # referring to absolute paths on developers' machines. 40 | system('rm -rf .symlinks') 41 | system('mkdir -p .symlinks/plugins') 42 | 43 | # Flutter Pods 44 | generated_xcode_build_settings = parse_KV_file('./Flutter/Generated.xcconfig') 45 | if generated_xcode_build_settings.empty? 46 | puts "Generated.xcconfig must exist. If you're running pod install manually, make sure flutter pub get is executed first." 47 | end 48 | generated_xcode_build_settings.map { |p| 49 | if p[:name] == 'FLUTTER_FRAMEWORK_DIR' 50 | symlink = File.join('.symlinks', 'flutter') 51 | File.symlink(File.dirname(p[:path]), symlink) 52 | pod 'Flutter', :path => File.join(symlink, File.basename(p[:path])) 53 | end 54 | } 55 | 56 | # Plugin Pods 57 | plugin_pods = parse_KV_file('../.flutter-plugins') 58 | plugin_pods.map { |p| 59 | symlink = File.join('.symlinks', 'plugins', p[:name]) 60 | File.symlink(p[:path], symlink) 61 | pod p[:name], :path => File.join(symlink, 'ios') 62 | } 63 | end 64 | 65 | post_install do |installer| 66 | installer.pods_project.targets.each do |target| 67 | target.build_configurations.each do |config| 68 | config.build_settings['ENABLE_BITCODE'] = 'NO' 69 | end 70 | end 71 | end 72 | -------------------------------------------------------------------------------- /ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - Flutter (1.0.0) 3 | - package_info (0.0.1): 4 | - Flutter 5 | - share (0.5.2): 6 | - Flutter 7 | - url_launcher (0.0.1): 8 | - Flutter 9 | - youtube_player (0.0.1): 10 | - Flutter 11 | 12 | DEPENDENCIES: 13 | - Flutter (from `.symlinks/flutter/ios`) 14 | - package_info (from `.symlinks/plugins/package_info/ios`) 15 | - share (from `.symlinks/plugins/share/ios`) 16 | - url_launcher (from `.symlinks/plugins/url_launcher/ios`) 17 | - youtube_player (from `.symlinks/plugins/youtube_player/ios`) 18 | 19 | EXTERNAL SOURCES: 20 | Flutter: 21 | :path: ".symlinks/flutter/ios" 22 | package_info: 23 | :path: ".symlinks/plugins/package_info/ios" 24 | share: 25 | :path: ".symlinks/plugins/share/ios" 26 | url_launcher: 27 | :path: ".symlinks/plugins/url_launcher/ios" 28 | youtube_player: 29 | :path: ".symlinks/plugins/youtube_player/ios" 30 | 31 | SPEC CHECKSUMS: 32 | Flutter: 9d0fac939486c9aba2809b7982dfdbb47a7b0296 33 | package_info: d7c98b64f60add4c2908b9d94d82a45d3c8827ad 34 | share: 222b5dcc8031238af9d7de91149df65bad1aef75 35 | url_launcher: 92b89c1029a0373879933c21642958c874539095 36 | youtube_player: d62ec45e4304c691738f7319d7a6f1876ceedfb8 37 | 38 | PODFILE CHECKSUM: b7d0755641915265774624f3b3be49c5c073d379 39 | 40 | COCOAPODS: 1.5.3 41 | -------------------------------------------------------------------------------- /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 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/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_widget_guide 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/Ads.dart: -------------------------------------------------------------------------------- 1 | import 'package:firebase_admob/firebase_admob.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | ///Class to manage Ad states throughout the app 5 | 6 | class Ads { 7 | static bool isShown = false; 8 | static bool _isGoingToBeShown = false; 9 | static BannerAd _bannerAd; 10 | static ValueNotifier isAdShown = ValueNotifier(false); 11 | 12 | ///Initialize the Admob on startup 13 | static void initialize() { 14 | FirebaseAdMob.instance 15 | .initialize(appId: "ca-app-pub-4000328104346549~8164868587"); 16 | } 17 | 18 | ///Set banner ad on the screen 19 | static void setBannerAd(String adId) { 20 | _bannerAd = BannerAd( 21 | adUnitId: adId, 22 | size: AdSize.banner, 23 | targetingInfo: _getMobileAdTargetingInfo(), 24 | listener: (MobileAdEvent event) { 25 | if (event == MobileAdEvent.loaded) { 26 | isShown = true; 27 | setIsAdShown(isShown); 28 | _isGoingToBeShown = false; 29 | } else if (event == MobileAdEvent.failedToLoad) { 30 | isShown = false; 31 | setIsAdShown(isShown); 32 | _isGoingToBeShown = false; 33 | } 34 | }, 35 | ); 36 | } 37 | 38 | ///Show banner ad on the screen 39 | static void showBannerAd(String adId) { 40 | if (_bannerAd == null) setBannerAd(adId); 41 | if (!isShown && !_isGoingToBeShown) { 42 | _isGoingToBeShown = true; 43 | _bannerAd 44 | ..load() 45 | ..show(); 46 | } 47 | } 48 | 49 | ///Hide banner ad where you don't want it 50 | static void hideBannerAd() { 51 | if (_bannerAd != null && !_isGoingToBeShown) { 52 | _bannerAd.dispose().then((disposed) { 53 | isShown = !disposed; 54 | setIsAdShown(isShown); 55 | }); 56 | _bannerAd = null; 57 | } 58 | } 59 | 60 | ///Ad related information 61 | static MobileAdTargetingInfo _getMobileAdTargetingInfo() { 62 | return MobileAdTargetingInfo( 63 | testDevices: ["DBC78393FB0E71331AF178ACE0873FC1"], 64 | nonPersonalizedAds: true, 65 | keywords: ["Game", "Utility", "Social"], 66 | ); 67 | } 68 | 69 | ///For the code screen bottom padding 70 | static void setIsAdShown(bool value) { 71 | isAdShown.value = value; 72 | } 73 | 74 | ///For the code screen's ValueListenableBuilders - to manage padding below if ad is loaded 75 | static ValueNotifier getIsAdShown() { 76 | return isAdShown; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /lib/VideoView.dart: -------------------------------------------------------------------------------- 1 | import 'package:firebase_admob/firebase_admob.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:flutter/services.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | import 'package:youtube_player_flutter/youtube_player_flutter.dart'; 6 | 7 | import 'Ads.dart'; 8 | 9 | class VideoView extends StatefulWidget { 10 | final String videoUrl; 11 | final String title; 12 | 13 | VideoView({Key key, @required this.videoUrl, @required this.title}) 14 | : super(key: key); 15 | 16 | @override 17 | _VideoViewState createState() => _VideoViewState(); 18 | } 19 | 20 | class _VideoViewState extends State { 21 | YoutubePlayerController _controller; 22 | 23 | @override 24 | void dispose() { 25 | _freePortraitLock(); 26 | super.dispose(); 27 | } 28 | 29 | @override 30 | void initState() { 31 | _controller = YoutubePlayerController( 32 | initialVideoId: YoutubePlayer.convertUrlToId(widget.videoUrl), 33 | flags: YoutubePlayerFlags( 34 | mute: false, 35 | autoPlay: true, 36 | disableDragSeek: true, 37 | loop: false, 38 | enableCaption: false), 39 | ); 40 | //TODO: Add real ad unit id 41 | Ads.showBannerAd(BannerAd.testAdUnitId); 42 | _lockInPortrait(); 43 | super.initState(); 44 | } 45 | 46 | Future _lockInPortrait() async { 47 | await SystemChrome.setPreferredOrientations([ 48 | DeviceOrientation.portraitUp, 49 | DeviceOrientation.portraitDown, 50 | ]); 51 | } 52 | 53 | Future _freePortraitLock() async { 54 | await SystemChrome.setPreferredOrientations([ 55 | DeviceOrientation.landscapeRight, 56 | DeviceOrientation.landscapeLeft, 57 | DeviceOrientation.portraitUp, 58 | DeviceOrientation.portraitDown, 59 | ]); 60 | } 61 | 62 | @override 63 | Widget build(BuildContext context) { 64 | return Scaffold( 65 | appBar: new AppBar( 66 | title: Text( 67 | '${widget.title} Widget Video', 68 | style: TextStyle( 69 | fontSize: 20.0, 70 | color: Colors.white, 71 | fontWeight: FontWeight.bold, 72 | fontFamily: Utils.ubuntuRegularFont), 73 | ), 74 | iconTheme: IconThemeData( 75 | color: Colors.white, //change your color here 76 | ), 77 | centerTitle: true, 78 | elevation: 0.0, 79 | backgroundColor: const Color(0x000000).withOpacity(1), 80 | ), 81 | body: WillPopScope( 82 | child: Stack( 83 | children: [ 84 | Container( 85 | padding: const EdgeInsets.only(bottom: 8.0), 86 | color: Colors.black, 87 | height: double.infinity, 88 | child: Padding( 89 | padding: const EdgeInsets.only(bottom: 56.0), 90 | child: YoutubePlayer( 91 | controller: _controller, 92 | showVideoProgressIndicator: true, 93 | bottomActions: [ 94 | const SizedBox(width: 14.0), 95 | CurrentPosition(), 96 | const SizedBox(width: 8.0), 97 | ProgressBar(isExpanded: true), 98 | RemainingDuration(), 99 | ], 100 | aspectRatio: 4 / 3, 101 | progressIndicatorColor: Colors.white, 102 | onReady: () { 103 | print('Player is ready.'); 104 | }, 105 | ), 106 | ), 107 | ), 108 | ], 109 | ), 110 | onWillPop: _willPopCallback, 111 | ), 112 | ); 113 | } 114 | 115 | //Hide add if back is pressed 116 | Future _willPopCallback() async { 117 | Ads.hideBannerAd(); 118 | return true; // return true if the route to be popped 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /lib/bloc/list_bloc.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | 3 | import 'package:flutter_widget_guide/model/list_Item.dart'; 4 | import 'package:flutter_widget_guide/viewmodel/list_viewmodel.dart'; 5 | 6 | class ListBloc { 7 | final _listViewModel = ListViewModel(); 8 | final _listController = StreamController>(); 9 | 10 | Stream> get listItems => _listController.stream; 11 | 12 | ListBloc() { 13 | _listController.add(_listViewModel.getListItems()); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/myapp.dart'; 3 | 4 | void main() => runApp(MyApp()); 5 | -------------------------------------------------------------------------------- /lib/model/demo_model.dart: -------------------------------------------------------------------------------- 1 | import 'dart:convert'; 2 | 3 | ///Use this https://app.quicktype.io/ converter tool to create your data class 4 | ///according to the JSON response 5 | ///API used here is - https://jsonplaceholder.typicode.com/posts/1 6 | 7 | ///Used to map JSON data fetched from the server 8 | Demo responseFromJson(String jsonString) { 9 | final jsonData = json.decode(jsonString); 10 | return Demo.fromJson(jsonData); 11 | } 12 | 13 | ///Used to map string data to JSON to post to the server 14 | //String responseToJson(Demo data) { 15 | // final stringData = data.toJson(); 16 | // return json.encode(stringData); 17 | //} 18 | 19 | ///Model Class 20 | ///Make sure the keys here are same as that in 21 | ///the response 22 | class Demo { 23 | int userId; 24 | int id; 25 | String title; 26 | String body; 27 | 28 | Demo({ 29 | this.userId, 30 | this.id, 31 | this.title, 32 | this.body, 33 | }); 34 | 35 | ///This method is to deserialize your JSON 36 | ///Basically converting a string response to an object model 37 | ///Here key is always a String type and value can be of any type 38 | ///so we create a map of String and dynamic. 39 | factory Demo.fromJson(Map json) => new Demo( 40 | userId: json["userId"], 41 | id: json["id"], 42 | title: json["title"], 43 | body: json["body"], 44 | ); 45 | 46 | ///Converting String to JSON 47 | // Map toJson() => { 48 | // "userId": userId, 49 | // "id": id, 50 | // "title": title, 51 | // "body": body, 52 | // }; 53 | } 54 | -------------------------------------------------------------------------------- /lib/model/list_Item.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class ListItem { 4 | String title; 5 | String description; 6 | String url; 7 | String mediumUrl; 8 | String videoUrl; 9 | BuildContext context; 10 | Color menuColor; 11 | 12 | ListItem( 13 | {this.title, 14 | this.context, 15 | this.description, 16 | this.url, 17 | this.mediumUrl, 18 | this.videoUrl, 19 | this.menuColor = Colors.white}); 20 | } 21 | -------------------------------------------------------------------------------- /lib/network/api.dart: -------------------------------------------------------------------------------- 1 | import 'dart:async'; 2 | 3 | import 'package:flutter_widget_guide/model/demo_model.dart'; 4 | import 'package:http/http.dart' as http; 5 | 6 | String url = 'https://jsonplaceholder.typicode.com/posts'; 7 | 8 | ///Method for GET Request 9 | Future getDemoResponse() async { 10 | final response = await http.get('$url/1'); 11 | return responseFromJson(response.body); 12 | } 13 | 14 | ///Method for POST Request 15 | //Future createResponse(Demo demo) async{ 16 | // final response = await http.post('$url', 17 | // headers: { 18 | // HttpHeaders.contentTypeHeader: 'application/json', 19 | // HttpHeaders.authorizationHeader : '' 20 | // }, 21 | // body: responseToJson(demo) 22 | // ); 23 | // return response; 24 | //} 25 | -------------------------------------------------------------------------------- /lib/screens/ComingSoon.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | 6 | class ComingSoon extends StatefulWidget { 7 | @override 8 | _ComingSoonState createState() => _ComingSoonState(); 9 | } 10 | 11 | class _ComingSoonState extends State { 12 | 13 | @override 14 | void initState() { 15 | //Hide banner ad if it isn't already hidden 16 | Ads.hideBannerAd(); 17 | super.initState(); 18 | } 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | return Scaffold( 23 | appBar: AppBar(), 24 | body: Center( 25 | child: Column( 26 | mainAxisAlignment: MainAxisAlignment.center, 27 | children: [ 28 | Container( 29 | margin: EdgeInsets.all(24.0), 30 | child: Icon( 31 | Icons.build, 32 | size: 100, 33 | color: Colors.black87, 34 | ), 35 | ), 36 | Text( 37 | "Coming soon....", 38 | textAlign: TextAlign.center, 39 | style: TextStyle( 40 | fontFamily: Utils.ubuntuRegularFont, 41 | fontWeight: FontWeight.bold, 42 | fontSize: 16.0, 43 | color: Colors.black87), 44 | ) 45 | ], 46 | ), 47 | ), 48 | ); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /lib/screens/WebViewWidget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:youtube_player_flutter/youtube_player_flutter.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | import '../utils.dart'; 8 | 9 | class WebViewWidget extends StatefulWidget { 10 | final url; 11 | 12 | WebViewWidget({Key key, @required this.url}) : super(key: key); 13 | 14 | @override 15 | _WebViewWidgetState createState() => _WebViewWidgetState(); 16 | } 17 | 18 | class _WebViewWidgetState extends State { 19 | final _key = UniqueKey(); 20 | 21 | @override 22 | void initState() { 23 | //Hide banner ad if it isn't already hidden 24 | Ads.hideBannerAd(); 25 | super.initState(); 26 | } 27 | 28 | @override 29 | Widget build(BuildContext context) { 30 | return Scaffold( 31 | appBar: AppBar( 32 | centerTitle: true, 33 | title: Text( 34 | 'WebView Widget', 35 | style: TextStyle( 36 | fontSize: 20.0, 37 | fontWeight: FontWeight.bold, 38 | fontFamily: Utils.ubuntuRegularFont), 39 | ), 40 | actions: [ 41 | IconButton( 42 | icon: Icon(Icons.code), 43 | onPressed: () => Navigator.push( 44 | context, 45 | MaterialPageRoute( 46 | builder: (context) => CodeScreen(code: Code.tooltipCode), 47 | ), 48 | ), 49 | ), 50 | IconButton( 51 | icon: Icon(Icons.open_in_browser), 52 | onPressed: () => Utils.launchURL(widget.url), 53 | ), 54 | ], 55 | ), 56 | body: Column( 57 | children: [ 58 | Expanded( 59 | child: WebView( 60 | key: _key, 61 | javascriptMode: JavascriptMode.unrestricted, 62 | initialUrl: widget.url), 63 | ), 64 | ], 65 | ), 66 | ); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /lib/screens/animated_crossfade_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/Code.dart'; 3 | import 'package:flutter_widget_guide/CodeScreen.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | 8 | class AnimatedCrossFadeWidget extends StatefulWidget { 9 | @override 10 | _AnimatedCrossFadeWidgetState createState() => 11 | _AnimatedCrossFadeWidgetState(); 12 | } 13 | 14 | class _AnimatedCrossFadeWidgetState extends State { 15 | var crossFadeView = CrossFadeState.showFirst; 16 | 17 | @override 18 | void initState() { 19 | //Hide banner ad if it isn't already hidden 20 | Ads.hideBannerAd(); 21 | super.initState(); 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return Scaffold( 27 | appBar: AppBar( 28 | centerTitle: true, 29 | title: Text( 30 | 'AnimatedCrossFade Widget', 31 | style: TextStyle( 32 | fontSize: 20.0, 33 | fontWeight: FontWeight.bold, 34 | fontFamily: Utils.ubuntuRegularFont), 35 | ), 36 | actions: [ 37 | IconButton( 38 | icon: Icon(Icons.code), 39 | onPressed: () => Navigator.push( 40 | context, 41 | MaterialPageRoute( 42 | builder: (context) => 43 | CodeScreen(code: Code.animatedCrossFadeWidgetCode), 44 | ), 45 | ), 46 | ) 47 | ], 48 | ), 49 | body: Center( 50 | child: Column( 51 | mainAxisAlignment: MainAxisAlignment.center, 52 | crossAxisAlignment: CrossAxisAlignment.center, 53 | children: [ 54 | AnimatedCrossFade( 55 | crossFadeState: crossFadeView, 56 | duration: Duration(milliseconds: 1000), 57 | firstChild: Container( 58 | width: 300, 59 | height: 300, 60 | color: Colors.lightBlue, 61 | child: Center( 62 | child: Text( 63 | "Flutter Widget Guide", 64 | style: TextStyle(color: Colors.white, fontSize: 18.0), 65 | ), 66 | ), 67 | ), 68 | secondChild: Container( 69 | width: 300, 70 | height: 300, 71 | color: Colors.lightBlue, 72 | child: Center( 73 | child: Text( 74 | "Is the best :)", 75 | style: TextStyle(color: Colors.white, fontSize: 18.0), 76 | ), 77 | ), 78 | ), 79 | ), 80 | Padding( 81 | padding: const EdgeInsets.only(top: 12.0), 82 | child: RaisedButton( 83 | color: Theme.of(context).backgroundColor, 84 | child: Text( 85 | "Cross Fade", 86 | style: TextStyle(color: Theme.of(context).primaryColor), 87 | ), 88 | onPressed: () => setState(() { 89 | crossFadeView = crossFadeView == CrossFadeState.showFirst 90 | ? CrossFadeState.showSecond 91 | : CrossFadeState.showFirst; 92 | }), 93 | ), 94 | ) 95 | ], 96 | ), 97 | ), 98 | ); 99 | } 100 | } 101 | -------------------------------------------------------------------------------- /lib/screens/animated_opacity.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class AnimatedOpacityWidget extends StatefulWidget { 9 | @override 10 | _AnimatedOpacityWidgetState createState() => _AnimatedOpacityWidgetState(); 11 | } 12 | 13 | class _AnimatedOpacityWidgetState extends State { 14 | double opacityLevel = 1.0; 15 | String buttonText = "Fade Out"; 16 | 17 | @override 18 | void initState() { 19 | //Hide banner ad if it isn't already hidden 20 | Ads.hideBannerAd(); 21 | super.initState(); 22 | } 23 | 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return Scaffold( 28 | appBar: AppBar( 29 | centerTitle: true, 30 | title: Text( 31 | 'AnimatedOpacity Widget', 32 | style: TextStyle( 33 | fontSize: 20.0, 34 | fontWeight: FontWeight.bold, 35 | fontFamily: Utils.ubuntuRegularFont), 36 | ), 37 | actions: [ 38 | IconButton( 39 | icon: Icon(Icons.code), 40 | onPressed: () => Navigator.push( 41 | context, 42 | MaterialPageRoute( 43 | builder: (context) => 44 | CodeScreen(code: Code.animatedOpacityCode), 45 | ), 46 | ), 47 | ) 48 | ], 49 | ), 50 | body: Center( 51 | child: Column( 52 | mainAxisAlignment: MainAxisAlignment.center, 53 | crossAxisAlignment: CrossAxisAlignment.center, 54 | children: [ 55 | Container( 56 | height: 100, 57 | width: 100, 58 | child: AnimatedOpacity( 59 | opacity: opacityLevel, 60 | duration: Duration(seconds: 1), 61 | child: FlutterLogo(), 62 | ), 63 | ), 64 | Container( 65 | margin: EdgeInsets.all(24), 66 | child: Text("Opacity Value - ${opacityLevel.toString()}"), 67 | ), 68 | Container( 69 | child: RaisedButton( 70 | color: Theme.of(context).backgroundColor, 71 | child: Text( 72 | buttonText, 73 | style: TextStyle(color: Theme.of(context).primaryColor), 74 | ), 75 | onPressed: _changeOpacity, 76 | ), 77 | ), 78 | ], 79 | ), 80 | ), 81 | ); 82 | } 83 | 84 | void _changeOpacity() { 85 | setState(() { 86 | opacityLevel = opacityLevel == 0 ? 1.0 : 0.0; 87 | buttonText = buttonText == "Fade Out" ? "Fade In" : "Fade Out"; 88 | }); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /lib/screens/animated_padding.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class AnimatedPaddingWidget extends StatefulWidget { 9 | @override 10 | _AnimatedPaddingWidgetState createState() => _AnimatedPaddingWidgetState(); 11 | } 12 | 13 | class _AnimatedPaddingWidgetState extends State { 14 | double padValue = 0; 15 | 16 | @override 17 | void initState() { 18 | //Hide banner ad if it isn't already hidden 19 | Ads.hideBannerAd(); 20 | super.initState(); 21 | } 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return Scaffold( 26 | appBar: AppBar( 27 | centerTitle: true, 28 | title: Text( 29 | 'AnimatedPadding Widget', 30 | style: TextStyle( 31 | fontSize: 20.0, 32 | fontWeight: FontWeight.bold, 33 | fontFamily: Utils.ubuntuRegularFont), 34 | ), 35 | actions: [ 36 | IconButton( 37 | icon: Icon(Icons.code), 38 | onPressed: () => Navigator.push( 39 | context, 40 | MaterialPageRoute( 41 | builder: (context) => 42 | CodeScreen(code: Code.animatedPaddingCode), 43 | ), 44 | ), 45 | ) 46 | ], 47 | ), 48 | body: Center( 49 | child: Row( 50 | mainAxisAlignment: MainAxisAlignment.center, 51 | children: [ 52 | AnimatedPadding( 53 | padding: EdgeInsets.all(padValue), 54 | duration: Duration(seconds: 1), 55 | child: Container(height: 150, width: 150, color: Colors.blue), 56 | ), 57 | AnimatedPadding( 58 | padding: EdgeInsets.all(padValue), 59 | duration: Duration(seconds: 1), 60 | child: Container(height: 150, width: 150, color: Colors.red), 61 | ) 62 | ], 63 | ), 64 | ), 65 | floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, 66 | floatingActionButton: FloatingActionButton.extended( 67 | backgroundColor: Colors.green, 68 | onPressed: () => setState(() { 69 | padValue == 0 ? padValue = 10 : padValue = 0; 70 | }), 71 | label: Text( 72 | padValue == 0 ? "Add Padding" : "Remove Padding", 73 | style: TextStyle(color: Colors.white), 74 | ), 75 | ), 76 | ); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /lib/screens/animated_switcher.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class AnimatedSwitcherWidget extends StatefulWidget { 9 | @override 10 | _AnimatedSwitcherWidgetState createState() => _AnimatedSwitcherWidgetState(); 11 | } 12 | 13 | class _AnimatedSwitcherWidgetState extends State { 14 | bool switched = false; 15 | 16 | Widget _myAnimatedWidget = Container( 17 | /// Add unique key to the widgets if they are same 18 | /// In this case all 3 are Container Widgets 19 | key: ValueKey(1), 20 | width: 250.0, 21 | height: 250.0, 22 | color: Colors.blue, 23 | ); 24 | 25 | @override 26 | void initState() { 27 | //Hide banner ad if it isn't already hidden 28 | Ads.hideBannerAd(); 29 | super.initState(); 30 | } 31 | 32 | @override 33 | Widget build(BuildContext context) { 34 | return Scaffold( 35 | appBar: AppBar( 36 | centerTitle: true, 37 | title: Text( 38 | 'AnimatedSwitcher Widget', 39 | style: TextStyle( 40 | fontSize: 20.0, 41 | fontWeight: FontWeight.bold, 42 | fontFamily: Utils.ubuntuRegularFont), 43 | ), 44 | actions: [ 45 | IconButton( 46 | icon: Icon(Icons.code), 47 | onPressed: () => Navigator.push( 48 | context, 49 | MaterialPageRoute( 50 | builder: (context) => 51 | CodeScreen(code: Code.animatedSwitcherCode), 52 | ), 53 | ), 54 | ) 55 | ], 56 | ), 57 | body: Row( 58 | mainAxisAlignment: MainAxisAlignment.center, 59 | mainAxisSize: MainAxisSize.max, 60 | children: [ 61 | Padding( 62 | padding: const EdgeInsets.only(top: 24.0), 63 | child: AnimatedSwitcher( 64 | duration: Duration(seconds: 1), 65 | 66 | /// Various other animations available 67 | /// Here we have used the Scale animation 68 | /// By default, a FadeTransiton will appear between two widgets 69 | transitionBuilder: 70 | (Widget child, Animation animation) => 71 | ScaleTransition( 72 | child: child, 73 | scale: animation, 74 | ), 75 | child: _myAnimatedWidget), 76 | ), 77 | ], 78 | ), 79 | floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, 80 | floatingActionButton: FloatingActionButton.extended( 81 | backgroundColor: Colors.green, 82 | onPressed: () => setState(() { 83 | _myAnimatedWidget = switched 84 | ? Container( 85 | /// Add unique key to the widgets if they are same 86 | key: ValueKey(2), 87 | width: 250.0, 88 | height: 250.0, 89 | color: Colors.blue, 90 | ) 91 | : Container( 92 | /// Add unique key to the widgets if they are same 93 | key: ValueKey(3), 94 | width: 250.0, 95 | height: 250.0, 96 | color: Colors.red, 97 | ); 98 | switched ? switched = false : switched = true; 99 | }), 100 | icon: Icon( 101 | Icons.swap_horiz, 102 | color: Colors.white, 103 | ), 104 | label: Text( 105 | "Switch Widgets", 106 | style: TextStyle(color: Colors.white), 107 | ), 108 | ), 109 | ); 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /lib/screens/animated_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Code.dart'; 4 | import '../CodeScreen.dart'; 5 | import '../utils.dart'; 6 | 7 | class AnimatedWidgett extends StatefulWidget { 8 | @override 9 | _AnimatedWidgettState createState() => _AnimatedWidgettState(); 10 | } 11 | 12 | class _AnimatedWidgettState extends State with SingleTickerProviderStateMixin { 13 | AnimationController _controller; 14 | 15 | @override 16 | void initState() { 17 | _controller = AnimationController( 18 | duration: Duration(seconds: 2), 19 | vsync: this, 20 | lowerBound: 1, 21 | upperBound: 12, 22 | )..repeat(reverse: true); 23 | super.initState(); 24 | } 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | appBar: AppBar( 30 | centerTitle: true, 31 | title: Text( 32 | 'AnimatedWidget Widget', 33 | style: TextStyle( 34 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 35 | ), 36 | actions: [ 37 | IconButton( 38 | icon: Icon(Icons.code), 39 | onPressed: () => Navigator.push( 40 | context, 41 | MaterialPageRoute( 42 | builder: (context) => CodeScreen(code: Code.animatedWidgetCode), 43 | ), 44 | ), 45 | ) 46 | ], 47 | ), 48 | body: Center( 49 | child: Column( 50 | mainAxisAlignment: MainAxisAlignment.center, 51 | children: [ 52 | ///We pass the controller for width and controller params 53 | ///The width one will be used to get the value and will act 54 | ///as a listenable for the Animated Widget 55 | ButtonTransition(width: _controller, controller: _controller), 56 | ], 57 | ), 58 | ), 59 | ); 60 | } 61 | 62 | @override 63 | void dispose() { 64 | _controller.dispose(); 65 | super.dispose(); 66 | } 67 | } 68 | 69 | class ButtonTransition extends AnimatedWidget { 70 | ///We make a getter for the Animation value and use the listenable 71 | ///to do just that 72 | Animation get _width => listenable; 73 | 74 | final AnimationController controller; 75 | 76 | const ButtonTransition({width, this.controller}) : super(listenable: width); 77 | 78 | @override 79 | Widget build(BuildContext context) { 80 | return OutlineButton( 81 | onPressed: () { 82 | controller.isAnimating ? controller.stop() : controller.repeat(reverse: true); 83 | }, 84 | borderSide: BorderSide( 85 | width: _width.value, 86 | ), 87 | child: Container( 88 | height: 50, 89 | width: 80, 90 | child: Center( 91 | child: Text("Click Me!"), 92 | ), 93 | ), 94 | ); 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /lib/screens/aspect_ratio.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/services.dart'; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | 5 | import '../Ads.dart'; 6 | import '../Code.dart'; 7 | import '../CodeScreen.dart'; 8 | 9 | class AspectRatioWidget extends StatefulWidget { 10 | @override 11 | _AspectRatioWidgetState createState() => _AspectRatioWidgetState(); 12 | } 13 | 14 | class _AspectRatioWidgetState extends State { 15 | double aspectRatio = 1 / 1; 16 | double aspectRatio1 = 16 / 9; 17 | double aspectRatio2 = 3 / 2; 18 | 19 | @override 20 | void initState() { 21 | super.initState(); 22 | 23 | /// Fix portrait mode 24 | SystemChrome.setPreferredOrientations([ 25 | DeviceOrientation.portraitUp, 26 | DeviceOrientation.portraitDown, 27 | ]); 28 | 29 | //Hide banner ad if it isn't already hidden 30 | Ads.hideBannerAd(); 31 | } 32 | 33 | @override 34 | Widget build(BuildContext context) { 35 | return Scaffold( 36 | appBar: AppBar( 37 | centerTitle: true, 38 | title: Text( 39 | 'AspectRatio Widget', 40 | style: TextStyle( 41 | fontSize: 20.0, 42 | fontWeight: FontWeight.bold, 43 | fontFamily: Utils.ubuntuRegularFont), 44 | ), 45 | actions: [ 46 | IconButton( 47 | icon: Icon(Icons.code), 48 | onPressed: () => Navigator.push( 49 | context, 50 | MaterialPageRoute( 51 | builder: (context) => CodeScreen(code: Code.aspectRatioCode), 52 | ), 53 | ), 54 | ) 55 | ], 56 | ), 57 | body: Column( 58 | children: [ 59 | Padding( 60 | padding: const EdgeInsets.all(8.0), 61 | 62 | /// Aspect Ratio widget sizes itself freely 63 | /// depending on available space 64 | child: AspectRatio( 65 | aspectRatio: aspectRatio, 66 | child: Container( 67 | color: Colors.blueAccent, 68 | ), 69 | ), 70 | ), 71 | divider(context), 72 | Container( 73 | margin: EdgeInsets.only(left: 12, right: 12), 74 | child: Wrap( 75 | children: [ 76 | _OptionItem(aspectRatio1, aspectRatio, _onRatioChanged, 77 | 'Ratio: 16/9'), 78 | _OptionItem( 79 | aspectRatio2, aspectRatio, _onRatioChanged, 'Ratio: 3/2'), 80 | ], 81 | ), 82 | ) 83 | ], 84 | )); 85 | } 86 | 87 | _onRatioChanged(double ratio) => setState(() { 88 | aspectRatio = ratio; 89 | }); 90 | } 91 | 92 | class _OptionItem extends StatelessWidget { 93 | const _OptionItem(this.value, this.groupValue, this.onChanged, this.title); 94 | 95 | final String title; 96 | final T value; 97 | final T groupValue; 98 | final ValueChanged onChanged; 99 | 100 | @override 101 | Widget build(BuildContext context) { 102 | return Row( 103 | mainAxisSize: MainAxisSize.min, 104 | mainAxisAlignment: MainAxisAlignment.center, 105 | children: [ 106 | Radio( 107 | value: value, 108 | groupValue: groupValue, 109 | activeColor: Colors.lightBlue, 110 | onChanged: onChanged), 111 | GestureDetector( 112 | onTap: () { 113 | onChanged(value); 114 | }, 115 | child: Text( 116 | title, 117 | style: 118 | TextStyle(fontSize: 14.0, fontFamily: Utils.ubuntuRegularFont), 119 | ), 120 | ), 121 | ], 122 | ); 123 | } 124 | } 125 | 126 | Container divider(BuildContext context) => Container( 127 | child: Divider(), 128 | margin: EdgeInsets.only(left: 10, right: 10, top: 14), 129 | ); 130 | -------------------------------------------------------------------------------- /lib/screens/backdrop_filter.dart: -------------------------------------------------------------------------------- 1 | import 'dart:ui'; 2 | 3 | import 'package:flutter/material.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | import '../Code.dart'; 8 | import '../CodeScreen.dart'; 9 | 10 | class BackdropFilterWidget extends StatefulWidget { 11 | @override 12 | _BackdropFilterWidgetState createState() => _BackdropFilterWidgetState(); 13 | } 14 | 15 | class _BackdropFilterWidgetState extends State { 16 | var _blurValue = 0.0; 17 | 18 | @override 19 | void initState() { 20 | //Hide banner ad if it isn't already hidden 21 | Ads.hideBannerAd(); 22 | super.initState(); 23 | } 24 | 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | appBar: AppBar( 30 | centerTitle: true, 31 | title: Text( 32 | 'BackdropFilter Widget', 33 | style: TextStyle( 34 | fontSize: 20.0, 35 | fontWeight: FontWeight.bold, 36 | fontFamily: Utils.ubuntuRegularFont), 37 | ), 38 | actions: [ 39 | IconButton( 40 | icon: Icon(Icons.code), 41 | onPressed: () => Navigator.push( 42 | context, 43 | MaterialPageRoute( 44 | builder: (context) => CodeScreen(code: Code.backDropFilterCode), 45 | ), 46 | ), 47 | ) 48 | ], 49 | ), 50 | body: Column( 51 | children: [ 52 | Stack( 53 | children: [ 54 | Container( 55 | margin: EdgeInsets.all(24), 56 | height: 200, 57 | width: 200, 58 | child: FlutterLogo( 59 | colors: Colors.lightBlue, 60 | textColor: Colors.white, 61 | ), 62 | ), 63 | 64 | /// This is to make sure the filter covers the widget beneath it 65 | Positioned.fill( 66 | child: BackdropFilter( 67 | filter: ImageFilter.blur( 68 | sigmaX: _blurValue, 69 | sigmaY: _blurValue, 70 | ), 71 | 72 | /// Child is not affected by the filter, only the widgets 73 | /// beneath it will be affected by the filter. 74 | /// So we use an empty container to demonstrate the changes 75 | /// on the FlutterLogo widget 76 | child: Container( 77 | color: Colors.black.withOpacity(0.0), 78 | ), 79 | ), 80 | ), 81 | ], 82 | ), 83 | Slider( 84 | value: _blurValue, 85 | activeColor: Colors.lightBlue, 86 | inactiveColor: Colors.lightBlue[50], 87 | min: 0.0, 88 | max: 10.0, 89 | divisions: 10, 90 | label: '${_blurValue.truncate()}', 91 | onChanged: (double value) { 92 | setState(() { 93 | _blurValue = value; 94 | }); 95 | }, 96 | ), 97 | Container( 98 | margin: EdgeInsets.all(12), 99 | child: Text( 100 | 'Drag the slider above to change the blur effect on the FLutter Widget', 101 | textAlign: TextAlign.center, 102 | style: TextStyle( 103 | color: Colors.grey[400], 104 | fontSize: 14.0, 105 | fontStyle: FontStyle.italic, 106 | fontFamily: Utils.ubuntuRegularFont), 107 | ), 108 | ), 109 | ], 110 | ), 111 | ); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /lib/screens/builder.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Code.dart'; 4 | import '../CodeScreen.dart'; 5 | import '../utils.dart'; 6 | 7 | class BuilderWidget extends StatefulWidget { 8 | @override 9 | _BuilderWidgetState createState() => _BuilderWidgetState(); 10 | } 11 | 12 | class _BuilderWidgetState extends State { 13 | @override 14 | Widget build(BuildContext context) { 15 | return Scaffold( 16 | appBar: AppBar( 17 | centerTitle: true, 18 | title: Text( 19 | 'Builder Widget', 20 | style: TextStyle( 21 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 22 | ), 23 | actions: [ 24 | IconButton( 25 | icon: Icon(Icons.code), 26 | onPressed: () => Navigator.push( 27 | context, 28 | MaterialPageRoute( 29 | builder: (context) => CodeScreen(code: Code.builderCode), 30 | ), 31 | ), 32 | ) 33 | ], 34 | ), 35 | body: Center( 36 | child: Builder( 37 | builder: (BuildContext context) { 38 | return RaisedButton( 39 | color: Colors.blue, 40 | textColor: Colors.white, 41 | child: Text("Click me"), 42 | onPressed: () { 43 | Scaffold.of(context).showSnackBar( 44 | SnackBar( 45 | content: 46 | Text("I was created using context of a builder and not a scaffold key"), 47 | action: SnackBarAction( 48 | textColor: Colors.yellow, 49 | label: 'OK', 50 | onPressed: () { 51 | Scaffold.of(context).hideCurrentSnackBar(); 52 | }, 53 | ), 54 | ), 55 | ); 56 | }, 57 | ); 58 | }, 59 | ), 60 | ), 61 | ); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /lib/screens/circularProgressIndicator.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Code.dart'; 4 | import '../CodeScreen.dart'; 5 | import '../utils.dart'; 6 | 7 | class CircularProgressIndicatorWidget extends StatefulWidget { 8 | @override 9 | _CircularProgressIndicatorWidgetState createState() => _CircularProgressIndicatorWidgetState(); 10 | } 11 | 12 | class _CircularProgressIndicatorWidgetState extends State 13 | with SingleTickerProviderStateMixin { 14 | AnimationController _animationController; 15 | Animation _colorTween; 16 | var counterStream = 17 | Stream.periodic(Duration(milliseconds: 100), (x) => (x / 100).toDouble()).take(101); 18 | 19 | void initState() { 20 | _animationController = AnimationController( 21 | duration: Duration(milliseconds: 1800), 22 | vsync: this, 23 | ); 24 | _colorTween = _animationController.drive(ColorTween(begin: Colors.green, end: Colors.red)); 25 | _animationController.repeat(); 26 | super.initState(); 27 | } 28 | 29 | @override 30 | void dispose() { 31 | _animationController.dispose(); 32 | super.dispose(); 33 | } 34 | 35 | @override 36 | Widget build(BuildContext context) { 37 | return Scaffold( 38 | appBar: AppBar( 39 | centerTitle: true, 40 | title: Text( 41 | 'ProgressIndicator Widget', 42 | style: TextStyle( 43 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 44 | ), 45 | actions: [ 46 | IconButton( 47 | icon: Icon(Icons.code), 48 | onPressed: () => Navigator.push( 49 | context, 50 | MaterialPageRoute( 51 | builder: (context) => CodeScreen(code: Code.progressIndicatorCode), 52 | ), 53 | ), 54 | ), 55 | ], 56 | ), 57 | body: Column( 58 | mainAxisAlignment: MainAxisAlignment.center, 59 | children: [ 60 | ///CircularProgressIndicator with a value 61 | StreamBuilder( 62 | stream: counterStream, 63 | builder: (context, snapshot) { 64 | print(snapshot.data); 65 | return Padding( 66 | padding: const EdgeInsets.all(12.0), 67 | child: CircularProgressIndicator( 68 | valueColor: AlwaysStoppedAnimation(Colors.blue), 69 | value: snapshot.data, 70 | ), 71 | ); 72 | }, 73 | ), 74 | 75 | ///CircularProgressIndicator with single color 76 | Padding( 77 | padding: const EdgeInsets.all(12.0), 78 | child: CircularProgressIndicator( 79 | valueColor: AlwaysStoppedAnimation(Colors.blue), 80 | ), 81 | ), 82 | 83 | ///CircularProgressIndicator with dual color 84 | Padding( 85 | padding: const EdgeInsets.all(12.0), 86 | child: CircularProgressIndicator(valueColor: _colorTween), 87 | ), 88 | 89 | ///LinearProgressIndicator with dual color 90 | Padding( 91 | padding: const EdgeInsets.all(12.0), 92 | child: LinearProgressIndicator(valueColor: _colorTween), 93 | ), 94 | ], 95 | ), 96 | ); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /lib/screens/clip_path.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/cupertino.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | import '../Code.dart'; 5 | import '../CodeScreen.dart'; 6 | import '../utils.dart'; 7 | 8 | class ClipPathWidget extends StatefulWidget { 9 | @override 10 | _ClipPathWidgetState createState() => _ClipPathWidgetState(); 11 | } 12 | 13 | class _ClipPathWidgetState extends State { 14 | Color bgColor = Colors.blue; 15 | 16 | @override 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | appBar: AppBar( 20 | centerTitle: true, 21 | title: Text( 22 | 'ClipPath Widget', 23 | style: TextStyle( 24 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 25 | ), 26 | actions: [ 27 | IconButton( 28 | icon: Icon(Icons.code), 29 | onPressed: () => Navigator.push( 30 | context, 31 | MaterialPageRoute( 32 | builder: (context) => CodeScreen(code: Code.clipPathCode), 33 | ), 34 | ), 35 | ) 36 | ], 37 | ), 38 | body: Center( 39 | child: ClipPath( 40 | ///specify the clipper with path details here 41 | clipper: DashClipper(), 42 | 43 | ///specify the view to be clipped here 44 | child: GestureDetector( 45 | child: BlueBox(200.0, bgColor), 46 | onTap: () { 47 | setState(() { 48 | bgColor = Utils.getRandomColor(); 49 | }); 50 | }, 51 | ), 52 | ), 53 | ), 54 | ); 55 | } 56 | } 57 | 58 | class BlueBox extends StatelessWidget { 59 | final size; 60 | final bgColor; 61 | 62 | BlueBox(this.size, this.bgColor); 63 | 64 | @override 65 | Widget build(BuildContext context) { 66 | return DecoratedBox( 67 | decoration: BoxDecoration(color: bgColor), 68 | child: SizedBox( 69 | height: size, 70 | width: size, 71 | ), 72 | ); 73 | } 74 | } 75 | 76 | ///Code from the official documents 77 | class DashClipper extends CustomClipper { 78 | @override 79 | Path getClip(Size size) { 80 | Path path = Path(); 81 | path.lineTo(0.6929134, 72.083992); 82 | path.relativeLineTo(9.7270346, -10.425198); 83 | path.relativeLineTo(31.091862, 31.963253); 84 | path.relativeLineTo(19.107612, -22.755906); 85 | path.relativeLineTo(10.073494, -36.824146); 86 | path.relativeLineTo(32.482934, -19.800526); 87 | path.relativeLineTo(-6.2572174, -7.8162728); 88 | path.relativeLineTo(25.711288, -0.17322826); 89 | path.relativeLineTo(-6.603676, 7.989501); 90 | path.relativeLineTo(17.88977, 3.301837); 91 | path.relativeLineTo(30.225724, 18.23622); 92 | path.relativeLineTo(9.02887, 18.587928); 93 | path.relativeLineTo(27.443558, 7.6430436); 94 | path.relativeLineTo(-27.27034, 6.425194); 95 | path.relativeLineTo(0.87139892, 19.454071); 96 | path.relativeLineTo(-11.464569, 22.57743); 97 | path.relativeLineTo(1.9107666, 13.7217864); 98 | path.relativeLineTo(14.939621, 2.6089172); 99 | path.relativeLineTo(-19.627288, 4.5144348); 100 | path.relativeLineTo(-4.519684, -19.800522); 101 | path.relativeLineTo(-9.9002686, 15.112862); 102 | path.relativeLineTo(-33.522308, 5.90551); 103 | path.relativeLineTo(-30.918632, -13.375328); 104 | path.relativeLineTo(-40.120736, -11.1181106); 105 | path.relativeLineTo(-10.9448814, -13.02887); 106 | path.lineTo(0.6929134, 72.083992); 107 | path.close(); 108 | 109 | return path; 110 | } 111 | 112 | @override 113 | bool shouldReclip(CustomClipper oldClipper) => false; 114 | } 115 | -------------------------------------------------------------------------------- /lib/screens/clipoval.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math'; 2 | import 'package:flutter/material.dart'; 3 | 4 | import '../Code.dart'; 5 | import '../CodeScreen.dart'; 6 | import '../utils.dart'; 7 | 8 | class ClipOvalWidget extends StatefulWidget { 9 | @override 10 | _ClipOvalWidgetState createState() => _ClipOvalWidgetState(); 11 | } 12 | 13 | class _ClipOvalWidgetState extends State { 14 | int number = 0; 15 | 16 | @override 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | appBar: AppBar( 20 | centerTitle: true, 21 | title: Text( 22 | 'ClipOval Widget', 23 | style: TextStyle( 24 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 25 | ), 26 | actions: [ 27 | IconButton( 28 | icon: Icon(Icons.code), 29 | onPressed: () => Navigator.push( 30 | context, 31 | MaterialPageRoute( 32 | builder: (context) => CodeScreen(code: Code.clipOvalCode), 33 | ), 34 | ), 35 | ) 36 | ], 37 | ), 38 | body: Center( 39 | child: Column( 40 | mainAxisAlignment: MainAxisAlignment.center, 41 | children: [ 42 | TweenAnimationBuilder( 43 | ///Rest the tween range on number change 44 | tween: number.isEven 45 | ? Tween(begin: 0.5, end: 1.0) 46 | : Tween(begin: 1.0, end: 0.5), 47 | duration: const Duration(milliseconds: 1000), 48 | curve: Curves.easeOutCubic, 49 | builder: (context, tweenValue, child) { 50 | ///This will clip the chile i.e. the Yellow container 51 | return ClipOval( 52 | clipBehavior: Clip.antiAlias, 53 | ///Custom clipper here in which we pass the tweenvalue 54 | ///to behave as a radius and thus help modify the size of the 55 | ///Rect in the clipper. 56 | clipper: MyCircleClipper(tweenValue), 57 | child: Transform.scale( 58 | scale: 2 - tweenValue, 59 | ///A simple way to rotate a widget 60 | child: Transform.rotate( 61 | child: child, 62 | angle: tweenValue + number/2, 63 | ), 64 | ), 65 | ); 66 | }, 67 | child: Container( 68 | height: 200.0, 69 | width: 200.0, 70 | color: Colors.yellow, 71 | child: Center( 72 | child: Padding( 73 | padding: const EdgeInsets.all(0.0), 74 | child: Icon( 75 | Icons.arrow_forward, 76 | size: 50, 77 | color: Colors.red, 78 | ), 79 | ), 80 | ), 81 | ), 82 | onEnd: () { 83 | ///Update the number on every animation end 84 | setState(() { 85 | number++; 86 | }); 87 | }, 88 | ), 89 | ], 90 | ), 91 | ), 92 | ); 93 | } 94 | } 95 | 96 | class MyCircleClipper extends CustomClipper { 97 | final double radius; 98 | 99 | MyCircleClipper(this.radius); 100 | 101 | @override 102 | Rect getClip(Size size) { 103 | ///Here size is the size of the widget over which this ClipOval is wrapped 104 | ///So here, height and width are 200.0 105 | var smaller = min(size.width, size.height); 106 | return Rect.fromCenter( 107 | center: size.center(Offset.zero), 108 | width: smaller * radius, 109 | height: smaller * radius, 110 | ); 111 | } 112 | 113 | @override 114 | bool shouldReclip(MyCircleClipper oldClipper) { 115 | return radius != oldClipper.radius; 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /lib/screens/cupertino_action_sheet.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/cupertino.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:flutter_widget_guide/Code.dart'; 4 | import 'package:flutter_widget_guide/CodeScreen.dart'; 5 | import 'package:flutter_widget_guide/utils.dart'; 6 | 7 | import '../Ads.dart'; 8 | 9 | class CupertinoActionSheetWidget extends StatefulWidget { 10 | @override 11 | _CupertinoActionSheetWidgetState createState() => 12 | _CupertinoActionSheetWidgetState(); 13 | } 14 | 15 | class _CupertinoActionSheetWidgetState 16 | extends State { 17 | GlobalKey _scaffoldKey = GlobalKey(); 18 | 19 | @override 20 | void initState() { 21 | //Hide banner ad if it isn't already hidden 22 | Ads.hideBannerAd(); 23 | super.initState(); 24 | } 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | key: _scaffoldKey, 30 | appBar: AppBar( 31 | centerTitle: true, 32 | title: Text( 33 | 'CupertinoActionSheet Widget', 34 | style: TextStyle( 35 | fontSize: 20.0, 36 | fontWeight: FontWeight.bold, 37 | fontFamily: Utils.ubuntuRegularFont), 38 | ), 39 | actions: [ 40 | IconButton( 41 | icon: Icon(Icons.code), 42 | onPressed: () => Navigator.push( 43 | context, 44 | MaterialPageRoute( 45 | builder: (context) => 46 | CodeScreen(code: Code.cupertinoActionSheetWidgetCode), 47 | ), 48 | ), 49 | ) 50 | ], 51 | ), 52 | body: Center( 53 | child: RaisedButton( 54 | color: Theme.of(context).backgroundColor, 55 | child: Text( 56 | "Show sheet", 57 | style: TextStyle(color: Theme.of(context).primaryColor), 58 | ), 59 | onPressed: () => { 60 | showCupertinoModalPopup( 61 | context: context, 62 | builder: (context) => CupertinoActionSheet( 63 | title: Text( 64 | "Things", 65 | style: TextStyle(color: Theme.of(context).backgroundColor), 66 | ), 67 | message: Text( 68 | "Small list of things to do", 69 | style: TextStyle(color: Theme.of(context).backgroundColor), 70 | ), 71 | actions: [ 72 | CupertinoActionSheetAction( 73 | child: Text( 74 | "Add", 75 | style: TextStyle(color: Colors.blue), 76 | ), 77 | onPressed: () => Navigator.of(context).pop("Add"), 78 | isDefaultAction: true, 79 | ), 80 | CupertinoActionSheetAction( 81 | child: Text( 82 | "Delete", 83 | style: TextStyle(color: Theme.of(context).errorColor), 84 | ), 85 | onPressed: () => Navigator.of(context).pop("Delete"), 86 | isDestructiveAction: true, 87 | ) 88 | ], 89 | cancelButton: CupertinoActionSheetAction( 90 | child: Text( 91 | "Cancel", 92 | style: TextStyle(color: Colors.blue), 93 | ), 94 | onPressed: () => Navigator.of(context).pop("Cancel"), 95 | isDestructiveAction: true, 96 | ), 97 | ), 98 | 99 | ///Getting the chosen option value from sheet here 100 | ).then( 101 | (option) { 102 | if (option != null) { 103 | _scaffoldKey.currentState.showSnackBar( 104 | SnackBar( 105 | content: Text("Chosen option is - $option"), 106 | duration: Duration(milliseconds: 1000), 107 | ), 108 | ); 109 | } 110 | }, 111 | ), 112 | }, 113 | ), 114 | ), 115 | ); 116 | } 117 | } -------------------------------------------------------------------------------- /lib/screens/cupertino_activity_indicator.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/cupertino.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | import '../Code.dart'; 5 | import '../CodeScreen.dart'; 6 | import '../utils.dart'; 7 | 8 | class CupertinoActivityIndicatorWidget extends StatefulWidget { 9 | @override 10 | _CupertinoActivityIndicatorWidgetState createState() => _CupertinoActivityIndicatorWidgetState(); 11 | } 12 | 13 | class _CupertinoActivityIndicatorWidgetState extends State { 14 | @override 15 | Widget build(BuildContext context) { 16 | return Scaffold( 17 | appBar: AppBar( 18 | centerTitle: true, 19 | title: Text( 20 | 'CupertinoActivityIndicator Widget', 21 | style: TextStyle( 22 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 23 | ), 24 | actions: [ 25 | IconButton( 26 | icon: Icon(Icons.code), 27 | onPressed: () => Navigator.push( 28 | context, 29 | MaterialPageRoute( 30 | builder: (context) => CodeScreen(code: Code.cupertinoActivityIndicatorCode), 31 | ), 32 | ), 33 | ), 34 | ], 35 | ), 36 | body: Center( 37 | child: Column( 38 | mainAxisAlignment: MainAxisAlignment.spaceAround, 39 | children: [ 40 | ///Default indicator 41 | CupertinoActivityIndicator(), 42 | ///Default indicator with no animation 43 | CupertinoActivityIndicator( 44 | animating: false, 45 | ), 46 | ///Default indicator with increased size 47 | CupertinoActivityIndicator( 48 | radius: 20, 49 | ) 50 | ], 51 | ), 52 | ), 53 | ); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /lib/screens/divider.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Code.dart'; 4 | import '../CodeScreen.dart'; 5 | import '../utils.dart'; 6 | 7 | class DividerWidget extends StatefulWidget { 8 | @override 9 | _DividerWidgetState createState() => _DividerWidgetState(); 10 | } 11 | 12 | class _DividerWidgetState extends State { 13 | @override 14 | Widget build(BuildContext context) { 15 | return Scaffold( 16 | appBar: AppBar( 17 | centerTitle: true, 18 | title: Text( 19 | 'Divider Widget', 20 | style: TextStyle( 21 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 22 | ), 23 | actions: [ 24 | IconButton( 25 | icon: Icon(Icons.code), 26 | onPressed: () => Navigator.push( 27 | context, 28 | MaterialPageRoute( 29 | builder: (context) => CodeScreen(code: Code.dividerCode), 30 | ), 31 | ), 32 | ), 33 | ], 34 | ), 35 | body: Column( 36 | mainAxisAlignment: MainAxisAlignment.center, 37 | children: [ 38 | Container( 39 | color: Colors.orange, 40 | height: 100.0, 41 | width: 100.0, 42 | ), 43 | Divider( 44 | height: 50, 45 | thickness: 5, 46 | color: Colors.blue, 47 | indent: 10, 48 | endIndent: 10, 49 | ), 50 | Container( 51 | color: Colors.purple, 52 | height: 100.0, 53 | width: 100.0, 54 | ) 55 | ], 56 | ), 57 | ); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /lib/screens/draggable_scrollable_sheet.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/widgets.dart'; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | 5 | import '../Ads.dart'; 6 | import '../Code.dart'; 7 | import '../CodeScreen.dart'; 8 | 9 | class DraggableScrollableSheetWidget extends StatefulWidget { 10 | @override 11 | _DraggableScrollableSheetWidgetState createState() => 12 | _DraggableScrollableSheetWidgetState(); 13 | } 14 | 15 | class _DraggableScrollableSheetWidgetState 16 | extends State { 17 | 18 | @override 19 | void initState() { 20 | //Hide banner ad if it isn't already hidden 21 | Ads.hideBannerAd(); 22 | super.initState(); 23 | } 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return Scaffold( 28 | appBar: AppBar( 29 | centerTitle: true, 30 | title: Text( 31 | 'DraggableScrollableSheet Widget', 32 | style: TextStyle( 33 | fontSize: 20.0, 34 | fontWeight: FontWeight.bold, 35 | fontFamily: Utils.ubuntuRegularFont), 36 | ), 37 | actions: [ 38 | IconButton( 39 | icon: Icon(Icons.code), 40 | onPressed: () => Navigator.push( 41 | context, 42 | MaterialPageRoute( 43 | builder: (context) => 44 | CodeScreen(code: Code.draggableScrollableSheetWidgetCode), 45 | ), 46 | ), 47 | ) 48 | ], 49 | ), 50 | body: Stack( 51 | children: [ 52 | Container( 53 | color: Colors.black87, 54 | child: Center( 55 | child: Text( 56 | "Swipe up from the bottom to drag scrollable sheet", 57 | style: TextStyle(color: Colors.white), 58 | ), 59 | ), 60 | ), 61 | Padding( 62 | padding: const EdgeInsets.only(left: 8.0, right: 8.0), 63 | child: DraggableScrollableSheet( 64 | maxChildSize: 0.9, 65 | initialChildSize: 0.2, 66 | minChildSize: 0.2, 67 | builder: (context, scrollController) { 68 | return Container( 69 | child: ListView.builder( 70 | controller: scrollController, 71 | itemCount: 25, 72 | itemBuilder: (BuildContext context, int index) { 73 | return ListTile( 74 | title: Text( 75 | 'Item $index', 76 | style: TextStyle( 77 | color: Theme.of(context).backgroundColor), 78 | ), 79 | ); 80 | }, 81 | ), 82 | decoration: BoxDecoration( 83 | shape: BoxShape.rectangle, 84 | color: Theme.of(context).primaryColor, 85 | 86 | /// To set a shadow behind the parent container 87 | boxShadow: [ 88 | BoxShadow( 89 | color: Colors.white, 90 | offset: Offset(0.0, -2.0), 91 | blurRadius: 4.0, 92 | ), 93 | ], 94 | 95 | /// To set radius of top left and top right 96 | borderRadius: BorderRadius.only( 97 | topLeft: Radius.circular(24.0), 98 | topRight: Radius.circular(24.0), 99 | ), 100 | ), 101 | ); 102 | }, 103 | ), 104 | ), 105 | ], 106 | ), 107 | ); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /lib/screens/drawer_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/Code.dart'; 3 | import 'package:flutter_widget_guide/CodeScreen.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | 8 | class DrawerWidget extends StatefulWidget { 9 | @override 10 | _DrawerWidgetState createState() => _DrawerWidgetState(); 11 | } 12 | 13 | class _DrawerWidgetState extends State { 14 | GlobalKey _scaffoldKey = new GlobalKey(); 15 | 16 | @override 17 | void initState() { 18 | //Hide banner ad if it isn't already hidden 19 | Ads.hideBannerAd(); 20 | super.initState(); 21 | } 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return Scaffold( 26 | key: _scaffoldKey, 27 | appBar: AppBar( 28 | centerTitle: true, 29 | title: Text( 30 | 'Drawer Widget', 31 | style: TextStyle( 32 | fontSize: 20.0, 33 | fontWeight: FontWeight.bold, 34 | fontFamily: Utils.ubuntuRegularFont), 35 | ), 36 | actions: [ 37 | IconButton( 38 | icon: Icon(Icons.code), 39 | onPressed: () => Navigator.push( 40 | context, 41 | MaterialPageRoute( 42 | builder: (context) => CodeScreen(code: Code.drawerWidgetCode), 43 | ), 44 | ), 45 | ) 46 | ], 47 | ), 48 | drawer: Drawer(child: getDrawerContent(context)), 49 | endDrawer: Drawer(child: getDrawerContent(context)), 50 | body: Center( 51 | child: Container( 52 | width: double.infinity, 53 | child: Column( 54 | mainAxisAlignment: MainAxisAlignment.center, 55 | children: [ 56 | Padding( 57 | padding: const EdgeInsets.all(8.0), 58 | child: RaisedButton( 59 | child: Text('Open Drawer (from left)'), 60 | color: Theme.of(context).backgroundColor, 61 | textColor: Theme.of(context).accentColor, 62 | onPressed: () => _scaffoldKey.currentState.openDrawer(), 63 | ), 64 | ), 65 | Padding( 66 | padding: const EdgeInsets.all(8.0), 67 | child: RaisedButton( 68 | child: Text('Open Drawer (from right)'), 69 | color: Theme.of(context).backgroundColor, 70 | textColor: Theme.of(context).accentColor, 71 | onPressed: () => _scaffoldKey.currentState.openEndDrawer(), 72 | ), 73 | ) 74 | ], 75 | ), 76 | ), 77 | ), 78 | ); 79 | } 80 | 81 | Widget getDrawerContent(BuildContext context) { 82 | return ListView( 83 | children: [ 84 | DrawerHeader( 85 | padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0), 86 | child: Container( 87 | color: Colors.blue, 88 | child: Center( 89 | child: Text( 90 | "Drawer Header", 91 | style: TextStyle(color: Theme.of(context).accentColor), 92 | ), 93 | ), 94 | ), 95 | ), 96 | ListTile( 97 | title: Text("List item 1"), 98 | ), 99 | ListTile( 100 | title: Text("List item 2"), 101 | ), 102 | ListTile( 103 | title: Text("List item 3"), 104 | ), 105 | ListTile( 106 | title: Text("List item 4"), 107 | ), 108 | Center( 109 | child: FlatButton( 110 | shape: RoundedRectangleBorder( 111 | side: BorderSide( 112 | color: Colors.blue, width: 1, style: BorderStyle.solid), 113 | borderRadius: BorderRadius.circular(50)), 114 | child: Text("Click to dismiss"), 115 | onPressed: () => Navigator.of(context).pop(), 116 | ), 117 | ) 118 | ], 119 | ); 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /lib/screens/fade_in_image.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/painting.dart' as painting; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | import 'package:transparent_image/transparent_image.dart'; 5 | 6 | import '../Ads.dart'; 7 | import '../Code.dart'; 8 | import '../CodeScreen.dart'; 9 | 10 | class FadeInImageWidget extends StatefulWidget { 11 | @override 12 | _FadeInImageWidgetState createState() => _FadeInImageWidgetState(); 13 | } 14 | 15 | class _FadeInImageWidgetState extends State { 16 | String _url = 17 | "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350"; 18 | 19 | @override 20 | void initState() { 21 | //Hide banner ad if it isn't already hidden 22 | Ads.hideBannerAd(); 23 | super.initState(); 24 | } 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | appBar: AppBar( 30 | centerTitle: true, 31 | title: Text( 32 | 'FadeInImage Widget', 33 | style: TextStyle( 34 | fontSize: 20.0, 35 | fontWeight: FontWeight.bold, 36 | fontFamily: Utils.ubuntuRegularFont), 37 | ), 38 | actions: [ 39 | IconButton( 40 | icon: Icon(Icons.code), 41 | onPressed: () => Navigator.push( 42 | context, 43 | MaterialPageRoute( 44 | builder: (context) => CodeScreen(code: Code.fadeInImageCode), 45 | ), 46 | ), 47 | ) 48 | ], 49 | ), 50 | 51 | ///Will pop scope is used to detect if the user pressed back button 52 | body: WillPopScope( 53 | child: Stack(children: [ 54 | ///We can choose to show an indicator as well to let user know that 55 | ///something is being loaded 56 | Center( 57 | child: CircularProgressIndicator( 58 | 59 | ///this is to specify the color of the CircularProgressIndicator 60 | valueColor: AlwaysStoppedAnimation(Colors.blue))), 61 | Center( 62 | child: Container( 63 | child: FadeInImage.memoryNetwork( 64 | 65 | ///Specifying dimensions of the image before and after 66 | ///loading 67 | height: 350, 68 | width: 350, 69 | 70 | ///we are using the transparent_image package 71 | ///to show a transparent image as a placeholder. 72 | placeholder: kTransparentImage, 73 | image: _url), 74 | ), 75 | ), 76 | ]), 77 | onWillPop: _willPopCallback, 78 | ), 79 | ); 80 | } 81 | } 82 | 83 | Future _willPopCallback() async { 84 | ///clear image cache and exit screen 85 | ///this is done so that the image loads every time you open the 86 | ///screen. (it is cached otherwise) 87 | painting.imageCache.clear(); 88 | return true; // return true if the route to be popped 89 | } 90 | -------------------------------------------------------------------------------- /lib/screens/fade_transition.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class FadeTransitionWidget extends StatefulWidget { 9 | @override 10 | _FadeTransitionWidgetState createState() => _FadeTransitionWidgetState(); 11 | } 12 | 13 | class _FadeTransitionWidgetState extends State 14 | with SingleTickerProviderStateMixin { 15 | AnimationController _controller; 16 | Animation _animation; 17 | CurvedAnimation _curve; 18 | 19 | @override 20 | void initState() { 21 | ///An animation controller lets you control the 22 | ///duration of an animation 23 | ///Here the ticker for vsync provider is provided 24 | ///by the SingleTickerProviderStateMixin 25 | _controller = AnimationController( 26 | vsync: this, 27 | duration: Duration(milliseconds: 500), 28 | ); 29 | 30 | ///Providing our animation with a curve (Parent here is the controller 31 | ///above) 32 | _curve = CurvedAnimation(parent: _controller, curve: Curves.easeIn); 33 | 34 | ///Creating a Tween animation with start and end values for the 35 | ///opacity and providing it with our animation controller 36 | _animation = Tween( 37 | begin: 0.0, 38 | end: 1.0, 39 | ).animate(_curve); 40 | 41 | ///Set a status listener to our animation to control the behaviour 42 | ///of our animation 43 | _animation.addStatusListener((status) { 44 | if (status == AnimationStatus.completed) 45 | _controller.reverse(); 46 | else if (status == AnimationStatus.dismissed) _controller.forward(); 47 | }); 48 | 49 | //Hide banner ad if it isn't already hidden 50 | Ads.hideBannerAd(); 51 | 52 | super.initState(); 53 | } 54 | 55 | @override 56 | void dispose() { 57 | ///Don't forget to clean up resources when you are done using it 58 | _controller.dispose(); 59 | super.dispose(); 60 | } 61 | 62 | @override 63 | Widget build(BuildContext context) { 64 | return Scaffold( 65 | appBar: AppBar( 66 | centerTitle: true, 67 | title: Text( 68 | 'Fade Transition Widget', 69 | style: TextStyle( 70 | fontSize: 20.0, 71 | fontWeight: FontWeight.bold, 72 | fontFamily: Utils.ubuntuRegularFont), 73 | ), 74 | actions: [ 75 | IconButton( 76 | icon: Icon(Icons.code), 77 | onPressed: () => Navigator.push( 78 | context, 79 | MaterialPageRoute( 80 | builder: (context) => CodeScreen(code: Code.fadeTransitionCode), 81 | ), 82 | ), 83 | ) 84 | ], 85 | ), 86 | body: Center( 87 | child: FadeTransition( 88 | ///Providing our animation to opacity property 89 | opacity: _animation, 90 | child: Icon( 91 | Icons.favorite, 92 | color: Colors.red, 93 | size: 300, 94 | ), 95 | ), 96 | ), 97 | floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, 98 | floatingActionButton: FloatingActionButton.extended( 99 | backgroundColor: Colors.lightBlue, 100 | onPressed: () => setState(() { 101 | ///We start the animation by calling this 102 | _controller.forward(); 103 | }), 104 | icon: Icon( 105 | Icons.movie_filter, 106 | color: Colors.white, 107 | ), 108 | label: Text( 109 | "Animate", 110 | style: TextStyle(color: Colors.white), 111 | ), 112 | ), 113 | ); 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /lib/screens/fractionally_sizedbox.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class FractionallySizedBoxWidget extends StatefulWidget { 9 | @override 10 | _FractionallySizedBoxWidgetState createState() => 11 | _FractionallySizedBoxWidgetState(); 12 | } 13 | 14 | class _FractionallySizedBoxWidgetState 15 | extends State { 16 | ///Initial Slider widget value 17 | var _value = 0.50; 18 | 19 | @override 20 | void initState() { 21 | //Hide banner ad if it isn't already hidden 22 | Ads.hideBannerAd(); 23 | super.initState(); 24 | } 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | appBar: AppBar( 30 | centerTitle: true, 31 | title: Text( 32 | 'FractionallySizedBox Widget', 33 | style: TextStyle( 34 | fontSize: 20.0, 35 | fontWeight: FontWeight.bold, 36 | fontFamily: Utils.ubuntuRegularFont), 37 | ), 38 | actions: [ 39 | IconButton( 40 | icon: Icon(Icons.code), 41 | onPressed: () => Navigator.push( 42 | context, 43 | MaterialPageRoute( 44 | builder: (context) => 45 | CodeScreen(code: Code.fractionallySizedBoxCode), 46 | ), 47 | ), 48 | ) 49 | ], 50 | ), 51 | body: Column( 52 | children: [ 53 | Flexible( 54 | child: FractionallySizedBox( 55 | widthFactor: _value, 56 | heightFactor: 0.5, 57 | child: Container( 58 | color: Colors.blue, 59 | ), 60 | ), 61 | ), 62 | Container( 63 | margin: EdgeInsets.only(top: 24.0), 64 | child: Text("Width factor is : ${_value.abs()}"), 65 | ), 66 | Container( 67 | margin: EdgeInsets.only(top: 12.0), 68 | child: Text( 69 | "Covering ${(_value * 100).toStringAsFixed(0)}% of device width"), 70 | ), 71 | 72 | ///Slider widget to set opacity value 73 | Container( 74 | margin: EdgeInsets.only(top: 24), 75 | child: Slider( 76 | value: _value, 77 | 78 | ///Color for active side of Slider 79 | activeColor: Colors.lightBlue, 80 | 81 | ///Color for inactive side of Slider 82 | inactiveColor: Colors.lightBlue[50], 83 | 84 | ///Minimum value of the slider 85 | min: 0.0, 86 | 87 | ///Maximum value of the slider 88 | max: 1.0, 89 | 90 | ///No.Of divisions from min to max value on the Slider 91 | divisions: 100, 92 | 93 | ///Value indicator above the slider 94 | label: "${_value.abs()}", 95 | onChanged: (double value) { 96 | setState(() { 97 | _value = value; 98 | }); 99 | }, 100 | ), 101 | ), 102 | Text('Drag to change width factor'), 103 | ], 104 | ), 105 | ); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /lib/screens/hero.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/scheduler.dart' show timeDilation; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class HeroWidget extends StatelessWidget { 9 | @override 10 | Widget build(BuildContext context) { 11 | return Scaffold( 12 | appBar: AppBar( 13 | centerTitle: true, 14 | title: Text( 15 | 'Hero Widget', 16 | style: TextStyle( 17 | fontSize: 20.0, 18 | fontWeight: FontWeight.bold, 19 | fontFamily: Utils.ubuntuRegularFont), 20 | ), 21 | actions: [ 22 | IconButton( 23 | icon: Icon(Icons.code), 24 | onPressed: () => Navigator.push( 25 | context, 26 | MaterialPageRoute( 27 | builder: (context) => CodeScreen(code: Code.heroCode), 28 | ), 29 | ), 30 | ) 31 | ], 32 | ), 33 | body: WillPopScope( 34 | child: GestureDetector( 35 | child: Column( 36 | mainAxisAlignment: MainAxisAlignment.end, 37 | mainAxisSize: MainAxisSize.max, 38 | children: [ 39 | Padding( 40 | padding: EdgeInsets.only(left: 12, right: 12, top: 8), 41 | child: Text( 42 | 'Click the Widget below to observe Hero animation in slow motion', 43 | style: TextStyle( 44 | color: Colors.grey[400], 45 | fontSize: 14.0, 46 | fontStyle: FontStyle.italic, 47 | fontFamily: Utils.ubuntuRegularFont), 48 | textAlign: TextAlign.center, 49 | ), 50 | ), 51 | Row( 52 | mainAxisAlignment: MainAxisAlignment.center, 53 | mainAxisSize: MainAxisSize.max, 54 | children: [ 55 | Hero( 56 | tag: "hero", 57 | child: Container( 58 | width: 100, 59 | height: 100, 60 | margin: EdgeInsets.all(12), 61 | child: Stack( 62 | children: [ 63 | ClipRRect( 64 | child: Container( 65 | color: Colors.amber, 66 | ), 67 | borderRadius: BorderRadius.circular(100), 68 | clipBehavior: Clip.antiAlias, 69 | ), 70 | Center( 71 | child: Container( 72 | margin: EdgeInsets.all(10), 73 | width: 100, 74 | height: 100, 75 | child: FlutterLogo( 76 | colors: Colors.lightBlue, 77 | textColor: Colors.white, 78 | ), 79 | ), 80 | ), 81 | ], 82 | ), 83 | ), 84 | ), 85 | ], 86 | ), 87 | ], 88 | ), 89 | onTap: () { 90 | Navigator.pushNamed(context, '${Utils.hero2}'); 91 | timeDilation = 4.0; 92 | }), 93 | onWillPop: () { 94 | ///Reset timeDilation since it is a Global property 95 | timeDilation = 1.0; 96 | return Future.value(true); 97 | }, 98 | ), 99 | ); 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /lib/screens/hero2.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/scheduler.dart' show timeDilation; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | 5 | class Hero2Widget extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return Scaffold( 9 | appBar: AppBar( 10 | title: Container( 11 | child: Center( 12 | child: Text( 13 | 'Hero 2 Widget', 14 | style: TextStyle( 15 | fontSize: 20.0, 16 | fontWeight: FontWeight.bold, 17 | fontFamily: Utils.ubuntuRegularFont), 18 | ), 19 | ), 20 | margin: EdgeInsets.only(right: 48), 21 | ), 22 | ), 23 | body: WillPopScope( 24 | child: Row( 25 | mainAxisAlignment: MainAxisAlignment.center, 26 | mainAxisSize: MainAxisSize.max, 27 | children: [ 28 | Hero( 29 | tag: "hero", 30 | child: Container( 31 | width: 200, 32 | height: 200, 33 | margin: EdgeInsets.all(12), 34 | child: Stack( 35 | children: [ 36 | ClipRRect( 37 | child: Container( 38 | color: Colors.amber, 39 | ), 40 | borderRadius: BorderRadius.circular(0), 41 | clipBehavior: Clip.antiAlias, 42 | ), 43 | Center( 44 | child: Container( 45 | margin: EdgeInsets.all(10), 46 | width: 100, 47 | height: 100, 48 | child: FlutterLogo( 49 | colors: Colors.lightBlue, 50 | textColor: Colors.white, 51 | ), 52 | ), 53 | ), 54 | ], 55 | ), 56 | ), 57 | ), 58 | ], 59 | ), 60 | onWillPop: () { 61 | timeDilation = 4.0; 62 | return Future.value(true); 63 | }, 64 | ), 65 | ); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /lib/screens/ignore_pointer.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Code.dart'; 4 | import '../CodeScreen.dart'; 5 | import '../utils.dart'; 6 | 7 | class IgnorePointerWidget extends StatefulWidget { 8 | @override 9 | _IgnorePointerWidgetState createState() => _IgnorePointerWidgetState(); 10 | } 11 | 12 | class _IgnorePointerWidgetState extends State { 13 | Color bgColor = Colors.blue; 14 | String message = "Click me to change my color"; 15 | bool ignore = false; 16 | 17 | @override 18 | Widget build(BuildContext context) { 19 | return Scaffold( 20 | appBar: AppBar( 21 | centerTitle: true, 22 | title: Text( 23 | 'IgnorePointer Widget', 24 | style: TextStyle( 25 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 26 | ), 27 | actions: [ 28 | IconButton( 29 | icon: Icon(Icons.code), 30 | onPressed: () => Navigator.push( 31 | context, 32 | MaterialPageRoute( 33 | builder: (context) => CodeScreen(code: Code.ignorePointerCode), 34 | ), 35 | ), 36 | ), 37 | ], 38 | ), 39 | body: Column( 40 | mainAxisAlignment: MainAxisAlignment.center, 41 | children: [ 42 | Center( 43 | child: IgnorePointer( 44 | ignoring: ignore, 45 | child: GestureDetector( 46 | child: Container( 47 | height: 150.0, 48 | width: 150.0, 49 | color: bgColor, 50 | child: Padding( 51 | padding: const EdgeInsets.symmetric(horizontal: 8.0), 52 | child: Center( 53 | child: Text( 54 | message, 55 | style: TextStyle(color: Colors.white), 56 | textAlign: TextAlign.center, 57 | ), 58 | ), 59 | ), 60 | ), 61 | onTap: () { 62 | setState(() { 63 | bgColor = Utils.getRandomColor(); 64 | }); 65 | }, 66 | ), 67 | ), 68 | ) 69 | ], 70 | ), 71 | floatingActionButton: FloatingActionButton.extended( 72 | backgroundColor: Colors.blue, 73 | onPressed: () { 74 | setState( 75 | () { 76 | ignore ? ignore = false : ignore = true; 77 | ignore 78 | ? message = "You cannot click me to change my color" 79 | : message = "Click me to change my color"; 80 | }, 81 | ); 82 | }, 83 | label: ignore ? Text("Enable click") : Text("Disable click"), 84 | ), 85 | floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, 86 | ); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /lib/screens/inherited_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | 6 | class InheritedWidgett extends StatefulWidget { 7 | @override 8 | _InheritedWidgettState createState() => _InheritedWidgettState(); 9 | } 10 | 11 | class _InheritedWidgettState extends State { 12 | 13 | @override 14 | void initState() { 15 | //Hide banner ad if it isn't already hidden 16 | Ads.hideBannerAd(); 17 | super.initState(); 18 | } 19 | 20 | @override 21 | Widget build(BuildContext context) { 22 | return Scaffold( 23 | appBar: AppBar( 24 | centerTitle: true, 25 | title: Text( 26 | 'Inherited Widget', 27 | style: TextStyle( 28 | fontSize: 20.0, 29 | fontWeight: FontWeight.bold, 30 | fontFamily: Utils.ubuntuRegularFont), 31 | ), 32 | ), 33 | body: Center( 34 | child: Padding( 35 | padding: const EdgeInsets.all(12.0), 36 | child: Container( 37 | color: Colors.white, 38 | child: Text( 39 | "This widget will be added soon", 40 | style: TextStyle( 41 | fontSize: 20.0, 42 | color: Colors.black, 43 | fontWeight: FontWeight.bold, 44 | fontFamily: Utils.ubuntuRegularFont), 45 | ), 46 | ), 47 | ), 48 | ), 49 | ); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /lib/screens/layout_builder.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Code.dart'; 5 | import '../CodeScreen.dart'; 6 | 7 | class LayoutBuilderWidget extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return Scaffold( 11 | appBar: AppBar( 12 | centerTitle: true, 13 | title: Text( 14 | 'LayoutBuilder Widget', 15 | style: TextStyle( 16 | fontSize: 20.0, 17 | fontWeight: FontWeight.bold, 18 | fontFamily: Utils.ubuntuRegularFont), 19 | ), 20 | actions: [ 21 | IconButton( 22 | icon: Icon(Icons.code), 23 | onPressed: () => Navigator.push( 24 | context, 25 | MaterialPageRoute( 26 | builder: (context) => CodeScreen(code: Code.layoutBuilderCode), 27 | ), 28 | ), 29 | ) 30 | ], 31 | ), 32 | body: Center( 33 | child: LayoutBuilder( 34 | builder: (context, constraints) { 35 | if (constraints.maxWidth < 600) { 36 | return Row( 37 | mainAxisSize: MainAxisSize.max, 38 | mainAxisAlignment: MainAxisAlignment.center, 39 | children: [ 40 | Expanded( 41 | child: Container(color: Colors.lightBlue), 42 | flex: 1, 43 | ), 44 | Expanded( 45 | child: Container(color: Colors.indigo), 46 | flex: 1, 47 | ) 48 | ], 49 | ); 50 | } else { 51 | return Row( 52 | mainAxisSize: MainAxisSize.max, 53 | mainAxisAlignment: MainAxisAlignment.center, 54 | children: [ 55 | Expanded( 56 | child: Container(color: Colors.lightBlue), 57 | flex: 1, 58 | ), 59 | Expanded( 60 | child: Container(color: Colors.indigo), 61 | flex: 1, 62 | ), 63 | Expanded( 64 | child: Container(color: Colors.pink), 65 | flex: 1, 66 | ), 67 | Expanded( 68 | child: Container(color: Colors.blue), 69 | flex: 1, 70 | ) 71 | ], 72 | ); 73 | } 74 | }, 75 | ), 76 | ), 77 | ); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /lib/screens/limited_box.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class LimitedBoxWidget extends StatefulWidget { 9 | @override 10 | _LimitedBoxWidgetState createState() => _LimitedBoxWidgetState(); 11 | } 12 | 13 | class _LimitedBoxWidgetState extends State { 14 | 15 | @override 16 | void initState() { 17 | //Hide banner ad if it isn't already hidden 18 | Ads.hideBannerAd(); 19 | super.initState(); 20 | } 21 | 22 | @override 23 | Widget build(BuildContext context) { 24 | return Scaffold( 25 | appBar: AppBar( 26 | centerTitle: true, 27 | title: Text( 28 | 'LimitedBox Widget', 29 | style: TextStyle( 30 | fontSize: 20.0, 31 | fontWeight: FontWeight.bold, 32 | fontFamily: Utils.ubuntuRegularFont), 33 | ), 34 | actions: [ 35 | IconButton( 36 | icon: Icon(Icons.code), 37 | onPressed: () => Navigator.push( 38 | context, 39 | MaterialPageRoute( 40 | builder: (context) => CodeScreen(code: Code.limitedBoxCode), 41 | ), 42 | ), 43 | ) 44 | ], 45 | ), 46 | body: MediaQuery.of(context).orientation == Orientation.portrait 47 | ? portraitLayout(context) 48 | : landscapeLayout(context)); 49 | } 50 | } 51 | 52 | Widget portraitLayout(context) => ListView( 53 | children: [ 54 | /// The size of the container is 0 in unconstrained environment 55 | /// So Wrapping it with a LimitedBox will force its bounds 56 | /// to set maxHeight or maxWidth. 57 | /// Limited Box doesn't follow constraints when the parent is already 58 | /// Bounded by constraints. It doesn't follow maxHeight of width 59 | /// in that case 60 | LimitedBox( 61 | maxHeight: 200, 62 | child: Container( 63 | color: Colors.amber, 64 | child: Center( 65 | child: Padding( 66 | padding: const EdgeInsets.all(8.0), 67 | child: Text( 68 | "I am wrapped inside a Limited Box with maxHeight set to 200\n" 69 | "This is necessary as my parent (ListView) is unconstrained\n" 70 | "Flip screen to see the other case", 71 | style: TextStyle(color: Colors.black), 72 | textAlign: TextAlign.center, 73 | ), 74 | ), 75 | ), 76 | ), 77 | ), 78 | ], 79 | ); 80 | 81 | Widget landscapeLayout(context) => Container( 82 | color: Colors.indigo, 83 | child: LimitedBox( 84 | maxWidth: 20, 85 | child: Container( 86 | color: Colors.amber, 87 | child: Center( 88 | child: Padding( 89 | padding: const EdgeInsets.all(8.0), 90 | child: Text( 91 | "I am wrapped inside a Limited Box with maxWidth set to 20\n" 92 | "But as my parent (Container) is already constrained, LimitedBox is respecting\n" 93 | "those constrains.", 94 | style: TextStyle(color: Colors.black), 95 | textAlign: TextAlign.center, 96 | ), 97 | ), 98 | ), 99 | ), 100 | ), 101 | ); 102 | -------------------------------------------------------------------------------- /lib/screens/list_tile.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/rendering.dart'; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | 5 | import '../Ads.dart'; 6 | import '../Code.dart'; 7 | import '../CodeScreen.dart'; 8 | 9 | class ListTileWidget extends StatefulWidget { 10 | @override 11 | _ListTileWidgetState createState() => _ListTileWidgetState(); 12 | } 13 | 14 | class _ListTileWidgetState extends State { 15 | final List entries = [ 16 | 'Item 1', 17 | 'Item 2', 18 | 'Item 3', 19 | 'Item 4', 20 | 'Item 5', 21 | 'Item 6', 22 | 'Item 7', 23 | 'Item 8', 24 | 'Item 9', 25 | 'Item 10', 26 | 'Item 11', 27 | 'Item 12', 28 | 'Item 13', 29 | 'Item 14', 30 | 'Item 15' 31 | ]; 32 | 33 | @override 34 | void initState() { 35 | //Hide banner ad if it isn't already hidden 36 | Ads.hideBannerAd(); 37 | super.initState(); 38 | } 39 | 40 | @override 41 | Widget build(BuildContext context) { 42 | return Scaffold( 43 | appBar: AppBar( 44 | centerTitle: true, 45 | title: Text( 46 | 'ListTile Widget', 47 | style: TextStyle( 48 | fontSize: 20.0, 49 | fontWeight: FontWeight.bold, 50 | fontFamily: Utils.ubuntuRegularFont), 51 | ), 52 | actions: [ 53 | IconButton( 54 | icon: Icon(Icons.code), 55 | onPressed: () => Navigator.push( 56 | context, 57 | MaterialPageRoute( 58 | builder: (context) => CodeScreen(code: Code.listTileCode), 59 | ), 60 | ), 61 | ) 62 | ], 63 | ), 64 | body: ListView.separated( 65 | padding: const EdgeInsets.only(top: 8, left: 8, right: 8, bottom: 8), 66 | itemCount: entries.length, 67 | reverse: false, 68 | itemBuilder: (BuildContext context, int index) { 69 | return Container( 70 | color: Colors.blue[500], 71 | child: ListTile( 72 | leading: GestureDetector( 73 | onTap: () {}, 74 | child: Container( 75 | width: 48, 76 | height: 48, 77 | padding: EdgeInsets.symmetric(vertical: 4.0), 78 | alignment: Alignment.center, 79 | child: CircleAvatar( 80 | child: Icon(Icons.person), 81 | backgroundColor: Colors.white, 82 | ), 83 | ), 84 | ), 85 | trailing: Icon( 86 | Icons.more_vert, 87 | color: Colors.white, 88 | ), 89 | title: Text( 90 | "Person ${index + 1}", 91 | style: TextStyle(color: Colors.white), 92 | ), 93 | subtitle: Text( 94 | "${entries[index]}", 95 | style: TextStyle(color: Colors.white), 96 | ), 97 | onTap: () => null, 98 | ), 99 | ); 100 | }, 101 | separatorBuilder: (BuildContext context, int index) => Divider( 102 | thickness: 2, 103 | ), 104 | ), 105 | ); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /lib/screens/list_view.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/rendering.dart'; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | 5 | import '../Ads.dart'; 6 | import '../Code.dart'; 7 | import '../CodeScreen.dart'; 8 | 9 | class ListViewWidget extends StatefulWidget { 10 | @override 11 | _ListViewWidgetState createState() => _ListViewWidgetState(); 12 | } 13 | 14 | class _ListViewWidgetState extends State { 15 | final List entries = [ 16 | 'Item 1', 17 | 'Item 2', 18 | 'Item 3', 19 | 'Item 4', 20 | 'Item 5', 21 | 'Item 6', 22 | 'Item 7', 23 | 'Item 8', 24 | 'Item 9', 25 | 'Item 10', 26 | 'Item 11', 27 | 'Item 12', 28 | 'Item 13', 29 | 'Item 14', 30 | 'Item 15' 31 | ]; 32 | 33 | @override 34 | void initState() { 35 | //Hide banner ad if it isn't already hidden 36 | Ads.hideBannerAd(); 37 | super.initState(); 38 | } 39 | 40 | @override 41 | Widget build(BuildContext context) { 42 | return Scaffold( 43 | appBar: AppBar( 44 | centerTitle: true, 45 | title: Text( 46 | 'ListView Widget', 47 | style: TextStyle( 48 | fontSize: 20.0, 49 | fontWeight: FontWeight.bold, 50 | fontFamily: Utils.ubuntuRegularFont), 51 | ), 52 | actions: [ 53 | IconButton( 54 | icon: Icon(Icons.code), 55 | onPressed: () => Navigator.push( 56 | context, 57 | MaterialPageRoute( 58 | builder: (context) => CodeScreen(code: Code.listViewCode), 59 | ), 60 | ), 61 | ) 62 | ], 63 | ), 64 | body: ListView.separated( 65 | padding: const EdgeInsets.only(top: 8, left: 8, right: 8, bottom: 8), 66 | itemCount: entries.length, 67 | reverse: false, 68 | itemBuilder: (BuildContext context, int index) { 69 | return Container( 70 | color: Colors.blue[500], 71 | child: ListTile( 72 | leading: GestureDetector( 73 | onTap: () {}, 74 | child: Container( 75 | width: 48, 76 | height: 48, 77 | padding: EdgeInsets.symmetric(vertical: 4.0), 78 | alignment: Alignment.center, 79 | child: CircleAvatar( 80 | child: Icon(Icons.person), 81 | backgroundColor: Colors.white, 82 | ), 83 | ), 84 | ), 85 | trailing: Icon( 86 | Icons.more_vert, 87 | color: Colors.white, 88 | ), 89 | title: Text( 90 | "Person ${index + 1}", 91 | style: TextStyle(color: Colors.white), 92 | ), 93 | subtitle: Text( 94 | "${entries[index]}", 95 | style: TextStyle(color: Colors.white), 96 | ), 97 | onTap: () => null, 98 | ), 99 | ); 100 | }, 101 | separatorBuilder: (BuildContext context, int index) => Divider( 102 | thickness: 2, 103 | ), 104 | ), 105 | ); 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /lib/screens/listwheelscrollview_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/Code.dart'; 3 | import 'package:flutter_widget_guide/CodeScreen.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | 8 | class ListWheelScrollViewWidget extends StatefulWidget { 9 | @override 10 | _ListWheelScrollViewWidgetState createState() => 11 | _ListWheelScrollViewWidgetState(); 12 | } 13 | 14 | class _ListWheelScrollViewWidgetState extends State { 15 | ///Initial Slider widget value 16 | var _value = 0.0; 17 | 18 | final List entries = List.generate( 19 | 15, 20 | (i) => Card( 21 | color: Utils.getRandomColor(), 22 | child: Center( 23 | child: Text( 24 | "Item ${i + 1}", 25 | style: TextStyle(color: Colors.white), 26 | ), 27 | ), 28 | ), 29 | ); 30 | 31 | @override 32 | void initState() { 33 | //Hide banner ad if it isn't already hidden 34 | Ads.hideBannerAd(); 35 | super.initState(); 36 | } 37 | 38 | @override 39 | Widget build(BuildContext context) { 40 | return Scaffold( 41 | appBar: AppBar( 42 | centerTitle: true, 43 | title: Text( 44 | 'ListWheelScrollView Widget', 45 | style: TextStyle( 46 | fontSize: 20.0, 47 | fontWeight: FontWeight.bold, 48 | fontFamily: Utils.ubuntuRegularFont), 49 | ), 50 | actions: [ 51 | IconButton( 52 | icon: Icon(Icons.code), 53 | onPressed: () => Navigator.push( 54 | context, 55 | MaterialPageRoute( 56 | builder: (context) => 57 | CodeScreen(code: Code.listWheelScrollViewWidgetCode), 58 | ), 59 | ), 60 | ) 61 | ], 62 | ), 63 | body: Column( 64 | mainAxisSize: MainAxisSize.max, 65 | children: [ 66 | Flexible( 67 | flex: 8, 68 | child: ListWheelScrollView( 69 | children: entries, 70 | itemExtent: 100, 71 | offAxisFraction: _value, 72 | ), 73 | ), 74 | Flexible( 75 | flex: 1, 76 | child: Center( 77 | child: Text( 78 | "Drag to change offAxisFraction value", 79 | ), 80 | ), 81 | ), 82 | Flexible( 83 | flex: 1, 84 | child: Slider( 85 | value: _value, 86 | 87 | ///Color for active side of Slider 88 | activeColor: Colors.lightBlue, 89 | 90 | ///Color for inactive side of Slider 91 | inactiveColor: Colors.lightBlue[50], 92 | 93 | ///Minimum value of the slider 94 | min: -1.0, 95 | 96 | ///Maximum value of the slider 97 | max: 1.0, 98 | 99 | ///No.Of divisions from min to max value on the Slider 100 | divisions: 100, 101 | 102 | ///Value indicator above the slider 103 | label: "${_value.toStringAsFixed(2)}", 104 | onChanged: (double value) { 105 | setState( 106 | () { 107 | _value = value; 108 | }, 109 | ); 110 | }, 111 | ), 112 | ), 113 | ], 114 | ), 115 | ); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /lib/screens/notification_listener.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Code.dart'; 4 | import '../CodeScreen.dart'; 5 | import '../utils.dart'; 6 | 7 | class NotificationListenerWidget extends StatefulWidget { 8 | @override 9 | _NotificationListenerWidgetState createState() => _NotificationListenerWidgetState(); 10 | } 11 | 12 | class _NotificationListenerWidgetState extends State { 13 | Color color = Colors.blue; 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | return Scaffold( 18 | appBar: AppBar( 19 | centerTitle: true, 20 | title: Text( 21 | 'NotificationListener Widget', 22 | style: TextStyle( 23 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 24 | ), 25 | actions: [ 26 | IconButton( 27 | icon: Icon(Icons.code), 28 | onPressed: () => Navigator.push( 29 | context, 30 | MaterialPageRoute( 31 | builder: (context) => CodeScreen(code: Code.notificationListenerCode), 32 | ), 33 | ), 34 | ) 35 | ], 36 | ), 37 | body: Center( 38 | child: NotificationListener( 39 | child: ChangeColor( 40 | bgColor: color, 41 | ), 42 | 43 | ///Notification is received here whenever 44 | onNotification: (notification) { 45 | setState(() { 46 | color = notification.color; 47 | }); 48 | return true; 49 | }, 50 | ), 51 | ), 52 | ); 53 | } 54 | } 55 | 56 | ///Child widget that will initiate a change to bubble up the parent 57 | class ChangeColor extends StatelessWidget { 58 | final Color bgColor; 59 | 60 | ChangeColor({this.bgColor}); 61 | 62 | @override 63 | Widget build(BuildContext context) { 64 | return Center( 65 | child: FlatButton( 66 | textColor: Colors.white, 67 | color: bgColor, 68 | child: Text("Click to change my color"), 69 | onPressed: () { 70 | final randomColor = Utils.getRandomColor(); 71 | ColorNotification(color: randomColor)..dispatch(context); 72 | }, 73 | ), 74 | ); 75 | } 76 | } 77 | 78 | class ColorNotification extends Notification { 79 | final Color color; 80 | 81 | const ColorNotification({this.color}); 82 | } 83 | -------------------------------------------------------------------------------- /lib/screens/padding.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Code.dart'; 4 | import '../CodeScreen.dart'; 5 | import '../utils.dart'; 6 | 7 | class PaddingWidget extends StatefulWidget { 8 | @override 9 | _PaddingWidgetState createState() => _PaddingWidgetState(); 10 | } 11 | 12 | class _PaddingWidgetState extends State with SingleTickerProviderStateMixin { 13 | AnimationController _controller; 14 | 15 | bool isPadding = false; 16 | 17 | @override 18 | void initState() { 19 | ///Here lowerBound and upperBound is the value of padding 20 | _controller = AnimationController( 21 | vsync: this, 22 | lowerBound: 0, 23 | upperBound: 48, 24 | duration: Duration(seconds: 2), 25 | ); 26 | 27 | super.initState(); 28 | } 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | return Scaffold( 33 | appBar: AppBar( 34 | centerTitle: true, 35 | title: Text( 36 | 'Padding Widget', 37 | style: TextStyle( 38 | fontSize: 20.0, fontWeight: FontWeight.bold, fontFamily: Utils.ubuntuRegularFont), 39 | ), 40 | actions: [ 41 | IconButton( 42 | icon: Icon(Icons.code), 43 | onPressed: () => Navigator.push( 44 | context, 45 | MaterialPageRoute( 46 | builder: (context) => CodeScreen(code: Code.paddingCode), 47 | ), 48 | ), 49 | ) 50 | ], 51 | ), 52 | body: AnimatedBuilder( 53 | animation: _controller, 54 | builder: (BuildContext context, Widget child) { 55 | return Column( 56 | children: [ 57 | FlexContainer(color: Colors.yellow, padding: _controller.value), 58 | Flexible( 59 | child: Row( 60 | children: [ 61 | FlexContainer(color: Colors.green, padding: _controller.value), 62 | FlexContainer(color: Colors.blue, padding: _controller.value), 63 | FlexContainer(color: Colors.green, padding: _controller.value), 64 | ], 65 | ), 66 | ), 67 | FlexContainer(color: Colors.red, padding: _controller.value), 68 | ], 69 | ); 70 | }, 71 | ), 72 | floatingActionButton: FloatingActionButton.extended( 73 | backgroundColor: Colors.blue, 74 | onPressed: () { 75 | _controller.value == 0 ? _controller.forward() : _controller.reverse(); 76 | setState(() { 77 | isPadding ? isPadding = false : isPadding = true; 78 | }); 79 | }, 80 | label: isPadding ? Text("Remove padding") : Text("Add padding"), 81 | ), 82 | floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, 83 | ); 84 | } 85 | 86 | @override 87 | void dispose() { 88 | _controller.dispose(); 89 | super.dispose(); 90 | } 91 | } 92 | 93 | class FlexContainer extends StatelessWidget { 94 | final color; 95 | final double padding; 96 | 97 | const FlexContainer({Key key, this.color, this.padding}) : super(key: key); 98 | 99 | @override 100 | Widget build(BuildContext context) { 101 | return Flexible( 102 | child: Padding( 103 | padding: EdgeInsets.all(padding), 104 | child: Container( 105 | color: color, 106 | ), 107 | ), 108 | ); 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /lib/screens/reorderable_listiew.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/foundation.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:flutter/rendering.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | import '../Code.dart'; 8 | import '../CodeScreen.dart'; 9 | 10 | class ReorderableListViewWidget extends StatefulWidget { 11 | @override 12 | _ReorderableListViewWidgetState createState() => 13 | _ReorderableListViewWidgetState(); 14 | } 15 | 16 | class _ReorderableListViewWidgetState extends State { 17 | final List _items = [ 18 | 'A', 19 | 'B', 20 | 'C', 21 | 'D', 22 | 'E', 23 | 'F', 24 | 'G', 25 | 'H', 26 | 'I', 27 | 'J', 28 | 'K', 29 | 'L', 30 | 'M', 31 | 'N', 32 | ]; 33 | 34 | @override 35 | void initState() { 36 | //Hide banner ad if it isn't already hidden 37 | Ads.hideBannerAd(); 38 | super.initState(); 39 | } 40 | 41 | @override 42 | Widget build(BuildContext context) { 43 | return Scaffold( 44 | appBar: AppBar( 45 | centerTitle: true, 46 | title: Text( 47 | 'ReorderableListView Widget', 48 | style: TextStyle( 49 | fontSize: 20.0, 50 | fontWeight: FontWeight.bold, 51 | fontFamily: Utils.ubuntuRegularFont), 52 | ), 53 | actions: [ 54 | IconButton( 55 | icon: Icon(Icons.code), 56 | onPressed: () => Navigator.push( 57 | context, 58 | MaterialPageRoute( 59 | builder: (context) => 60 | CodeScreen(code: Code.reorderableListviewCode), 61 | ), 62 | ), 63 | ) 64 | ], 65 | ), 66 | body: ReorderableListView( 67 | children: [ 68 | for (final item in _items) 69 | Container( 70 | width: double.infinity, 71 | height: 100.0, 72 | 73 | /// Unique key for each item so that reorderable list can 74 | /// identify them 75 | key: ValueKey(item), 76 | decoration: BoxDecoration( 77 | border: Border( 78 | top: BorderSide( 79 | color: Theme.of(context).dividerColor, 80 | width: 0.5, 81 | ), 82 | bottom: BorderSide( 83 | color: Theme.of(context).dividerColor, 84 | width: 0.5, 85 | ), 86 | ), 87 | ), 88 | child: Center( 89 | child: ListTile( 90 | title: Text("Item $item"), 91 | leading: Icon( 92 | Icons.drag_handle, 93 | color: Colors.grey[400], 94 | ), 95 | ), 96 | ), 97 | ) 98 | ], 99 | header: Padding( 100 | padding: const EdgeInsets.only( 101 | top: 16.0, bottom: 24.0, left: 16.0, right: 16.0), 102 | child: Text( 103 | "This is an optional header. Long press and drag any item" 104 | " below to move it", 105 | textAlign: TextAlign.center, 106 | ), 107 | ), 108 | onReorder: (oldIndex, newIndex) { 109 | setState( 110 | () { 111 | if (newIndex > oldIndex) { 112 | newIndex -= 1; 113 | } 114 | final item = _items.removeAt(oldIndex); 115 | _items.insert(newIndex, item); 116 | }, 117 | ); 118 | }, 119 | ), 120 | ); 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /lib/screens/safe_area.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import '../Ads.dart'; 4 | 5 | class SafeAreaWidget extends StatefulWidget { 6 | @override 7 | _SafeAreaWidgetState createState() => _SafeAreaWidgetState(); 8 | } 9 | 10 | class _SafeAreaWidgetState extends State { 11 | ///Bool value to control the behaviour of SafeArea widget. 12 | bool _isEnabled = true; 13 | 14 | @override 15 | void initState() { 16 | //Hide banner ad if it isn't already hidden 17 | Ads.hideBannerAd(); 18 | super.initState(); 19 | } 20 | 21 | @override 22 | Widget build(BuildContext context) { 23 | return Scaffold( 24 | body: SafeArea( 25 | top: _isEnabled, 26 | bottom: _isEnabled, 27 | child: Column( 28 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 29 | mainAxisSize: MainAxisSize.max, 30 | children: [ 31 | Container( 32 | width: MediaQuery.of(context).size.width, 33 | color: Colors.blue, 34 | child: Text( 35 | "This widget is below safe area. If you remove the SafeArea " 36 | "widget then this text will be behind the notch.", 37 | textAlign: TextAlign.center, 38 | style: TextStyle(color: Colors.white), 39 | ), 40 | ), 41 | 42 | ///Press this button to toggle the value of _isEnabled variable 43 | RaisedButton( 44 | textColor: Colors.white, 45 | color: Colors.indigo, 46 | onPressed: () => setState(() { 47 | _isEnabled == true ? _isEnabled = false : _isEnabled = true; 48 | }), 49 | child: Text(_isEnabled ? "Disable SafeArea" : "Enable SafeArea"), 50 | ), 51 | 52 | Container( 53 | width: MediaQuery.of(context).size.width, 54 | color: Colors.blue, 55 | child: Text( 56 | "This widget is above safe area", 57 | textAlign: TextAlign.center, 58 | style: TextStyle(color: Colors.white), 59 | ), 60 | ), 61 | ], 62 | ), 63 | ), 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /lib/screens/selectable_text.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/rendering.dart'; 3 | import 'package:flutter_widget_guide/utils.dart'; 4 | 5 | import '../Ads.dart'; 6 | import '../Code.dart'; 7 | import '../CodeScreen.dart'; 8 | 9 | class SelectableTextWidget extends StatefulWidget { 10 | @override 11 | _SelectableTextWidgetState createState() => _SelectableTextWidgetState(); 12 | } 13 | 14 | class _SelectableTextWidgetState extends State { 15 | Color bgColor = Colors.blue; 16 | 17 | @override 18 | void initState() { 19 | //Hide banner ad if it isn't already hidden 20 | Ads.hideBannerAd(); 21 | super.initState(); 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return Scaffold( 27 | appBar: AppBar( 28 | centerTitle: true, 29 | title: Text( 30 | 'SelectableText Widget', 31 | style: TextStyle( 32 | fontSize: 20.0, 33 | fontWeight: FontWeight.bold, 34 | fontFamily: Utils.ubuntuRegularFont), 35 | ), 36 | actions: [ 37 | IconButton( 38 | icon: Icon(Icons.code), 39 | onPressed: () => Navigator.push( 40 | context, 41 | MaterialPageRoute( 42 | builder: (context) => CodeScreen(code: Code.selectableTextCode), 43 | ), 44 | ), 45 | ) 46 | ], 47 | ), 48 | body: Center( 49 | child: Column( 50 | crossAxisAlignment: CrossAxisAlignment.center, 51 | mainAxisAlignment: MainAxisAlignment.center, 52 | children: [ 53 | Container( 54 | margin: EdgeInsets.only(left: 24.0, right: 24.0, top: 24.0), 55 | child: FlutterLogo( 56 | size: 100, 57 | colors: bgColor, 58 | ), 59 | ), 60 | 61 | /// Selectable text 62 | Container( 63 | margin: EdgeInsets.all(24.0), 64 | child: SelectableText( 65 | "Long press to select this text.\nYou can tap the text to change the color of Flutter Logo above.", 66 | style: TextStyle( 67 | fontSize: 14.0, 68 | fontFamily: Utils.ubuntuRegularFont, 69 | ), 70 | textAlign: TextAlign.center, 71 | onTap: () => setState(() { 72 | bgColor = bgColor == Colors.blue ? Colors.amber : Colors.blue; 73 | }), 74 | ), 75 | ), 76 | 77 | /// A text field to let user paste the copied text 78 | Container( 79 | decoration: BoxDecoration( 80 | color: Colors.blue[300], 81 | borderRadius: BorderRadius.all(Radius.circular(32)), 82 | ), 83 | margin: EdgeInsets.only(left: 24.0, right: 24.0), 84 | child: TextField( 85 | style: TextStyle(color: Colors.amber), 86 | decoration: InputDecoration( 87 | hintStyle: TextStyle(fontSize: 14, color: Colors.grey[100]), 88 | hintText: 'Copy the text above and paste it here.', 89 | prefixIcon: Icon( 90 | Icons.content_paste, 91 | color: Colors.white, 92 | ), 93 | border: InputBorder.none, 94 | contentPadding: EdgeInsets.all(20), 95 | ), 96 | cursorColor: Colors.amber, 97 | ), 98 | ), 99 | ], 100 | ), 101 | ), 102 | ); 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /lib/screens/semantics_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class SemanticsWidget extends StatefulWidget { 9 | @override 10 | _SemanticsWidgetState createState() => _SemanticsWidgetState(); 11 | } 12 | 13 | class _SemanticsWidgetState extends State { 14 | 15 | @override 16 | void initState() { 17 | //Hide banner ad if it isn't already hidden 18 | Ads.hideBannerAd(); 19 | super.initState(); 20 | } 21 | 22 | @override 23 | Widget build(BuildContext context) { 24 | return Scaffold( 25 | appBar: AppBar( 26 | centerTitle: true, 27 | title: Text( 28 | 'Semantics Widget', 29 | style: TextStyle( 30 | fontSize: 20.0, 31 | fontWeight: FontWeight.bold, 32 | fontFamily: Utils.ubuntuRegularFont), 33 | ), 34 | actions: [ 35 | IconButton( 36 | icon: Icon(Icons.code), 37 | onPressed: () => Navigator.push( 38 | context, 39 | MaterialPageRoute( 40 | builder: (context) => CodeScreen(code: Code.semanticsCode), 41 | ), 42 | ), 43 | ) 44 | ], 45 | ), 46 | body: Column( 47 | mainAxisSize: MainAxisSize.min, 48 | children: [ 49 | Center( 50 | child: Stack( 51 | children: [ 52 | Container( 53 | width: 300, 54 | height: 300, 55 | color: Colors.amber, 56 | ), 57 | Semantics( 58 | child: FlutterLogo( 59 | size: 250, 60 | ), 61 | label: "Flutter Logo", 62 | enabled: true, 63 | ), 64 | ], 65 | ), 66 | ), 67 | Padding( 68 | padding: const EdgeInsets.all(14.0), 69 | child: Text( 70 | "If you enable Talkback feature from your devices Accessibility settings" 71 | "and click on the Flutter Logo, the device will announce whatever you have" 72 | "written on the label tag in Semantics widget", 73 | style: TextStyle( 74 | fontFamily: Utils.ubuntuRegularFont, fontSize: 16.0), 75 | textAlign: TextAlign.center, 76 | ), 77 | ) 78 | ], 79 | ), 80 | ); 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /lib/screens/shadermask_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/Code.dart'; 3 | import 'package:flutter_widget_guide/CodeScreen.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | 8 | class ShaderMaskWidget extends StatefulWidget { 9 | @override 10 | _ShaderMaskWidgetState createState() => _ShaderMaskWidgetState(); 11 | } 12 | 13 | class _ShaderMaskWidgetState extends State { 14 | 15 | Map color = 16 | { 17 | 50:Color.fromRGBO(255,255,255, .1), 18 | 100:Color.fromRGBO(255,255,255, .2), 19 | 200:Color.fromRGBO(255,255,255, .3), 20 | 300:Color.fromRGBO(255,255,255, .4), 21 | 400:Color.fromRGBO(255,255,255, .5), 22 | 500:Color.fromRGBO(255,255,255, .6), 23 | 600:Color.fromRGBO(255,255,255, .7), 24 | 700:Color.fromRGBO(255,255,255, .8), 25 | 800:Color.fromRGBO(255,255,255, .9), 26 | 900:Color.fromRGBO(255,255,255, 1), 27 | }; 28 | 29 | @override 30 | void initState() { 31 | //Hide banner ad if it isn't already hidden 32 | Ads.hideBannerAd(); 33 | super.initState(); 34 | } 35 | 36 | @override 37 | Widget build(BuildContext context) { 38 | return Scaffold( 39 | appBar: AppBar( 40 | centerTitle: true, 41 | title: Text( 42 | 'ShaderMask Widget', 43 | style: TextStyle( 44 | fontSize: 20.0, 45 | fontWeight: FontWeight.bold, 46 | fontFamily: Utils.ubuntuRegularFont), 47 | ), 48 | actions: [ 49 | IconButton( 50 | icon: Icon(Icons.code), 51 | onPressed: () => Navigator.push( 52 | context, 53 | MaterialPageRoute( 54 | builder: (context) => 55 | CodeScreen(code: Code.shaderMaskWidgetCode), 56 | ), 57 | ), 58 | ) 59 | ], 60 | ), 61 | body: Column( 62 | mainAxisSize: MainAxisSize.max, 63 | mainAxisAlignment: MainAxisAlignment.center, 64 | children: [ 65 | Center( 66 | child: ShaderMask( 67 | shaderCallback: (bounds) => RadialGradient( 68 | center: Alignment.topLeft, 69 | radius: 1.0, 70 | colors: [Colors.yellow, Colors.deepOrange.shade900], 71 | tileMode: TileMode.mirror, 72 | ).createShader(bounds), 73 | ///Specified white here to get the ShaderMask effect 74 | child: const Text( 75 | 'Flutter is hot!!', 76 | style: TextStyle(color: Colors.white, fontSize: 24), 77 | ), 78 | ), 79 | ), 80 | Padding( 81 | padding: const EdgeInsets.all(16.0), 82 | child: Center( 83 | child: ShaderMask( 84 | shaderCallback: (bounds) => RadialGradient( 85 | center: Alignment.topLeft, 86 | radius: 1.0, 87 | colors: [Colors.yellow, Colors.deepOrange.shade900], 88 | tileMode: TileMode.mirror, 89 | ).createShader(bounds), 90 | ///Specified white here to get the ShaderMask effect 91 | child: FlutterLogo( 92 | colors: MaterialColor(0xffffffff, color), 93 | size: 150.0, 94 | ), 95 | ), 96 | ), 97 | ), 98 | ], 99 | ), 100 | ); 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /lib/screens/sliver_app_bar.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Code.dart'; 5 | import '../CodeScreen.dart'; 6 | 7 | class SliverAppBarWidget extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return Scaffold( 11 | ///Scroll view for Sliver app bar for giving custom scroll behaviour 12 | body: CustomScrollView( 13 | slivers: [ 14 | ///First sliver is the App Bar 15 | SliverAppBar( 16 | ///Properties of app bar 17 | /// 18 | /// Color of app bar when it is collapsed 19 | backgroundColor: Theme.of(context).primaryColor, 20 | 21 | /// Set to false so that appbar is always invisible after 22 | /// collapsing 23 | /// If set to true here, the app bar will expand as soon as you 24 | /// start scrolling up even if you haven't reached the top 25 | floating: false, 26 | 27 | /// To make the app bar visible at all times after collapsing 28 | /// we set pinned to true 29 | pinned: true, 30 | expandedHeight: 200.0, 31 | 32 | ///Properties of the App Bar when it is expanded 33 | flexibleSpace: FlexibleSpaceBar( 34 | centerTitle: true, 35 | title: Text( 36 | "SliverAppBar Widget", 37 | style: TextStyle( 38 | color: Theme.of(context).backgroundColor, 39 | fontSize: 20.0, 40 | fontWeight: FontWeight.bold, 41 | fontFamily: Utils.ubuntuRegularFont), 42 | ), 43 | background: Container( 44 | color: Colors.lightBlue, 45 | ), 46 | ), 47 | actions: [ 48 | IconButton( 49 | icon: Icon(Icons.code), 50 | onPressed: () => Navigator.push( 51 | context, 52 | MaterialPageRoute( 53 | builder: (context) => 54 | CodeScreen(code: Code.sliverAppBarCode), 55 | ), 56 | ), 57 | ) 58 | ], 59 | ), 60 | 61 | ///Next sliver is the Sliver list that is used here to 62 | ///allow the user to scroll and observe the collapsing 63 | ///behaviour of SliverAppBar widget 64 | SliverFixedExtentList( 65 | itemExtent: 100.0, 66 | delegate: SliverChildListDelegate( 67 | [ 68 | listItem("List item 1", context), 69 | listItem("List item 2", context), 70 | listItem("List item 3", context), 71 | listItem("List item 4", context), 72 | listItem("List item 5", context), 73 | listItem("List item 6", context), 74 | listItem("List item 7", context), 75 | listItem("List item 8", context), 76 | listItem("List item 9", context), 77 | listItem("List item 10", context), 78 | ], 79 | ), 80 | ), 81 | ], 82 | ), 83 | ); 84 | } 85 | 86 | Widget listItem(String title, BuildContext context) => Container( 87 | decoration: BoxDecoration( 88 | border: Border( 89 | top: BorderSide( 90 | color: Theme.of(context).backgroundColor, 91 | width: 1.0, 92 | ), 93 | ), 94 | ), 95 | child: Center( 96 | child: Text( 97 | "$title", 98 | textAlign: TextAlign.center, 99 | style: TextStyle( 100 | color: Theme.of(context).backgroundColor, 101 | fontSize: 14.0, 102 | fontWeight: FontWeight.bold, 103 | fontFamily: Utils.ubuntuRegularFont), 104 | ), 105 | ), 106 | ); 107 | } 108 | -------------------------------------------------------------------------------- /lib/screens/sliver_grid.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Code.dart'; 5 | import '../CodeScreen.dart'; 6 | 7 | class SliverGridWidget extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return Scaffold( 11 | body: CustomScrollView( 12 | slivers: [ 13 | ///First sliver is the App Bar 14 | SliverAppBar( 15 | ///Properties of app bar 16 | backgroundColor: Theme.of(context).primaryColor, 17 | floating: false, 18 | pinned: true, 19 | expandedHeight: 200.0, 20 | 21 | ///Properties of the App Bar when it is expanded 22 | flexibleSpace: FlexibleSpaceBar( 23 | centerTitle: true, 24 | title: Text( 25 | "SliverGrid Widget", 26 | style: TextStyle( 27 | color: Theme.of(context).backgroundColor, 28 | fontSize: 20.0, 29 | fontWeight: FontWeight.bold, 30 | fontFamily: Utils.ubuntuRegularFont), 31 | ), 32 | background: Container( 33 | decoration: BoxDecoration( 34 | border: Border( 35 | top: BorderSide( 36 | color: Colors.black26, 37 | width: 1.0, 38 | ), 39 | ), 40 | ), 41 | ), 42 | ), 43 | actions: [ 44 | IconButton( 45 | icon: Icon(Icons.code), 46 | onPressed: () => Navigator.push( 47 | context, 48 | MaterialPageRoute( 49 | builder: (context) => CodeScreen(code: Code.sliverGridCode), 50 | ), 51 | ), 52 | ) 53 | ], 54 | ), 55 | SliverGrid( 56 | gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 57 | ///no.of items in the horizontal axis 58 | crossAxisCount: 4, 59 | ), 60 | 61 | ///Lazy building of list 62 | delegate: SliverChildBuilderDelegate( 63 | (BuildContext context, int index) { 64 | /// To convert this infinite list to a list with "n" no of items, 65 | /// uncomment the following line: 66 | /// if (index > n) return null; 67 | return listItem( 68 | Utils.getRandomColor(), "Sliver Grid item:\n$index"); 69 | }, 70 | 71 | /// Set childCount to limit no.of items 72 | /// childCount: 100, 73 | ), 74 | ) 75 | ], 76 | ), 77 | ); 78 | } 79 | 80 | Widget listItem(Color color, String title) => Container( 81 | height: 100.0, 82 | color: color, 83 | child: Center( 84 | child: Text( 85 | "$title", 86 | textAlign: TextAlign.center, 87 | style: TextStyle( 88 | color: Colors.white, 89 | fontSize: 10.0, 90 | fontWeight: FontWeight.bold, 91 | fontFamily: Utils.ubuntuRegularFont), 92 | ), 93 | ), 94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /lib/screens/sliver_list.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Code.dart'; 5 | import '../CodeScreen.dart'; 6 | 7 | class SliverListWidget extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return Scaffold( 11 | body: CustomScrollView( 12 | slivers: [ 13 | ///First sliver is the App Bar 14 | SliverAppBar( 15 | ///Properties of app bar 16 | backgroundColor: Theme.of(context).primaryColor, 17 | floating: false, 18 | pinned: true, 19 | expandedHeight: 200.0, 20 | 21 | ///Properties of the App Bar when it is expanded 22 | flexibleSpace: FlexibleSpaceBar( 23 | centerTitle: true, 24 | title: Text( 25 | "SliverList Widget", 26 | style: TextStyle( 27 | color: Theme.of(context).backgroundColor, 28 | fontSize: 20.0, 29 | fontWeight: FontWeight.bold, 30 | fontFamily: Utils.ubuntuRegularFont), 31 | ), 32 | background: Container( 33 | decoration: BoxDecoration( 34 | border: Border( 35 | top: BorderSide( 36 | color: Colors.black26, 37 | width: 1.0, 38 | ), 39 | ), 40 | ), 41 | ), 42 | ), 43 | actions: [ 44 | IconButton( 45 | icon: Icon(Icons.code), 46 | onPressed: () => Navigator.push( 47 | context, 48 | MaterialPageRoute( 49 | builder: (context) => CodeScreen(code: Code.sliverListCode), 50 | ), 51 | ), 52 | ) 53 | ], 54 | ), 55 | SliverList( 56 | ///Use SliverChildListDelegate and provide a list 57 | ///of widgets if the count is limited 58 | /// 59 | ///Lazy building of list 60 | delegate: SliverChildBuilderDelegate( 61 | (BuildContext context, int index) { 62 | /// To convert this infinite list to a list with "n" no of items, 63 | /// uncomment the following line: 64 | /// if (index > n) return null; 65 | return listItem( 66 | Utils.getRandomColor(), "Sliver List item: $index"); 67 | }, 68 | 69 | /// Set childCount to limit no.of items 70 | /// childCount: 100, 71 | ), 72 | ) 73 | ], 74 | ), 75 | ); 76 | } 77 | 78 | Widget listItem(Color color, String title) => Container( 79 | height: 100.0, 80 | color: color, 81 | child: Center( 82 | child: Text( 83 | "$title", 84 | textAlign: TextAlign.center, 85 | style: TextStyle( 86 | color: Colors.white, 87 | fontSize: 14.0, 88 | fontWeight: FontWeight.bold, 89 | fontFamily: Utils.ubuntuRegularFont), 90 | ), 91 | ), 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /lib/screens/snackbar_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/Code.dart'; 3 | import 'package:flutter_widget_guide/CodeScreen.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | 8 | class SnackBarWidget extends StatefulWidget { 9 | @override 10 | _SnackBarWidgetState createState() => _SnackBarWidgetState(); 11 | } 12 | 13 | class _SnackBarWidgetState extends State { 14 | GlobalKey _scaffoldKey = new GlobalKey(); 15 | 16 | @override 17 | void initState() { 18 | //Hide banner ad if it isn't already hidden 19 | Ads.hideBannerAd(); 20 | super.initState(); 21 | } 22 | 23 | @override 24 | Widget build(BuildContext context) { 25 | return Scaffold( 26 | key: _scaffoldKey, 27 | appBar: AppBar( 28 | centerTitle: true, 29 | title: Text( 30 | 'SnackBar Widget', 31 | style: TextStyle( 32 | fontSize: 20.0, 33 | fontWeight: FontWeight.bold, 34 | fontFamily: Utils.ubuntuRegularFont), 35 | ), 36 | actions: [ 37 | IconButton( 38 | icon: Icon(Icons.code), 39 | onPressed: () => Navigator.push( 40 | context, 41 | MaterialPageRoute( 42 | builder: (context) => CodeScreen(code: Code.snackBarWidgetCode), 43 | ), 44 | ), 45 | ) 46 | ], 47 | ), 48 | body: Center( 49 | child: Column( 50 | mainAxisAlignment: MainAxisAlignment.center, 51 | mainAxisSize: MainAxisSize.max, 52 | children: [ 53 | Padding( 54 | padding: const EdgeInsets.all(8.0), 55 | child: RaisedButton( 56 | child: Text('Show simple SnackBar'), 57 | color: Theme.of(context).backgroundColor, 58 | textColor: Theme.of(context).accentColor, 59 | onPressed: () => _scaffoldKey.currentState.showSnackBar( 60 | SnackBar( 61 | duration: Duration(milliseconds: 500), 62 | content: Text("Simple SnackBar"), 63 | ), 64 | ), 65 | ), 66 | ), 67 | Padding( 68 | padding: const EdgeInsets.all(8.0), 69 | child: RaisedButton( 70 | child: Text('Show elevated SnackBar'), 71 | color: Theme.of(context).backgroundColor, 72 | textColor: Theme.of(context).accentColor, 73 | onPressed: () => _scaffoldKey.currentState.showSnackBar( 74 | SnackBar( 75 | duration: Duration(milliseconds: 500), 76 | elevation: 6.0, 77 | behavior: SnackBarBehavior.floating, 78 | content: Text("Elevated SnackBar"), 79 | ), 80 | ), 81 | ), 82 | ), 83 | Padding( 84 | padding: const EdgeInsets.all(8.0), 85 | child: RaisedButton( 86 | child: Text('Show custom layout SnackBar'), 87 | color: Theme.of(context).backgroundColor, 88 | textColor: Theme.of(context).accentColor, 89 | onPressed: () => _scaffoldKey.currentState.showSnackBar( 90 | SnackBar( 91 | duration: Duration(milliseconds: 500), 92 | elevation: 6.0, 93 | behavior: SnackBarBehavior.floating, 94 | content: Row( 95 | children: [ 96 | Icon(Icons.thumb_up), 97 | SizedBox(width: 20.0), 98 | Expanded( 99 | child: Text("Hello!"), 100 | ) 101 | ], 102 | ), 103 | ), 104 | ), 105 | ), 106 | ), 107 | ], 108 | ), 109 | ), 110 | ); 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /lib/screens/tabs_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/Code.dart'; 3 | import 'package:flutter_widget_guide/CodeScreen.dart'; 4 | import 'package:flutter_widget_guide/utils.dart'; 5 | 6 | import '../Ads.dart'; 7 | 8 | class TabsWidget extends StatefulWidget { 9 | @override 10 | _TabsWidgetState createState() => _TabsWidgetState(); 11 | } 12 | 13 | class _TabsWidgetState extends State { 14 | final List myTabs = [ 15 | Tab(text: "Tab 1", icon: Icon(Icons.looks_one)), 16 | Tab(text: "Tab 2", icon: Icon(Icons.looks_two)), 17 | ]; 18 | 19 | @override 20 | void initState() { 21 | Ads.hideBannerAd(); 22 | super.initState(); 23 | } 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | //Wrap everything in DefaultTabController 28 | return DefaultTabController( 29 | length: 2, 30 | child: Scaffold( 31 | appBar: AppBar( 32 | centerTitle: true, 33 | title: Text( 34 | 'Tabs Widget', 35 | style: TextStyle( 36 | fontSize: 20.0, 37 | fontWeight: FontWeight.bold, 38 | fontFamily: Utils.ubuntuRegularFont), 39 | ), 40 | actions: [ 41 | IconButton( 42 | icon: Icon(Icons.code), 43 | onPressed: () => Navigator.push( 44 | context, 45 | MaterialPageRoute( 46 | builder: (context) => 47 | CodeScreen(code: Code.tabsWidgetCode))), 48 | ) 49 | ], 50 | //Specify the tabs for your view 51 | bottom: TabBar( 52 | tabs: myTabs, 53 | indicatorColor: Theme.of(context).backgroundColor, 54 | ), 55 | ), 56 | //Provide each tab with its own content 57 | body: TabBarView( 58 | children: myTabs.map((Tab tab) { 59 | return Center( 60 | child: Text( 61 | 'This is the ${tab.text}', 62 | style: const TextStyle(fontSize: 16), 63 | ), 64 | ); 65 | }).toList(), 66 | ), 67 | ), 68 | ); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /lib/screens/tween_animation_builder.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class TweenAnimationBuilderWidget extends StatefulWidget { 9 | @override 10 | _TweenAnimationBuilderWidgetState createState() => 11 | _TweenAnimationBuilderWidgetState(); 12 | } 13 | 14 | class _TweenAnimationBuilderWidgetState 15 | extends State { 16 | GlobalKey _scaffoldKey = GlobalKey(); 17 | 18 | @override 19 | void initState() { 20 | //Hide banner ad if it isn't already hidden 21 | Ads.hideBannerAd(); 22 | super.initState(); 23 | } 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return Scaffold( 28 | key: _scaffoldKey, 29 | appBar: AppBar( 30 | centerTitle: true, 31 | title: Text( 32 | 'TweenAnimationBuilder Widget', 33 | style: TextStyle( 34 | fontSize: 20.0, 35 | fontWeight: FontWeight.bold, 36 | fontFamily: Utils.ubuntuRegularFont), 37 | ), 38 | actions: [ 39 | IconButton( 40 | icon: Icon(Icons.code), 41 | onPressed: () => Navigator.push( 42 | context, 43 | MaterialPageRoute( 44 | builder: (context) => CodeScreen(code: Code.tweenAnimationBuilderWidgetCode), 45 | ), 46 | ), 47 | ) 48 | ], 49 | ), 50 | body: Center( 51 | child: TweenAnimationBuilder( 52 | duration: const Duration(seconds: 3), 53 | 54 | ///Values for the Animation 55 | ///Type of tween (here: Color) should match the second parameter 56 | ///of the builder and the Class type parameter(if specified) 57 | tween: ColorTween(begin: Colors.yellow, end: Colors.purple), 58 | 59 | /// Added child here as a performance optimization. Just so that 60 | /// flutter does not build the entire widget tree during the animation 61 | child: FlutterLogo( 62 | size: 200, 63 | colors: Colors.yellow, 64 | ), 65 | builder: (BuildContext _, Color value, Widget child) { 66 | return ColorFiltered( 67 | child: child, 68 | colorFilter: ColorFilter.mode(value, BlendMode.modulate), 69 | ); 70 | }, 71 | onEnd: () => _scaffoldKey.currentState.showSnackBar( 72 | SnackBar( 73 | content: Text("Done with the Animation"), 74 | duration: Duration(milliseconds: 3000), 75 | ), 76 | ), 77 | ), 78 | ), 79 | ); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /lib/screens/value_listenable_builder.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter_widget_guide/utils.dart'; 3 | 4 | import '../Ads.dart'; 5 | import '../Code.dart'; 6 | import '../CodeScreen.dart'; 7 | 8 | class ValueListenableBuilderWidget extends StatefulWidget { 9 | @override 10 | _ValueListenableBuilderWidgetState createState() => 11 | _ValueListenableBuilderWidgetState(); 12 | } 13 | 14 | class _ValueListenableBuilderWidgetState 15 | extends State { 16 | /// This is the value you want your widgets to listen to. 17 | final ValueNotifier _counter = ValueNotifier(2); 18 | 19 | @override 20 | void initState() { 21 | //Hide banner ad if it isn't already hidden 22 | Ads.hideBannerAd(); 23 | super.initState(); 24 | } 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | return Scaffold( 29 | appBar: AppBar( 30 | centerTitle: true, 31 | title: Text( 32 | 'ValueListenableBuilder Widget', 33 | style: TextStyle( 34 | fontSize: 20.0, 35 | fontWeight: FontWeight.bold, 36 | fontFamily: Utils.ubuntuRegularFont), 37 | ), 38 | actions: [ 39 | IconButton( 40 | icon: Icon(Icons.code), 41 | onPressed: () => Navigator.push( 42 | context, 43 | MaterialPageRoute( 44 | builder: (context) => 45 | CodeScreen(code: Code.valueListenableBuilderCode), 46 | ), 47 | ), 48 | ) 49 | ], 50 | ), 51 | body: Center( 52 | child: ValueListenableBuilder( 53 | builder: (BuildContext context, int value, Widget child) { 54 | // This builder will only get called when the _counter 55 | // is updated. 56 | return Column( 57 | mainAxisAlignment: MainAxisAlignment.center, 58 | children: [ 59 | Padding( 60 | padding: const EdgeInsets.all(12.0), 61 | child: Text( 62 | '$value', 63 | style: 64 | TextStyle(fontWeight: FontWeight.bold, fontSize: 34.0), 65 | ), 66 | ), 67 | Padding( 68 | padding: const EdgeInsets.all(8.0), 69 | child: Text( 70 | 'The number is now ', 71 | style: TextStyle( 72 | fontWeight: FontWeight.normal, fontSize: 18.0), 73 | ), 74 | ), 75 | Padding( 76 | padding: const EdgeInsets.all(8.0), 77 | child: Padding( 78 | padding: const EdgeInsets.all(8.0), 79 | child: value.remainder(2) == 0 80 | ? Text( 81 | "Even", 82 | style: TextStyle( 83 | fontWeight: FontWeight.bold, fontSize: 24.0), 84 | ) 85 | : Text( 86 | "Odd", 87 | style: TextStyle( 88 | fontWeight: FontWeight.bold, fontSize: 24.0), 89 | ), 90 | ), 91 | ), 92 | child, 93 | ], 94 | ); 95 | }, 96 | valueListenable: _counter, 97 | // The child parameter is most helpful if the child is 98 | // expensive to build and does not depend on the value from 99 | // the notifier. 100 | child: Padding( 101 | padding: const EdgeInsets.all(8.0), 102 | child: Text("I dont care about the value"), 103 | ), 104 | ), 105 | ), 106 | floatingActionButton: FloatingActionButton( 107 | child: Icon(Icons.plus_one), 108 | backgroundColor: Colors.blue, 109 | foregroundColor: Colors.white, 110 | onPressed: () => _counter.value += 1, 111 | ), 112 | ); 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /lib/settings.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:shared_preferences/shared_preferences.dart'; 3 | 4 | /// Class that contains all your app settings 5 | /// Consists only of Theme setting as of now 6 | class Settings extends ChangeNotifier { 7 | final SharedPreferences sharedPreferences; 8 | 9 | Settings(this.sharedPreferences); 10 | 11 | bool get isDarkMode => sharedPreferences?.getBool("isDarkMode") ?? false; 12 | 13 | void setDarkMode(bool val) { 14 | sharedPreferences?.setBool("isDarkMode", val); 15 | notifyListeners(); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /lib/themes.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/cupertino.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | /// Ref: https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/gallery/themes.dart 5 | 6 | final kLightTheme = _buildLightTheme(); 7 | final kDarkTheme = _buildDarkTheme(); 8 | 9 | ThemeData _buildLightTheme() { 10 | const Color primaryColor = Colors.white; 11 | const Color secondaryColor = Colors.white; 12 | final ColorScheme colorScheme = const ColorScheme.light().copyWith( 13 | primary: primaryColor, 14 | secondary: secondaryColor, 15 | ); 16 | final ThemeData base = ThemeData( 17 | accentColorBrightness: Brightness.dark, 18 | colorScheme: colorScheme, 19 | primaryColor: primaryColor, 20 | primaryColorLight: Colors.white, 21 | primaryColorDark: Colors.white, 22 | buttonColor: primaryColor, 23 | indicatorColor: Colors.white, 24 | toggleableActiveColor: const Color(0xFF1E88E5), 25 | splashColor: Colors.white24, 26 | splashFactory: InkRipple.splashFactory, 27 | accentColor: secondaryColor, 28 | canvasColor: Colors.white, 29 | dividerColor: Colors.black12, 30 | scaffoldBackgroundColor: Colors.white, 31 | errorColor: const Color(0xFFB00020), 32 | 33 | ///For Cupertino elements in Light theme 34 | cupertinoOverrideTheme: CupertinoThemeData( 35 | primaryColor: primaryColor, 36 | brightness: Brightness.light 37 | ), 38 | 39 | ///For tooltip 40 | brightness: Brightness.light, 41 | backgroundColor: Colors.black87, 42 | primaryTextTheme: TextTheme( 43 | body1: TextStyle(color: Colors.white), 44 | ), 45 | 46 | ///For slider label 47 | accentTextTheme: TextTheme( 48 | body2: TextStyle(color: Colors.white, backgroundColor: Colors.lightBlue), 49 | ), 50 | ); 51 | return base.copyWith( 52 | textTheme: base.textTheme, 53 | primaryTextTheme: base.primaryTextTheme, 54 | accentTextTheme: base.accentTextTheme, 55 | ); 56 | } 57 | 58 | ThemeData _buildDarkTheme() { 59 | const Color primaryColor = Colors.black; 60 | const Color secondaryColor = Colors.black87; 61 | final ColorScheme colorScheme = const ColorScheme.dark().copyWith( 62 | primary: primaryColor, 63 | secondary: secondaryColor, 64 | ); 65 | final ThemeData base = ThemeData( 66 | accentColorBrightness: Brightness.dark, 67 | primaryColor: primaryColor, 68 | primaryColorDark: Colors.black, 69 | primaryColorLight: secondaryColor, 70 | buttonColor: primaryColor, 71 | indicatorColor: Colors.white, 72 | dividerColor: Colors.grey, 73 | toggleableActiveColor: const Color(0xFF6997DF), 74 | accentColor: secondaryColor, 75 | canvasColor: const Color(0xFF202124), 76 | scaffoldBackgroundColor: const Color(0xFF202124), 77 | errorColor: const Color(0xFFB00020), 78 | 79 | ///For tooltip 80 | brightness: Brightness.dark, 81 | backgroundColor: Colors.white, 82 | primaryTextTheme: TextTheme( 83 | body1: TextStyle(color: Colors.white), 84 | ), 85 | 86 | ///For slider label 87 | accentTextTheme: TextTheme( 88 | body2: TextStyle(color: Colors.white, backgroundColor: Colors.lightBlue), 89 | ), 90 | 91 | cupertinoOverrideTheme: CupertinoThemeData( 92 | primaryColor: primaryColor, 93 | ), 94 | ); 95 | return base.copyWith( 96 | textTheme: base.textTheme, 97 | primaryTextTheme: base.primaryTextTheme, 98 | accentTextTheme: base.accentTextTheme, 99 | ); 100 | } 101 | -------------------------------------------------------------------------------- /medium_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/medium_icon.png -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: flutter_widget_guide 2 | description: A flutter appliction listing all the widgets covered in Flutter widget of the week playlist. 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 | # Read more about versioning at semver.org. 10 | version: 1.0.14+16 11 | 12 | dependencies: 13 | flutter: 14 | sdk: flutter 15 | 16 | # The following adds the Cupertino Icons font to your application. 17 | # Use with the CupertinoIcons class for iOS style icons. 18 | cupertino_icons: ^0.1.2 19 | flutter_svg: ^0.14.0 20 | url_launcher: ^5.1.2 21 | http: ^0.12.0+1 22 | youtube_player_flutter: ^6.1.1 23 | transparent_image: ^1.0.0 24 | package_info: ^0.4.0+6 25 | firebase_core: ^0.4.2 26 | firebase_analytics: ^5.0.9 27 | firebase_remote_config: ^0.3.0 28 | shared_preferences: ^0.5.3+4 29 | firebase_messaging: ^6.0.9 30 | firebase_admob: ^0.9.3+2 31 | provider: ^4.0.1 32 | 33 | dev_dependencies: 34 | flutter_test: 35 | sdk: flutter 36 | 37 | # For information on the generic Dart part of this file, see the 38 | # following page: https://www.dartlang.org/tools/pub/pubspec 39 | 40 | # The following section is specific to Flutter. 41 | flutter: 42 | 43 | # The following line ensures that the Material Icons font is 44 | # included with your application, so that you can use the icons in 45 | # the material Icons class. 46 | uses-material-design: true 47 | 48 | assets: 49 | - assets/images/expanded_info.svg 50 | - assets/images/medium_icon.svg 51 | - assets/images/dp.png 52 | - assets/images/github.png 53 | - assets/images/linkedin.png 54 | - assets/images/twitter.png 55 | - assets/images/slack_icon.svg 56 | 57 | fonts: 58 | - family: Ubuntu 59 | fonts: 60 | - asset: assets/fonts/Ubuntu-Regular.ttf 61 | - family: Crimson 62 | fonts: 63 | - asset: assets/fonts/CrimsonText-Regular.ttf 64 | 65 | -------------------------------------------------------------------------------- /screen_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/screen_2.png -------------------------------------------------------------------------------- /screen_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/screen_3.png -------------------------------------------------------------------------------- /screen_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/screen_4.png -------------------------------------------------------------------------------- /slack_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/annshsingh/FlutterWidgetGuide/d9c3bde38269d239b0e79e8638eaa2ed345ebb1e/slack_logo.png -------------------------------------------------------------------------------- /test/widget_test.dart: -------------------------------------------------------------------------------- 1 | // This is a basic Flutter widget test. 2 | // To perform an interaction with a widget in your test, use the WidgetTester utility that Flutter 3 | // provides. For example, you can send tap and scroll gestures. You can also use WidgetTester to 4 | // find child widgets in the widget tree, read text, and verify that the values of widget properties 5 | // are correct. 6 | 7 | import 'package:flutter/material.dart'; 8 | import 'package:flutter_test/flutter_test.dart'; 9 | 10 | import 'package:flutter_widget_guide/myapp.dart'; 11 | 12 | void main() { 13 | testWidgets('Counter increments smoke test', (WidgetTester tester) async { 14 | // Build our app and trigger a frame. 15 | await tester.pumpWidget(new MyApp()); 16 | 17 | // Verify that our counter starts at 0. 18 | expect(find.text('0'), findsOneWidget); 19 | expect(find.text('1'), findsNothing); 20 | 21 | // Tap the '+' icon and trigger a frame. 22 | await tester.tap(find.byIcon(Icons.add)); 23 | await tester.pump(); 24 | 25 | // Verify that our counter has incremented. 26 | expect(find.text('0'), findsNothing); 27 | expect(find.text('1'), findsOneWidget); 28 | }); 29 | } 30 | --------------------------------------------------------------------------------