TOOLS
- draw.io -> build flowCharts
- appIcon.co -> build app icons
- Layout cheatsheet
- custom fonts
- Color palettes
- colorzilla.com -> color dropper for getting colors from online etc.
- dribbble.com -> browse through beautiful user interfaces
- Exercism.io-> Dart Language learning classes
- JSON documents viewing -> Chrome Plugin - JSON viewer awesome
- spinkit flutter package
- 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
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
- 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
MIXINS and interfaces 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
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
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
Top comments (1)
If you need to design 3D software architecture diagram, you can try iCraft Editor : icraft.gantcloud.com/editor