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
