Lets Flutter

What is Flutter?

A SDK that makes building high-performing, modern and beautiful apps easy Works for both Android and iOS An open-source toolkit, developed by Google* 100+ contributions from the open source community

Who is Flutter for?

Designers converge on a brand-driven experience on Android and iOSPrototypers enjoy a high-fidelity and fast way to build working prototypes. Developers benefit from fantastic developer tools, an easy-to-use language, a rich set of widgets and great IDE support. Flutter frees up valuable time for working on features and delightful experiences.

$ flutter doctor

Checks your environment and displays a report to the terminal window

$ flutter upgrade

Updates both the Flutter SDK and your packages

pubspec.yaml

name: flutter_project description: An amazing Flutter project using Firebase Authdependencies: flutter: sdk: flutter firebase_auth: "^0.2.5"

HOT RELOAD

Injecting updated source code files into the running Dart VM

Widget 

Object that describe a part of user interface

Stateless Widget : Mutable state widget

State-full Widget : Immutable state widget

Material Widget : Its widget provided by flutter to design mobile-application

it takes number of property  : Title : application title ,Theme :application theme, Home : main widget that will display on widget. 

Scaffold Widget : this widget provided by flutter to design mobile application , app bar drawer and floating action button.

Build Method : we have to override the build method to define our widget looks and logic,

In flutter UI will always be define in Declarative format.

Widget Tree :  In flutter whatever we see in the UI is a widget and Widget tree is collection of all widgets that is presented in UI.

setState() : invoke will rebuild the widgets.

Shortcuts : for android studios

Just type stless to create a Stateless Widget, Or stful to create Statefull widget

What if you already created a Stateless Widget and added lots of children, but then realized you’re going to need a State after all? Should you make a new StatefulWidgetand then manually transfer all of your code over to it? You don’t have to!

You can just place your cursor on the StatelessWidget, press Alt + Enter and click on Convert to StatefulWidget . All the boilerplate code will be created for you, automatically

What we have to learn for flutter 

1. Layouts  2. State management 3. Navigation 4. Authentication 5. Forms Validations. 

Place widget vertically Lay-outing : 

 Column : Widget is used to arrange items. but where to use it we have Container widget and in container container widget we have child property on which we can place the items which will  display vertically in screen.

Column Widget working style : 

   1. MainAxisALigment : vertical axis

   2. CrossAxisAligment  Horizontal axis like stretch to full area ,start,baseline etch or its value.

Container(sub class of widget in android it is more like View container that contain other views including Container it self.) we can make rectangle and all shape to make it rectangle we have to set some property like padding size, etc.

SizeBox : is widget to create shape like rectangle etc.

Goodbye, global layout system

new Center( child: new Text('Centered Text', style: textStyle), )

Local layouts: Every Widget defines it’s own layout. No need to tell the parent that it’s children are supposed to be centered.

“Running at 60 fps, user interfaces created with Flutter perform far better than those created with other cross-platform development frameworks.”

The UI is butter smooth (when building a release version), I have never seen such a smooth Android app.

Private Method : _ before method in dart means dart make it private in dart

Public method : not start with _ 

Here is few thing we have to remember before implementing the flutter everything that is visible to user is widget like Text TextStyle etc. Also every widget have a child and other properties like other widget.  like in button we have extra field that is callback that may not in every widget  Button is here called : RaisedButton Widget  Text we have Text widget

Shape button : shape property in button shape object like RectangleBorderRadias, and etcs.

 Custom-views like button or any thing we need to be remember below property : 

  1. Add Properties 

  2. Add Constructor

  3. Use this Properties into build method.

All the property inside the Stateless widget is final because that are mutable objects.

Common Widget for UI:

1.SizeBox

2.Text

3.RaisedButton

4.Container

5.Column

6.Child

Load image from file in flutter : need to add images into root folder and have to declare it in

 pubspec.yaml file and then have to execute command package get.

images variants also available for 2.x and 3.x devices same folder we need to create images folder 2.x and 3.x same images.

Image widget : Image.asset('path of image');

Row Widget : arrange widget horizontally used Row widget.

Opacity : take a child and also opacity decimal value

Guild Line for creating widget :

1. Deafult Parameter 

 2. Assertion

 3. Required : will check only parameter is required what value we are sending is not null and verified like user send a parameter but null in this case we need some assertion as well. Every widget we can see what assertion has there for building widget 

Use full Links :

Layouts in Flutter: [https://flutter.dev/docs/development/ui/layout](https://flutter.dev/docs/development/ui/layout)

Widget Index: [https://flutter.dev/docs/reference/widgets](https://flutter.dev/docs/reference/widgets)

Local Authentication : Remote Authentication

 1. Touch ID 1. OAuth

 2. FaceID 2. token/user ID

 3. Passcode

AndroidX Migration: flutter app if AndroidX is not supported we have to migrate AndroidX

async keyword :  Asynchronous Programming  Await Keyword :  Wait till async completed

We use return type future object when we have async call.

1. Use futures for async operation

2. Use async to mark asynchronous methods. 

3. Use await to suspend execution unit Future returns a value.

Navigator : Navigator is special widget for navigating one screen to other screen . 

 Navigator.of(context).push( MaterialPageRoute<void>( fullScreenDialog : true builder (context)  ))

 Text Field Widget : like EditText

TextFieldController : is used to control the text in text field that is being edited.

FocusNode : used to focus view and use keyboard methods like done etc.

ScrollBar : SingleChildScrollView is widget is use to solve scrolling problem.

Use full links :

Navigator class: https://docs.flutter.io/flutter/widgets/Navigator-class.html

TextField class: https://docs.flutter.io/flutter/material/TextField-class.html

TextEditingController class: https://docs.flutter.io/flutter/widgets/TextEditingController-class.html

FocusNode class: https://docs.flutter.io/flutter/widgets/FocusNode-class.html

SingleChildScrollView class: https://docs.flutter.io/flutter/widgets/SingleChildScrollView-class.html

Adding features to a class: mixins: https://www.dartlang.org/guides/language/language-tour#adding-features-to-a-class-mixins