Each widget will have a child and other specific properties

1) Container -> For width and height and color

2) Center -> The child will be in center of its area

3) Buttons -> ElevatedButton, TextButton, OutlinedButton

4) Adding Images
-->Create a folder named assets in root project and add new folder or images
-->Go to pubspec.yaml and make assets:
-assets/images
-->Click on Pub get

--> child:Image.asset(‘assets/images/logo.png’)
Image.network(url) (for image from internet)

5) Row -> Represents one row of children

mainAxisAlignment -> Horizontal (default full width)
crossAxisAlignment -> Vertical

6) Column -> Represents one column of children

mainAxisAlignment -> Vertical (default full height)
crossAxisAlignment -> Horizontal

7) InkWell -> Click options for those which do not possess by default

8) SingleChildScrollView -> Enables scroll options

scrollDirection:Axis.vertical (default)

9) ListView -> Same as Row or Column with children

ListView.builder -> For dynamic content using array

In ListView :--- ListTile(leading,title,subtitle,trailing)

10) decoration:BoxDecoration
for radius,border,shadow,shape

11) Padding -> Widget and Margin -> property

margin:EdgeInsets.only()
padding:EdgeInsets.only()

12) CircleAvatar: backgroundImage, foregroundImage

AssetImage(“assets/images/pic.png”)
NetworkImage(url)
:- We can have a child inside it to have a Text on Image
:- minRadius and maxRadius
13) Custom Fonts
Create new folder as fonts under assets and add the .ttf file
Go to pubspec.yaml file and under fonts section set the location, custom name and font-size

14) Changing Themes and Fonts

i) Using style attribute

ii) In the Material or Cupertino app go to ThemeData and there add styling for different widgets
(eg textTheme:TextTheme(headline1:TextStyle(fontSize:25,color:Colors.blue))

and in the Scaffold app in the required widget under style attribute use it like the following
->> style:Theme.of(context).textTheme.subtitle

or (To add extra styling) and Use ! to confirm that its not null

--> style:Theme.of(context).textTheme.headline1!.copyWith(color:Colors.red)

15) Card :- shadowColor , elevation:3 (usually)

iii) In lib directory create a folder (ui_helper->util.dart) and a dart file

TextStyle func(parameters){ //Optional parameters and default parameters
return TextStyle(
);
}

16) TextField :- enabled, keyboardType, decoration

:-InputDecoration
:- suffixIcon,
enabledBorder,disabledBorder,focussedBorder
:- OutlineInputBorder(borderRadius,borderSide(color))

To access the content we have controller

Working of Flutter App (main.dart)

1) Stateless and Stateful Widget Class will be extended (functions like useState in react)
2) main.dart will run MyApp which extends StatlessWidget or StatefulWidget
3) In MyApp override the build function and return Material or Cupertino app and add
titile,theme,home
4) In the home property return