Home

Awesome

Flutter Samples

You can follow me on twitter @diegoveloper

<a href='https://www.buymeacoffee.com/diegoveloper' target="_blank" rel="noopener noreferrer"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png"/></a>

Getting Started

To build and run this project:

  1. Get Flutter here if you don't already have it
  2. Clone this repository.
  3. cd into the repo folder.
  4. run flutter run-android or flutter run-ios to build the app.

(Please note that a Mac with XCode is required to build for iOS)

<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Logo_of_YouTube_%282015-2017%29.svg/502px-Logo_of_YouTube_%282015-2017%29.svg.png' width="250">

IMAGE ALT TEXT

FLUTTER SAMPLES

Hello FlutterSplash screen in Flutter
<img src="https://cdn-images-1.medium.com/max/1600/1*Px0kTaFj9fnY2VJdrWGJgA.gif" width="250"><img src="https://cdn-images-1.medium.com/max/1600/1*GfM4eb_y_rM6BaAgDYBWZA.gif" width="250">
Fetching & Parsing JSON dataPersistent Tab bars
<img src="https://cdn-images-1.medium.com/max/1600/1*KJKHYTFubWr2vamVczhQ_Q.gif" width="250"><img src="https://cdn-images-1.medium.com/max/1600/1*s0gi3k5upbW-o88cgW61gg.gif">
Collapsing Toolbar - Sliver App BarShared Element Transitions — Hero
<img src="https://cdn-images-1.medium.com/max/1600/1*xtROWw7cWRrK5b7tPbw2mg.gif" width="250"><img src="https://cdn-images-1.medium.com/max/1600/1*IeAD2e0hM_QThzry3v1FMw.gif" width="250">
ScrollController and ScrollNotificationApp Clone - Android Messages
<img src="https://cdn-images-1.medium.com/max/1600/1*_QUSvcpBYYX8v_SiXWpeRA.gif" width="250"><img src="https://cdn-images-1.medium.com/max/1600/1*Rb2ATV7nL0lO5K2VcF1NVw.gif" width="250">
Communication between widgetsAnimations / Foldable Page
<img src="https://cdn-images-1.medium.com/max/1600/1*kIZJa1_i0OcsqymMxk04zA.gif" width="250"><center> <img src="https://media.giphy.com/media/e5Xc8eQQCwyF5AoG7U/giphy.gif" width="250"> </center>
Animations / List-DetailAnimations / Circular List/
<center> <img src="https://media.giphy.com/media/YrquS6qE7hXmAD82Bf/giphy.gif" width="250"> </center><center> <img src="https://media.giphy.com/media/iNwDIyUWQ9tDo10tJ6/giphy.gif" width="250"> </center>
App Clone / Twitter Profile CloneCustom AppBar & SliverAppBar
<center> <img src="https://media.giphy.com/media/JH0WO8BWjl6rxwcols/giphy.gif" width="250"> </center><center> <img src="https://media.giphy.com/media/jRwXjfQDEnnMLbrVL1/giphy.gif" width="250"> </center>
Animations / Split WidgetsAnimations / Custom Sliver Header
<center> <img src="https://media.giphy.com/media/fWqRy75Zg5lEtP5qkc/giphy.gif" width="250"> </center><center> <img src="https://media.giphy.com/media/JOXClC3XFwHosWAVqX/giphy.gif" width="250"> </center>
Menu Navigations / Header NavigationAnimations / Turn on the light
<center> <img src="https://media.giphy.com/media/f5SP7mJnO4x9mK4CSv/giphy.gif" width="250"> </center><center> <img src="https://media.giphy.com/media/VgSfLeabru2qTerOrp/giphy.gif" width="250"> </center>
Animations / Hide my widgetsAnimations / Menu Exploration
<center> <img src="https://media.giphy.com/media/h4x6fHw65l3KdnDrTi/giphy.gif" width="250"> </center><center> <img src="https://media.giphy.com/media/Y07CGmYvcNyl9rkgbY/giphy.gif" width="250">
</center>
App Clone / Photo ConceptApp Clone / Movies Concept
<center> <img src="https://media.giphy.com/media/XybRawN2vj4YV3fhul/giphy.gif" width="250"> </center><center> <img src="https://media.giphy.com/media/UuNiEk20TKjn4F4H7a/giphy.gif" width="250">
</center>
App Clone / Sports StoreApp Clone / Shoes Store
<center> <img src="https://media.giphy.com/media/RJn8BMmOzfaW101iS2/giphy.gif" width="250"> </center><center> <img src="https://media.giphy.com/media/MeP49gjvFbUDShkzJM/giphy.gif" width="250">
</center>
App Clone / Album FlowApp Clone / Credit Cards Concept
<center> <img src="https://media.giphy.com/media/emGlZPMbFpkNDrFuO7/giphy.gif" width="250"/> </center><center> <img src="https://media.giphy.com/media/UrsStRAMXOT93wwyP2/giphy.gif" width="250"/> </center>
Custom AppBar & SliverAppBarApp Clone / Travel Concept Demo
<center> <img src="https://media.giphy.com/media/QuIvsrhjCr4oPS49qa/giphy.gif" width="250"/> </center><center> <img src="https://media.giphy.com/media/gF30YeWCn0Ncf0qxCS/giphy.gif" width="250"/>
Animations / Shrink Top ListAnimations / Neon Button
<center> <img src="https://media.giphy.com/media/XFproCCYQ9eDR416g1/giphy.gif" width="250"/> </center><center><img src="https://media.giphy.com/media/L1W2zwjOZAbVadQU56/giphy.gif" width="250"/> </center>