Awesome Open Source
Awesome Open Source


Flutter Widget Guide

A flutter appliction listing all the widgets covered in Flutter widget of the week playlist

Get the app

Now featured on - Have a look! 🎉

Click on the image below to download

Get it on Google Play

slack Want to Join the Slack Community? - Send me an invite


I created this project to improve my skills with dart and flutter as a development platform. I am used to developing native android apps so I'll be focusing on designing this project for android platform. This project might help you to learn about Flutter if you are a beginner in this space. My experience with flutter has been great thus far. I hope you like it too. The project is developed in Dart language. All the files are listed in the /lib folder.

GitHub stars GitHub forks GitHub watchers GitHub followers Twitter Follow

⭐️ the repo to show some ❤️ and motivate me to work on the project 😃

Widget List

  1. Safe Area | read
  2. Expanded | read
  3. Wrap | read
  4. Animated Container | read
  5. Opacity | read
  6. Future Builder | read
  7. Fade Transition | read
  8. Floating Action Button | read
  9. Page View | read
  10. Table | read
  11. Sliver App Bar | read
  12. Sliver List | read
  13. Sliver Grid | read
  14. Fade In Image | read
  15. Stream Builder | read
  16. Inherited Model | read
  17. ClipRRect
  18. Hero | read
  19. Custom Paint
  20. Tooltip
  21. Fitted Box
  22. Layout Builder
  23. Absorb Pointer
  24. Transform
  25. Back Drop Filter
  26. Align
  27. Positioned
  28. Animated Builder
  29. Dismissible
  30. SizedBox Widget
  31. Value Listnable Builder
  32. Draggable
  33. AnimatedList
  34. Flexible
  35. MediaQuery
  36. Spacer
  37. InheritedWidget (coming soon)
  38. AnimatedIcon
  39. AspectRatio
  40. LimitedBox
  41. Placeholder
  42. RichText
  43. ReorderableListView
  44. AnimatedSwitcher
  45. AnimatedPositioned
  46. AnimatedPadding
  47. Indexed Stack
  48. Semantics
  49. ConstrainedBox
  50. Stack
  51. AnimatedOpacity
  52. FractionallySizedBox
  53. ListView
  54. ListTile
  55. Container
  56. SelectableText
  57. DataTable
  58. Slider
  59. AlertDialog
  60. AnimatedCrossFade
  61. DraggableScrollableSheet
  62. ColorFiltered
  63. ToggleButtons
  64. CupertinoActionSheet
  65. TweenAnimationBuilder
  66. Image
  67. Tab View
  68. Drawer
  69. SnackBar
  70. ListWheelScrollView | read
  71. ShaderMask | read
  72. NotificationListener
  73. Builder
  74. ClipPath
  75. ProgressIndicator
  76. Divider
  77. IgnorePointer
  78. CupertinoActivityIndicator
  79. ClipOval
  80. AnimatedWidget
  81. Padding

I'll try my best to keep the list in sync with the Youtube Playlist 👍

Additional Features

  1. Flutter webview implementation
  2. Youtube Video Player
  3. Firebase RemoteConfig
  4. Firebase Cloud Messaging
  5. Firebase AdMob
  6. View Code inside the app.
  7. Copy code or part of code.
  8. Dark Mode

Things to work on in the Future

  1. Save favourite widgets in "Favourites" section - Using SQFlite/Hive.
  2. Collection based view insted of a list - Change Home Page layout.
  3. Search functionality in list - Add "Search" action on Home Page.
  4. Mark your favourite widget - Firebase cloudstore functionality.
  5. Add Firebase Analytics to track screen views.
  6. Reduce app size by 25% or more.

App Screenshots

Screen1Screen2Screen4Screen3      List of Widgets         Explore a Widget          Widget Video                                  Source Code

Building the project

Some files might be missing from the project because of security reasons, as they contain key values. These are the steps you need to follow to build the project successfully.

1. Missing Key.Properties file

Please follow the following steps:

Step 1. Go to android > app > build.gradle

Now, Comment this line keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) Next,Comment everything inside signingConfigs and buildTypes It should look something like this -

//keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

signingConfigs {
       // release {
           // keyAlias keystoreProperties['keyAlias']
           // keyPassword keystoreProperties['keyPassword']
           //storeFile file(keystoreProperties['storeFile'])
           // storePassword keystoreProperties['storePassword']
       // }

    buildTypes {
       // release {
           // TODO: Add your own signing config for the release build.
           // Signing with the debug keys for now, so `flutter run --release` works.
           // signingConfig signingConfigs.release
           // minifyEnabled false
           // shrinkResources false
           // useProguard true
           // proguardFiles getDefaultProguardFile('proguard-android.txt'), ''
       // }
Step 2. Go to android > Add following lines -

2. Missing google-services.json file

This file is used to add firebase services to the project. You might want to add your own file, or better yet, comment the code inside the project to remove the implementation. Go to home_page.dart file and comment out the code for firebase remote config to remove this error.

Learn more on Flutter

Official Flutter documentation Flutter widget list Flutter youtube channel

Created & maintained by

Annsh Singh (LinkedIn) (Play Store) (Twitter)

Open Source License

Contribution Guidelines

This project is a fully open source project, and contributions are welcome. Information on how to get started can be found at the contributor guide.


If you learned something from the source code of this project and want to thank me, you can support by buying me a cup of ☕️ or a 🍩

PayPal Google Pay ([email protected])


Copyright 2019 Annsh Singh

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
See the License for the specific language governing permissions and
limitations under the License.

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Dart (52,510
Flutter (30,282
Firebase (21,023
Builder (10,804
Playlist (6,841
Flutter Apps (2,485
Mobile Development (2,403
Flutter Examples (1,411
Dartlang (769
Flutter Widgets (432
App Development (123