How I learned Flutter and How you Can Too...

Photo by JESHOOTS.COM on Unsplash

The technique described in the article can be applied to learn any language or framework. In fact, it can be applied to learn anything in life. I have used it all along to learn react, blockchain, dockers, creating music etc. However in this post, I will only talk about how I applied it to learn Flutter. 

This technique takes you away from traditional ways taking a course and watching lengthy videos. Also, it won’t make you an expert but if you apply it over and over again, you can become an expert. If applied once, you can say that you know the basics and have somewhat experience in using flutter. 

What to expect?

Post successful implementation of this technique, you will be basic knowledge of flutter and something to showcase your knowledge.  It is a goal oriented technique and requires your attention only on those building blocks which helps you achieve your specific goal.

Without further ado let’s begin 

1. Setting a context - Read in general about the Flutter framework. What it is ? How it works ? Languages used etc.  or just watch a video on youtube.
2. Goal Setting - Come up with a small idea that you think can be built quickly like a to do list, a calculator or a quiz, it can be anything based on your choice and expertise.
3. Project Structure - Understand how a typical flutter project is structured. You may want to understand, how to structure your code, where to add permissions, plugins , where to put assets. etc.
4. Setting-up & Execution - This is the step where you need to have good research skills. Set up the development environment for flutter using the flutter official docs and break your target goal into sub components and learn how to implement those sub components. You will have to explore through the flutter documentation and other articles, to identify and learn what building blocks are required. But how will you know what building blocks are available ?

Google every question that you have in mind.

And it will direct you towards what building blocks are available. In case of flutter, everything is a widget. EVERYTHING!. You google the widgets, widget for creating a list, widget for layout, widget for page views etc.  Below are the reference links that I used to learn and develop my app flutter. I believe these will be very helpful for anyone starting to learn flutter. 

I have posted them on github as well ( which I will keep updating). Also, I would like thank all the developer beings :p and hard working people for producing all the resources.

Also, if you are curious this ( ios & android ) is what I build using flutter.

Useful links -

Navigation Tabs

https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation

https://medium.com/@uncoded_decimal/creating-bottom-navigation-tabs-using-flutter-2286681450d4

https://www.youtube.com/watch?v=BlUd-BAu0DMhttps://www.youtube.com/watch?v=BlUd-BAu0DM

ListView

https://medium.com/@DakshHub/flutter-displaying-dynamic-contents-using-listview-builder-f2cedb1a19fb

Routes

https://flutter.dev/docs/cookbook/navigation/named-routes

PageView 

https://medium.com/flutter-community/a-deep-dive-into-pageview-in-flutter-with-custom-transitions-581d9ea6dded

Story Demo

https://github.com/fdoyle/flutter_demo_movies/blob/master/lib/main.dart

Building Layouts

https://pusher.com/tutorials/flutter-building-layouts

https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

Text Styling

https://api.flutter.dev/flutter/painting/TextStyle-class.html

AppBar Sliver - Expandable view

https://www.youtube.com/watch?v=R9C5KMJKluE

https://www.youtube.com/watch?v=e5bklM7YfIo

https://proandroiddev.com/flutter-a-hitchhiker-guide-to-stateless-and-stateful-widgets-cc9f9295253b

https://stackoverflow.com/questions/49227667/using-safearea-in-flutter

Splash Screen

https://medium.com/@vignesh_prakash/flutter-splash-screen-84fb0307ac55

https://medium.com/@diegoveloper/flutter-splash-screen-9f4e05542548

https://www.youtube.com/watch?v=6t6Ug4pjw6U

Version Code

https://stackoverflow.com/questions/51534616/how-to-change-package-name-in-flutter

Firebase 

https://firebase.google.com/docs/flutter/setup

https://firebaseopensource.com/projects/flutter/plugins/

https://github.com/flutter/plugins/blob/master/packages/firebase_analytics/example/lib/main.dart

Layout Approach

https://flutter.dev/docs/development/ui/layout/tutorial

Database

https://medium.com/@studymongolian/simple-sqflite-database-example-in-flutter-e56a5aaa3f91

https://flutterbyexample.com/stateful-widget-lifecycle/

https://proandroiddev.com/flutter-bookshelf-app-part-2-personal-notes-and-database-integration-a3b47a84c57

Variables

http://thetechnocafe.com/just-enough-dart-for-flutter-tutorial-01-variables-types-and-functions/

JSON parsing in Flutter/Dart

https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51

https://github.com/PoojaB26/ParsingJSON-Flutter/blob/master/lib/model/product_model.dart

Assets

https://flutter.dev/docs/development/ui/assets-and-images

Shared prefs

https://medium.com/flutter-community/shared-preferences-how-to-save-flutter-application-settings-and-user-preferences-for-later-554d08671ae9

Async call

https://flutter.dev/docs/cookbook/networking/fetch-data

https://flutter.institute/run-async-operation-on-widget-creation/

https://medium.com/@takahirom/how-to-write-flutter-asynchronous-processing-22f845204f30

https://flutter-academy.com/async-in-flutter-futurebuilder/

Stacks

https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77https://medium.com/flutter-community/a-deep-dive-into-stack-in-flutter-3264619b3a77

https://mightytechno.com/flutter-stack-widget/

Share

https://github.com/flutter/plugins/tree/master/packages/share

https://github.com/d-silveira/flutter-share

Others

https://medium.com/flutter-community/flutter-architectures/home

https://stackoverflow.com/questions/45924474/how-do-you-detect-the-host-platform-from-dart-code

PageView as Gesture

https://medium.com/flutter-community/synchronising-widget-animations-with-the-scroll-of-a-pageview-in-flutter-2f3475fcffa3

https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

Animations 

https://medium.com/flutter-community/scrolling-animation-in-flutter-6a6718b8e34f

Intro Screens

 

https://flutterawesome.com/a-flutter-package-for-some-material-design-app-intro-screens/

https://flutterawesome.com/simple-and-configurable-app-introduction-slider-for-flutter/

https://github.com/duytq94/flutter-intro-slider/blob/master/example/lib/intro.dart

Navigation

https://flutter.dev/docs/cookbook/navigation/navigation-basics

Flutter Android Build & Signing 

https://flutter.dev/docs/deployment/android#build-an-apk
https://medium.com/flutterpub/flutter-andorid-keystore-path-on-different-os-d0fc30a24d4f

https://flutter.dev/docs/deployment/android

https://github.com/flutter/flutter/issues/29975

https://stackoverflow.com/questions/49874194/flutter-release-apk-is-not-working-properly

Rendering, Widgets, etc

https://medium.com/flutter-community/flutter-what-are-widgets-renderobjects-and-elements-630a57d05208

https://medium.com/flutter-community/the-layer-cake-widgets-elements-renderobjects-7644c3142401

https://medium.com/saugo360/flutters-rendering-engine-a-tutorial-part-1-e9eff68b825d

Stream builder/cloud firestorm

https://medium.com/@atul.sharma_94062/how-to-use-cloud-firestore-with-flutter-e6f9e8821b27

https://stackoverflow.com/questions/47111181/firestore-offline-data-merging-writes-maximum-time-of-offline-persistence

https://firebase.google.com/docs/firestore/manage-data/enable-offline

https://firebase.google.com/docs/firestore/data-model

https://github.com/flutter/flutter/issues/19122

https://www.gotut.net/flutter-firestore-tutorial-part-1/

Cheers!

Feel free to connect on linkedin or instagram.