Flutter Apprentice

 Flutter Intro

1. Running app in debug mode: if we run the app in debug mode it will add some extra
feature to the app to find any error in app but it will slow down the app a little bit if
debugging mode is disabled then it will run faster.
2. flutter basic file struture: Here MyApp is a class which extends the parent class
StatelessWidget. StatetelessWidget  is a type which doesn't change their state. 
StatelessWidget comes from material class next on the third line build is a function
which  return an widget MaterialApp. MaterialApp is a basic structure for app which
takes home argument where i define Scaffold widget which provides us basic component
for structuring app like app bar , body etc. Scaffold provide a high level structure  which
provides us many widget or API's  like drawer, snackbar, floatingActionButton etc.
Scaffold takes the whole screen.

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Hello world'),
),
body: Text('This is me defualt text'),

1. stateless vs stateful widget: stateless widget can't change their internal state while
stateful widget do change their internal state and widget on screen.
2. Pro Tip: Always add comma at the end of the widget which  implies formating on 
widget we have build.
3. runApp(): After creating MyApp class then in order to run our app we have call the
MyApp() class constructor from the main function. In main function runApp() is a
function come from material design which take widget tree as an argument to build our
widget tree. runapp call the top level widget in app. In simple term runApp takes the
widget and makes it root widget in the widget tree. e.g.

