Saturday, September 26, 2020

Flutter Basics

 

Flutter VS React Native VS Ionic

To create new Flutter APP
flutter create ProjectName1

Flutter Project Files
pubspec.yaml : contains project dependency like fonts, images, packages,...
lib: a folder that contains flutter code


In Any Flutter Application 
- start from function "main()"
- main() functions calls State Widget class using "runApp()" function.
- State Widget can be StatelessWidget or StatefulWidget
- State Widget should implement "Build()" function and take "BuildContext" as parameter and return "Widget"
- Flutter consists of Widgets inside each others and on top it is common to use "MaterialApp" widget which contains definitions for the common material design settings
- "MaterialApp" widget take the child widget inside it using parameter "home"


"main()" function can be updated using fat arrow like this


- "MaterialApp" widget can contains "Scaffold" widget which apply the default material design colors
- "Scaffold" widget contains two common used parameters "appBar", "body"
- "Scaffold" widget "body" normally be a list of widgets under each others using "Column" widget




StatefulWidget vs StatelessWidget 
if we define variable X and view this variable on screen then change this variable, should it update too on screen? in stateless widget data will not updated after viewed but in stateful we will update its value using "setState" function and it will be reflected to the screen! 

Shortcuts
Type stless to create a Stateless Widget Or stful to create Stateful widget

for more shortcut visit
https://medium.com/flutter-community/flutter-ide-shortcuts-for-faster-development-2ef45c51085b

Notes: any data entry component should be inside stateful widget

Text Widget
use it to display text on the screen, by default its size limited to its content, and to allow Text widget to take the full screen width, we should put it inside "container" widget that take the full width



Container Widget
contains the next properties
- Width
- Margin
- child

Private Class, Private Variable
to make any item private, just start it with underscore _


Object Oriented Core Concepts 




extends : means inherit, so App1 inherit from stateless class which force us to implement method build, this is why build method has decorator @override

child1 has constructor that accept two optional parameters, optional parameters surrounded with {}
we can make parameters one mandatory and one optional with default value like this 




Constructor has a short form like this

class Child1 extends StatelessWidget {
String info1,info2;
  Child1(String this.info1,{String this.info2=''});
}

StatefulWidget Constructor 

in the next example we pass optional title variable then access it later using widget.title

stateful Constructor should inherit from super  constructor and pass Key






Split Project to many dart files 

move widget to new dart file then import this new file inside main.dart



Function as a parameter 

you can call private function from another file or class by pass the function name as a parameter 


1) In class1 we may have the next function

  void _addNewTransaction(String parameter1, double parameter2) 
  {

  }

2) Inside class1 pass the private function as a parameter
  NewTransaction(_addNewTransaction);

3) Inside class2 receive the function and give it new name then call it

class NewTransaction extends StatelessWidget 
{
  final Function addTx;
  NewTransaction(this.addTx);

  addTx("", 0);
}











Publish Mobile App to android
1) Sign Application
keytool -genkey -v -keystore C:\Users\key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key

No comments: