Fluter Bootcamp Compendium of learnings
Tags: flutter, bootcamp
Published: 2021-04-18 16:56:39

#TOOLS
* [draw.io](https://draw.io)    ->  build flowCharts
* [appIcon.co](https://appIcon.co) ->  build app icons
* [Layout cheatsheet](https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e)
* [custom fonts](https://fonts.google.com)
* [Color palettes](https://materialpalette.com)
* [colorzilla.com](https://colorzilla.com) -> color dropper for getting colors from online etc.
* [dribbble.com](https://dribbble.com) -> browse through beautiful user interfaces
* [Exercism.io](https://exercism.io/my/tracks/dart)-> Dart Language learning classes 
* JSON documents viewing -> Chrome Plugin - JSON viewer awesome 
* spinkit flutter package 
* [coinAPI.IO](https://coinapi.io) -> cryptocurrencies API
*  rgb to hex on google

#Articles:
* text button examples https://www.woolha.com/tutorials/flutter-using-textbutton-widget-examples

#TIPS
* TO EMBED IN ANOTHER WIDGET
// click on the widget you want to embed -
// USE the magic light bulb,
// or press option+enter (on MAC, this did not work for me, but it is supposed to work).
 
#App History
  
###I AM RICH / I AM POOR 
-> basic layout , 
 * UI -> stateless widget intro, images folder, 
  
###MI CARD 
-> advanced layout -
 * UI -> Sized box. Card, List tile,  Container,  column, Row, safe area , fonts, 
  
###DICEE / MAGIC 8 BALL 
-> STATEFUL widget, intention actions, 
 * UI -> Flutter widget outline!  expanded(flex- priority)
 * Actions -> TextButton - onPressed. Functions. specify the type of properties. 
 * State -> $variableName, also use Random().nextInt(6) + 1 to avoid 0 
  
###XYLOPHONE:
 * packages  -> play sounds, english words
 * functions -> parameters, reusable components
  
###QUIZZLER / DESTINY:
 * Dart -> arrays, how to create an object, initializer, 
 * UI/state -> set state to update UI.
 * OOP Principles -> objects, abstraction, encapsulation, inheritance, polymorphism
 * DESTINI -> STEP BY STEP PROCESS, set background for container
 
###BMI CALCULATOR:
 * CUSTOM WIDGETS! inspo @dribbble.com
 * Flutter ->  themes -> create an app theme, WIDGET theme , GestureDetector (instead of always making it a button)
 * Dart ->class constructor, final vs const(cannot change at runtime), Enums, ternary operator,
 * Functions as first class citizens(129), 
 * Navigation -> routes, Navigator
 * Navigator.push() / pop (stack) for a simple application with one single stack
 or 
 * Map (dictionary) of routes , Navigator.pushNamed()  - for more complicated applications with multiple routes
  
###CLIMA APP:
 * Networking/ API calls -- 
 * Futures / Async -- 
 * Constants file - to keep track of constants
 
 * ASYNC / AWAIT -> 
  
 * permissions for accesing a user's location 
  
 * Widget lifecycles -> 
  
 * Stateless widgets 
 * - everything runs on build. since they don't need to track state
  
 * Stateful widgets
  
 * - initState -> as soon as its called - only runs once 
 * - build -> as soon as it is done building all the widgets - runs everytime a widget changes
 * - deactivate -> stateful widget gets destroyed 
  
 * TRY / CATCH / THROW
  
 * name when you import a package 
 * i.e import 'package:http/http.dart' as http; -> that way, when using elements from this package, 
 * you can tell at a glance you are referring to elements from this package.
  
 * JSON parsing 
  
 * HTTP Networking m148
  
###BITCOIN TICKER:
 * Futures / async / await/ 
 * architecture -> MVC still 
 
 * IOS AND ANDROID FUNCTIONALITY 
 * import 'dart:io' show Platform;
 
  `Widget getPicker() {
if(Platform.isIOS) {
return iOSPicker();
} else if(Platform.isAndroid) {
return androidDropDownButton();
}
  }`
OR RIGHT IN THE WIDGET CODE 

`child: Platform.isIOS ? iOSPicker() : androidDropDownButton(),`

* to find out how I got all 3 medals for this challenge, visit [this link](https://dev.to/valerianagit/journey-to-bitcoin-ticker-medals-in-flutter-bootcamp-34ep)
  
###FLASHCHAT
 * Named Routes https://flutter.dev/docs/cookbook/navigation/named-routes
 * - create a map of 4 named routes to each screen 
 * - set intial route to welcome screen
  
 *DART
 static properties  
  
####FLUTTER
 * ANIMATIONS and MIXINS: 
 * - [HERO animations](https://flutter.dev/docs/development/ui/animations/hero-animations)
 * - screen transitions, a shared element between 2 screens
  
 *    Animation controller - custom animations 
 * - a ticker
 * - an animation controller
 * - an animation value -  height, size, color, opacity of component
  
 * [Curves animation](https://api.flutter.dev/flutter/animation/Curves-class.html)
 * [animated text kits](https://pub.dev/packages/animated_text_kit)
  
 *    [MIXINS and interfaces](https://stackoverflow.com/questions/45901297/when-to-use-mixins-and-when-to-use-interfaces-in-dart) vs protocols(Swift)
 
 *    reuse code - inheritance 
 
#####FIREBASE
 *  Authentication 
 * - AUTH , FIRESTORE AND FIREBASE CORE 
 * - fix first error after adding firebase - Error : running pod install becausexcode target is 8.0 
 * - >> so I updated target to 12.0 in my iOS folder
 * - Now the app just [hangs on running pod install](https://dev.to/idawnwon/error-running-pod-install-after-add-cloudfirestore-to-flutter-5lj)

#####DART
 * Streams - receipt (Futures)
 * - but this time, you have a seat at a table , and you'll be able to pick up the pieces as they reach you 
  
##TODOEY
 * `ChangeNotifierProvider<TaskData>(builder: (context) => TaskData(), child:`

#####UI DESIGN 
 * widget index in flutter docs to peek at whats available 
  
#####state management 
 *    setState
 * local state -  don't need it across the app 
  
  - lift state up with calbacks
  - set state in a parent widget to update all the widgets 
  - upwards/ sideways and downwards in the tree.
  - Essentially, find the parent most node of all the widgets that will inherit that state, 
  - update state there, and that way state can be used downwards
  
#####Architectural patterns and design patterns m. 204
  
 * Architechture - manage complexity / scale 
 * i.e. MVC - (also a design pattern when speaking of a single )
  
 * imperative (swift/ iOS) vs reactive (flutter - doesn't rely on touch events, UI is a function of the state)
  
 * for reactive programming we talk about STATE MANAGEMENT as opposed to design patterns 
 #####Provider package - state management in Flutter 
  https://pub.dev/packages/provider/install
 
 * child listens to a parent state change 
 * import 'package:provider/provider.dart';

 
 * Keep state of taskData provider high so we can use it all the way down the tree 1 - create a TaskData Change notifier class 
 * provide the data to task screen(number of tasks ), as well as task list (all Tasks) -> 2 - (listeners)

* To check out how I achieved the challenges for Todoey, [check out my article here](https://dev.to/valerianagit/flutter-provider-journey-with-todoey-app-4ll5)
  
######Riverpod - provider but more testable 
 * [link here](https://riverpod.dev)