void main() {
runApp(
const Center(
child: Text(
'Hello, world!',
textDirection: TextDirection.ltr,

1. Pro Tip: Every widget is a dart class which has build class at the end. where build
method has some meta data about the app to build the app.
2. Fat Arrow Expression: void main() => runApp(MyApp()); if you have only one
expression then you can use the above method.
  Visible & invisible Widgets:
1. Visible Widget:

TextButton, Text(), Card() are the visible widget which we seen on the screen.

2. Invisible Widget:

Row(), Column(), ListView() are the invisible widget which helps us to layout the visible
widget.

**Elevated Button:** ElevatedButton(

onPressed: answerQuestion,
child: Text('answer 3'),
),

onPressed take a function which we have created in the the class MyApp which takes no
arguments and return nothing because the return type is void we use only the name of the
function without parenthesis

1. Anonymous function: onPressed: () => print('proritize anonymous

function'), anonymous function is like name function but it has no name takes
parameters as many you want.

 Stack: Stack widget let us place widget on top of each other with the help of
positioned widget let us take an example→
 Stack(
 children: [
 Image.asset('images/asto.jpg'),
 Positioned(
 bottom: 100,
 right: 100,
 child: Text(
 'Hello Flutter',
 style: TextStyle(
 color: Colors.white,
 fontSize: 34.0,
 ),
 ),
 )
 ],
 )

1. setState() function: setstate is a function that enforce the flutter to rerender the user
interface however not the entire app just that part of the app which has been changed and
it's calling the build method to rerender the application again but it will make a difference
if we have a huge app.
 2. Private class: If we put the ( _ ) slach symbod before the fuction,class or variable it will
make them private and cannot be accessible outside that file but if we want to access that
variable or class outside we have to set getter and setter method before access it outside.
3. Cupertino Widget: cupertino widget let you gets ios like appearance and it can be used
only with iphone where Material design use only for android. Flutter uses SKIA graphics
rendering engine to accelerate the performance of graphics on phone however it does not
support 3D graphics. it works only on 2D graphics. in simple term cupertino library
define designing of ios phone which is define by apple and material design library use the
android related designing.
4. copyWith(): copywith method will create a different theme but with our own
configurations.

theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
primary: Colors.green,
secondary: Colors.black,
),

1. SafeArea(): SafeArea widget lets us insert other widget within app area which do
not interfare with system operating system UI like notch navigation bar or home
button on the screen.
o ListView, itemCount, itemBuilder
1. ListView create a list & itemCount determines the no of row list have or
object in a list.
2. Itembuilder build the widget tree for each row.
3. ItemCount keep the track of items we have in a listView.
o child: ListView.builder(
o itemCount: Recipe.samples.length,
o itemBuilder: (BuildContext context, int index) {
o return Text(Recipe.samples[index].label);
o },
2. Pro Tip: If we have a property of any widget which is multiple time in your project
or file than create a constant variable and put that property into it than use that
const variable everywhere where you need it. also it good practice to make a
separate file for variable which is used frequently all over the app.
3. analysis-option.yaml: this file contain code related to linting which is the process of
finding errors in your code.

 widget , keys, Element Tree, Widget Tree State of Tree: Every widget is a class and
if we have multiple widget like multiple container widget then we use keys which
will help compiler to identify which widget has been changed.

Here every widget has Element tree which keep tracks of widget references e.g. it keep
the tracks of widget type , state and it’s keys. above we have two widget type tile and if
something change into the widget tree the Flutter will go to it’s Element tree and check
 for it’s references ,type and keys if it don’t match it will swap these tile just like above
image but if it doesn’t have the keys then it will check only types but will not swap due to
it keys which are missing from the element tree. In simple Element tree the skeleton of
every widget and every widget have it’s own element tree. if widget doesn't redrawn as
you expected then keys may solve the poblem.

1. $ Sign, Literals, String interpolation: with the help of $ symbol we can extract the
value of variable inside print method also called string interpolation, literals are the
value of variable which have no variable at the time and when we assign it variable
then we can use that variable.
2. Quick boot vs Cold boot android emulator: Cold boot is when boot up our phone
from the start where Quick boot is like feature if enabled then it let’s start from the
place where you left previously just like hibernation in laptop. which store the state
of your system in RAM.
3. Icon class: Icon( Icons.cake, size: 300, color: Colors.green )
4. Embeded Image & Network Image: Image( image:
AssetImage('assets/mango.jpg'), )

Expanded widget will remove the overflow & fit property of image would format the image size
like fitHeight, fitWidth, cover, contain, fill Because expanded widget will take space as much as
possible on the applied widget. Expanded widget have a property called flex which let's widget
to expand as big as define according to other widget define with it's.

Expanded(
child:
Image.network('<https://upload.wikimedia.org/wikipedia/commons/2/2c/
Rotating_earth_%28large%29.gif>',
fit: BoxFit.fitHeight,
flex: 3,

1. Pro Tip: Good practice is to choose the stateless widget over stateful widget but in
case you really need the stateful widget in future you can easily change it to stateful
widget but we cannot change stateful widget to stateless.

 TextField(): TextField usually used in forms like sign in page. label & labelText do
the same task. controller will define the initial value if null
 TextField(
 keyboardType: TextInputType.emailAddress,
 // inputFormatters: [FilteringTextInputFormatter.deny('12')],
 // inputFormatters: [FilteringTextInputFormatter.allow('12')],
 inputFormatters: [FilteringTextInputFormatter.digitsOnly],
 //Above three formater will put constraints on textField the
first
 // one will deny more than 12 digit or words and so forth so
on.
 decoration: InputDecoration(
 icon: Icon(Icons.car_rental),
 border: OutlineInputBorder(
 borderRadius: BorderRadius.circular(12.0),
  ),
 suffixIcon: Icon(Icons.star),
 prefixIcon: Icon(Icons.engineering),
 // labelText: 'Enter Name',
 label: Text('Enter you name below: '),
 hintText: 'Enter you name'),
 controller:
 TextEditingController(text: 'initial value by
controllled'),
 ),

1. resizetoAvoidBottomInset:

home: Scaffold(
resizeToAvoidBottomInset: false,

add to the scaffold default value is true. e.g. if you have onScreen Keyboard open then it may
resize the screen for that keyboard but if you want to disable it then make it false.

 Layout Widgets: we have two type of layout widgets:

o Single Child Widget.
 Align, ConstrainedBox, Baseline, Container, Expanded, FittedBox,
SizedBox, Padding.
o Multiple Child Widget.
o Column, Row, GridView, ListView, Wraps, Table, Stack.

1. SingleChildScrollView: some of layout widget like column, Row etc are static and
will not scroll so to add that interactivity of scrolling we put column in
singleChildScrollView as it’s child.