Notes on all the tutorials I followed to learn Flutter.
Flutter is the framework to build apps from a single codebase. It will be used to build web-apps as well. Google is developing "Hummingbird" which will allow to develop web apps using flutter.
Advantages:
- Increases Productivity - HMR, Same codebase for iOS and Android.
- Speed - JIT & AOT. Uses "Skia" for rendering, which is used by Chrome.
- OSS
- Pixel perfect UI. Cupertino (iOS) and Material (Android)
Disadvantages:
- Bigger size
- Young
Examples:
- Alibaba
- Google Ads
Flutter SDK: Click Here
A widget is the basic build block of the UI in a flutter app. It is an immutable declaration of part of UI.
A text, button, image, font, color scheme, padding, margins, theme, cols-rows, tables, material-app - everything is a widget.
Material design is the Design Language that Google developed.
The library that Flutter uses for material design is Material.dart.
While developing widgets, the question you need to ask is - will it be a static or a dynamic widget.
In other words, there are 2 types:
-
Stateful Widgets: The state changes during the widget's lifetime. Ex. Input field. What really changes, is not the widget itself (as it is immutable), it is the STATE that changes during the lifetime.
-
Stateless Widgtes: Only configuration information. Ex - Title of app or Image of app logo - It will not change during the app's lifetime. Therefore we define a stateless widget when the part of the UI that we are describing does not depend on anything other than the configuration information of the object.
CUSTOM WIDGETS: Created by composing smaller widgets.
Create flutter apps (Flutter playground).
State is information (attached to widget) that might change during lifetime of the widget. Flutter has a UNIFIED OBJECT MODEL, unlike other frameworks where the business logic is separated from the view. THis UOM is called a WIDGET and you write business logic in this UOB (aka Widget).
There are no layout files in flutter.
Checkout widget tree in the android studio.
There are many kinds of widgets like Layout, Gestures (Interaction Models), Animations - More
The widgets here will have their own child widgets.
Row: Will have Columns as child widgets.
Column: Will have row as child widgets.
List View: When you need to show info more than the height of the device
Gesture Detector: A widgets which detects gestures.
In flutter, you can develop 2 kinds of animations:
-
Tweens: In-between animations. Define begin-end points, timeline and curve. Flutter will apply the transition.
-
Physics based: Real world behaviour. For example: Flip of a coin or dropping of an object whose speed will depend on the weight of the object and distance from the ground. Governed by the physics laws and forces.
We use setState() to set the state of the widget. But this has a drawback as the logic is in the same class as the layout which can be an issue as the app grows and can also result in spaghetti code.
May complicate code reuse.
Risk of code duplication.
BLoC stands for Business Logic Components. It is officially supported by Google.
BLoC's are based on streams. It is like a one-way pipe where you insert the data at one end and the data flows out from the other.
Stream Controllers: The streams are managed by stream controllers. The two main properties of the StreamController are:
- .sink --> The way-in the stream (insterting data into the stream).
- .stream --> The way-out of the stream (data exiting from the stream).
.sink and .stream are the two properties to control the stream.
In order to use the stream and be notified when something gets out of it, you listen to the stream. Therefore, you define a listener with a StreamSubscription object.
The StreamSubscription is notified everytime a event related to the stream occurs. For example, when there is an ERROR or when the data flows out of the stream.
You can also TRANSFORM the data in the stream using a StreamTransformer object. For example if you want to FILTER or MODIFY the data inside the stream.
BLoC Pattern The business logic of the apps should be moved to BLoCs and therefore should be removed from the UI.
It should rely on the use of STREAMS for input (.sink) and output (.stream).
It should remain platform and environment independent.
BLoCs are components that contain the business logic of your app. Use .sinks to take events from widgets and .stream to output the result to widgets.
What happens inside the BLoC is independent from the UI.
In Android Studio, you can inspect a element in the UI like in Web Dev using the Flutter Inspector. It is is View -> Tool Windows -> Flutter Inspector. Here you can see the entire widget tree with its properties.
In VSCODE -
type stles to create a StateLess widget.
type stful to create StateFull widget.
type stanim to create Animation widget.
Quick Fixes and Others - Ctrl + .
Problems - Ctrl + Shift + M
Flutter Packages
Dart Packages
flutter_localizations - A library used to make flutter app multi-lingual.
- Unit Test (Functions, etc.)
- Widget Test (like testing components in Angular)
- Integration Test (Tests the whole app or a large part of the app. Try to run it on a real device)
test.dart package is used to write test cases.
Make animations and use directly into your flutter app. Vector design and animation tool that exports directly to Flutter. Rive is used as vector design and animation tool.
Add flutter to exisiting apps (iOS and Android)
Platform is the class which contains information on the envrionment in which the current app is running.
You can distinguish code for different platforms like:
if(Platform.isIOS){}
if(Platform.isAndroid){}
But this will almost double the amount of code to produce the UI.
There are better patterns to follow and there is also a dedicated library for the same - flutter_platform_widgets
flutter_platform_widgets helps to create platform specific UI without having to duplicate the code.
You'll be using classes like: PlatformScaffold, PlatformAppBar, PlatformText instead of Scaffold, AppBar, etc.
Even though flutter lies in the HYBRID APP DEVELOPMENT category, it is a better alternative than react native, Cordova/Ionic and Xamarin.
The main issues with them is that they need a BRIDGE between your code and the mobile OS and thus that hampers the performance of the app which is well below the performance of the native app.
Using 3rd party libraries and components with apps developed using these can be very problematic.
Flutter compiles to native. Therefore it provides excellent perforamance. Types of compilation - JIT, AOT
Fast Development framework
Single code-base for iOS and Android
No bridges between your code base and the OS of the mobile
Flutter is developed using a strongly typed language called "Dart".