# flutter-tutorials **Repository Path**: magiskyu/flutter-tutorials ## Basic Information - **Project Name**: flutter-tutorials - **Description**: The repo contains the source code for all the tutorials on the FilledStacks Youtube channel. - **Primary Language**: Dart - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-07-03 - **Last Updated**: 2021-11-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Flutter tutorials The repo contains the source code for all the written tutorials by Filledstacks. All Tutorials plus additional snippets and shorter posts can be found on the [Official FilledStacks website](https://www.filledstacks.com/). Buy Me a Coffee at ko-fi.com Please clone and star this repo to stay up to date on changes. ## Turorials **016 - Flutter Navigation using Named Routing** \[ [Written](https://www.filledstacks.com/post/flutter-navigation-cheatsheet-a-guide-to-named-routing) \] \[ [Video](https://youtu.be/YXDFlpdpp3g) \] - This tutorial guides you through everything you need to know about navigation in Flutter using named routing. **015 - Animated SplashScreen with Flare** \[ [Written](https://www.filledstacks.com/post/flutter-animated-splash-screen-with-flare) \] \[ [Video](https://youtu.be/4PgdFYcQpuc) \] - This tutorial shows how to setup your splash following up with a nice intro animation built in Flare. **014 - Flutter Provider V3 Architecture using ProxyProvider** \[ [Written](https://www.filledstacks.com/post/flutter-provider-v3-architecture) \] \[ [Video](https://youtu.be/VgrK_LlQRJ4) \] - In this tutorial we implement a previously built app using Provider only and show how an architecture with dependency injection can be setup using the ProxyProvider. **013 - Flutter Dependency Injection for Beginners** \[ [Written](https://www.filledstacks.com/post/flutter-dependency-injection-a-beginners-guide/) \] \[ [Video](https://youtu.be/vBT-FhgMaWM) \] - In this tutorial I explain what dependency injection is in plain english and show three ways of implementing it in Flutter. **012 - Flutter Provider - Sharing Data Between Models using Services** \[ [Written](https://www.filledstacks.com/post/flutter-provider-architecture-sharing-data-across-your-models/) \] \[ [Video](https://youtu.be/dnW0NunWBTM) \] - In this tutorial I expand on my previous tutorial showing how you share data between models using services. **011 - Network Sensitive UI in Flutter using Provider and Connectivity** \[ [Written](https://www.filledstacks.com/post/make-your-flutter-app-network-aware-using-provider-and-connectivity-status/) \] \[ [Video](https://youtu.be/u9O8NOnQi_A) \] - In this tutorial I create a network sensitive UI that shows different states based on the status of your connection. **010 - Flutter Architecture - A complete guide to Provider** \[ [Written](https://www.filledstacks.com/post/flutter-architecture-my-provider-implementation-guide) \] \[ [Video](https://youtu.be/kDEflMYTFlk) \] - In this tutorial / guide I cover the complete architecture to build a production app using the provider package for state management. **009 - Build a User Feedback app using Flutter and Firebase** \[ [Written](https://www.filledstacks.com/post/build-a-user-feedback-app-in-flutter-and-firebase) \] \[ [Video](https://youtu.be/g5-ZkfN2mvY) \] - In this tutorial I guide you through the steps to implement a real time user feedback app using firebase, flutter and the ScopedModel architecture. **008 - Building a Realtime stats monitor using Flutter and Firebase** \[ [Written](https://www.filledstacks.com/post/building-a-realtime-stats-monitor-in-flutter) \] \[ [Video](https://youtu.be/qa6A2TOqY0A) \] - In this tutorial I go over the steps for implementing a real time stats monitor for [AppSkeletons](https://www.appskeletons.com/) **007 - Flutter Architecture - A complete guide to the ScopedModel architecture** \[ [Written](https://www.filledstacks.com/post/flutter-architecture-scoped-model-implementation-guide) \] \[ [Video](https://youtu.be/JsjDLHxGz4M) \] \[ [AppSkeletons](https://www.appskeletons.com/) \]- In this tutorial we'll lay the foundation to develop an application using Flutter and ScopedModel that's easy to maintain and extend. **006 - Flutter + (Smart)Flare - Building a Gooey side menu** \[ [Source](https://github.com/FilledStacks/flutter-tutorials/tree/master/006-flare-drawer) \] \[ [Video](https://youtu.be/fZuLh-oc5Ao) \] \[ [Animation](https://www.2dimensions.com/a/danemackier/files/flare/slideout-menu/preview) \] \[ [Written (code only)](https://www.filledstacks.com/post/flare-and-flutter-build-a-super-cool-gooey-slideout-menu) \] - In this tutorial I go over the process of building a slide out menu in Flare. Then importing into Flutter and using SmartFlare to add some interactive functionality to it. **005 - Overflown Stacks - A Guide to basic navigation in Flutter using Navigator** \[ [Video](https://youtu.be/DlArCl8jvlo) \] \[ [Written](https://www.filledstacks.com/post/flutter-navigation-cheatsheet-a-guide-to-the-navigator) \] \[ [Source](https://github.com/FilledStacks/flutter-tutorials/tree/master/005-basic-navigation) \] - This repo contains an implementation of basic navigation using the code snippets defined in the guide. **004 - Flutter Foundation - Handling Async behaviour - From setState to Architecture** \[ [Written](https://www.filledstacks.com/post/flutter-basics-going-from-set-state-to-architecture) \] \[ [Source](https://github.com/FilledStacks/flutter-tutorials/tree/master/004-flutter-basics) \] \[ [Video](https://youtu.be/TZkGT8WkjdA) \] - In this tutorial I show how you to handle async functionality and all it's states starting with setState and working up to a reactive architecture using streams. **003 - Using SmartFlare for Flare animation interactions** \[ [Video](https://youtu.be/vsyjMrZa5OU) \] \[ [Written](https://www.filledstacks.com/post/smart-flare-interactive-flare-actors-in-flutter-an-experiment) \] \[ [Package](https://github.com/FilledStacks/smart_flare) \] \[ [Source](https://github.com/FilledStacks/flutter-tutorials/tree/master/003-smart-flare) \] - In this tutorial I introduce my SmartFlare package that wraps normal FlareActors into a more interactable widget. **002 - Smarter Flare Animations in Flutter - An Experiment** \[ [Video](https://youtu.be/vsyjMrZa5OU) \] \[ [Written](https://www.filledstacks.com/post/reducing-boilerplate-code-in-flutter-using-flare) \] \[ [Source](https://github.com/FilledStacks/flutter-tutorials/tree/master/002-flutter-flare-pt1) \] - In this tutorial we look at how to reduce animation boiler plate code in Flutter using some basic calculations and the Awesome Flare. **001 - Building a UI in Flutter - TikTok example:** \[ [Video](https://youtu.be/kJ2mGh5BLYk) \] \[ [Written P1](https://www.filledstacks.com/post/building-tik-tok-s-ui-in-flutter-the-building-process) \] \[[Written P2](https://www.filledstacks.com/post/building-tik-tok-s-ui-in-flutter-from-layout-to-polish)\] \[[Source](https://github.com/FilledStacks/flutter-tutorials/tree/master/tik_tok_ui)\] - In this tutorial we break down the UI into Flutter Widgets, complete our layout and then tweak to get our final design to match our screenshots. ## Tools by FilledStacks [AppSkeletons](https://www.appskeletons.com/): Create your own custom template, perfectly architected and catered to your scenario. Add predefined view types and skip 2-3 days of code setup and just start developing [SmartFlare](https://pub.dartlang.org/packages/smart_flare): An extension of the already awesome Flare packages that adds interactive to FlareActors with some more functionality.