Installation

clone

git clone https://github.com/flutter/flutter.git -b stable

add the flutter/bin to your PATH variable

run flutter doctor

flutter doctor

install android studio from https://developer.android.com/studio make sure ANDROID_SDK_ROOT is set to the path of your SDK

setup android studio emulator to have at least one device to test with

see more at https://flutter.dev/docs/get-started/install/windows

create new project

flutter create . --org com.bilersolutions.<yourproject>

rename

rename setAppName --targets ios,android --value "YourAppName"

commands

install package

flutter pub add <package-name>

clean

flutter clean

get dependencies

flutter pub get

Concepts

Similar to ReactJS
Widget = Component
Uses Dart programming language (similar to ES6)
Sample project https://github.com/buonzz/startup_namer
pubspec.yaml is like packages.json
https://pub.dev/ is like npmjs.com
BLoC - Business Logic Component, predictable state management library for Dart

Dart Basics

each app has main function

void main() {
  print('Hello, World!');
}

importing

// Importing core libraries
import 'dart:math';
// Importing libraries from external packages
import 'package:test/test.dart';
// Importing files
import 'path/to/my_other_file.dart';

StatelessWidget - dont have properties that change over time StatefulWidget - changes based on user interaction and other factors, store mutable state in a seperate class called State StatefulWidgets don’t have a build method; instead, their user interface is built through their State object

get a state class from any parent

StudentState extends InheritedWidget

final studentState = StudentState.of(context);

UI

SafeArea - widget that avoids operating system interfaces

Basic Layout with navigation menu on top

main > runApp > MaterialApp.home > SafeArea.child > StatelessWidget.build > Material.child > Column.children > MyAppBar and Expanded

Display on-screen keyboard in iOS simulator

⇧ + ⌘ + K

Open DevTools in browser for vscode

Ctrl + Alt + d

click "Open Devtools in Web Browser"

State Management

Riverpod - state management for flutter.

Provider - simple immutable objects
StateProvider - simple mutable objects
FutureProvider - values that are resolved asynchronously
StreamProvider - values that come from a continuous stream

Boilerplate

https://github.com/bizz84/starter_architecture_flutter_firebase/tree/master

Branding

https://icon.kitchen/
https://pub.dev/packages/flutter_launcher_icons/install
https://hotpot.ai/templates/google-play-feature-graphic
7-inch tablet screenshots google: 1200 x 1920 pixels
10-inch tablet screenshots google dimensions: 1800 x 2560 pixels
https://docs.flutter.dev/deployment/android
targetSdkVersion 34
flutter build appbundle

buonzz/flutter_cheatsheet.md