here listview widget will build a list using listview than itemBuilder build the widget tree for

every row, itemCount tells how many rows a list have. the only difference b/w both of them is
listView create scrollable list at once explicitly specifying the list whereas listView.builder
builds a widget onDemand as user scrolling.

1. TextTheme: TextTheme is used to define various style of text we can also create a
class with different static properties.
2. class FooderlichTheme {
3. static TextTheme lightTextTheme = TextTheme(
4. bodyText1: GoogleFonts.openSans(
5. fontSize: 14.0,
6. fontWeight: FontWeight.w700,
7. color: Colors.black,
8. ),
9. Stack, Positioned, RotatedBox: If you want to Place widgets one over another then
we can achieved this with the help of stack here stack widget will keep track of
widgets inside it and positioned widget will position that widget. RotatedBox
widget take a takes a child and rotate them in with the help of quarterTurns
constructor and this constructor takes 1→4 values where 1 means 90 degree , 2
means 180, 3 mean 270, 4 means 360
10. Stack(
11. children: [
12. Positioned(
13. top: 0,
14. left: 0,
15. child: RotatedBox(
16. quarterTurns: 3,
17. child: Container(
18. height: 60.0,
19. width: 300.0,
20. color: Colors.redAccent,
21. child: Center(
22. child: Text(
23. "Hello Flutter ",
24. style: kBodyText,
25. ),
26. ),
27. ),
28. ),
29. ),
30. ],
31. ),

 Wrap, Chip widget: sometime we have multiple widgets one the screen horizontaly
and when it’s overflows then we use Expanded or Flexible widget instead of using
multiple widgets we can use only Wrap widget which let’s their children start from
the second line if in a first line not all the children get fits and overflowing.A Chip
widget is a display element that displays text and image avatars, and also performs
user actions such as tap and delete. For more about chip widgets, to check more info
on chip click on below link.
 Flutter Widget In Focus - Chip (Know It All)

Wrap(
alignment: WrapAlignment.center,
direction: Axis.vertical,
children: [
Chip(label: Text('Chip 1')),

],
),

1. Adding opacity to the image:

Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/asto.jpg'),
opacity: 0.5,
),
),
),

 ProTips:
o Three main categories of widgets are:

structure and navigation; displaying information; and, positioning widgets.

 There are two main visual design systems available in Flutter, Material
and Cupertino. They help you build apps that look native on Android and
iOS, respectively.
 Using the Material theme, you can build quite varied user interface
elements to give your app a custom look and feel.
 It’s generally a good idea to establish a common theme object for your
app, giving you a single source of truth for your app’s style.
 The Scaffold widget implements all your basic visual layout structure
needs.
 The Container widget can be used to group other widgets together.
 The Stack widget layers child widgets on top of each other. There’s a
wealth of Material Design widgets to play with, not to mention other types
of widgets — too many to cover in a single chapter. Fortunately, the
Flutter team created a Widget UI component library that shows how each
widget works! Check it out here: https://gallery.flutter.dev/

1. widget, build method: widget are the lego blocks which compose the UI whereas
build method meant for drawing that lego block on UI. every widget in the tree have
their own build method. where build method has to be faster because it renders the
UI of the application and when something we change and we want to take place that
 changes then we call setState method which marks the current widget as dirty and
build method will reconstruct that widget.
2. How widget Render on Screen? we have three types of Widget tree, Element tree,
**RenderObject tree** for more information click on the link
https://youtu.be/996ZgFRENMs. Rendering object is to laying out the widget on screen.
3. StatelessWidget vs StatefulWidget: The only difference b/w these two types of widget
is stateful widget create a state class which store mutable data which can change over
time.
4. Create two icon using ternary operator:

IconButton(
onPressed: () {
setState(() {
is_Selected = !is_Selected;
});
},
icon: Icon(is_Selected ? Icons.favorite : Icons.favorite_border),
),

1. Converting XFile to File: File file = File(videofile.path);

ProTip: Column and Row widgets are like ListView but without the scroll view.

 ListViewListView.Builder(), ListView.separated(), ListView.custom()

Listview has four constructor shown below:

The ListView is the default constructor which takes an explicit list of widget to
construct. this is useful when we have small number of children.

Listview.builder() takes an indexWidgetBuilder and build child on demand. It

will only construct the children when visible on screen. this is helpful when we have
a large number of children. then this constructor will build only those children
which are visible not below or above the screen.

Listview.separated()takes two indexWidgetBuilder one is itemBuilder and other

is separatorBuilder where itemBuilder is call when new child is appear on screen it
will build that child on the other hand separator builder is used to place the
separator widget between these children like sizedBox widget.

ListView.custom() gives you more fine-grain control over your child items.

CircularProgressIndicator() is used to show loadingCircleBar: Center( child:

CircularProgressIndicator(), );

Exiting application with onTap: onTap: () => exit(0),

 1. InteractiveViewer widget: interactiveViewer is used to zoom in out any widget we
can also use it to move the whole page.

InteractiveViewer(
child: Image.asset('assets/background.jpg'),
),

1. SelectAbleText widget: this widget replace text widget but this widget let's you copy
the content while text widget don't.

 FutureBuilder(), Snapshot: Future builder determine the future e.g it tells you
whether data is still loading or it have fetch the data successfuly. Snapshot is the
result return by the FutureBuilder using snapshot we can ask the futureBuilder
about their state. below mockService object calling the getExploreData method
which is a future method and return something to check the state of it we use
snapshot as seen below. it simply check the state of the future.
 return FutureBuilder(
 // 2
 future: mockService.getExploreData(),
 // 3
 builder: (context, AsyncSnapshot<ExploreData> snapshot) {
 if (snapshot.connectionState == ConnectionState.done) {
 // 5
 final recipes = snapshot.data?.todayRecipes ?? [];
 // TODO: Replace this with TodayRecipeListView
 return Center(
 child: Container(
 child: const Text('Show TodayRecipeListView'),
 ),
 );
 }

1. MaterialApp vs Cupertino: these are the containers that hosts our projects for
android materialApp and for ios Cupertino. it's like they hosts all our app because
all the widgets comes from this place we use in our app.

To Render something on screen android use skia library developed by google.

1. ConstrainedBox: ConstrainedBox let us apply constraints on a widget e.g. above i

have set constraint on container whose height will be 800 and will not be reduced
than that same as maxWidth. try this on chrome and drags edges of chrome back
and forth to see the effect.

child: ConstrainedBox(
constraints: BoxConstraints(minHeight: 800.0, maxWidth: 1000.0),
child: Column(
children: createContainer(),
),
),
1. Const vs final: when you know the value of something in advance which would
never in future then we can initilize that variable as a const e.g. the value of PI
which is 3.45 but if you have something you don't know about their value which you
will find out at runtime then for that we use final e.g. when teacher gives us the final
term exam marks which teacher would know in future but at that time teacher will
mark that variable as final.

 TextButton, ElevatedButton, OutlinedButton:

style applied to OutlinedButton can also be applied to other two button the same way.

note: elevation → shadowColor, OverlayColor → Colors.amber

Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () {},
child: Text('Elevated Button'),
),
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.access_alarm),
label: Text('TextButton'),
style: TextButton.styleFrom(
backgroundColor: Colors.amber,
padding: EdgeInsets.all(23.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(23.0),
),
),
),
OutlinedButton.icon(
style: TextButton.styleFrom(
padding: EdgeInsets.all(23.0),
backgroundColor: Colors.greenAccent,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(23.0),
right: Radius.circular(23.0),
),
),
elevation: 23.0,
shadowColor: Colors.red,
side: BorderSide(color: Colors.black, width:
1.0),
),
onPressed: () {},
icon:
Icon(Icons.home_repair_service_outlined),
label: Text('OutlinedButton'),
),
],
),
1. Pro Tip: To put your custom icon in app instead of flutter’s own icon select no of icons
you want from http://fluttericon.com/ and import dependencies into pubspec.yaml as we
do for custom fonts. Then we can use that icons as we use custom icons.
2. Inkwell provide us feedback like overlay effect etc where GestureDetector only detect
gesture and doesn’t gives us any feedback.
3. ExpansionPanel, ExpansionPanelList vs ExpansionTile:

ExpansionPanel and ExpansionTile are both used to expand content on tap which shows
an arrow icon to expand the content within it. ExpansionTile is more like ListTile but
with an Expand and collapse option. ExpansionPanel and ExpansionTile work both same
but ExpansionPanel have some other features which don’t support by ExpansionTile.

4. RefreshIndicator is used when we overScroll the screen this have a property onRefresh
which take a callBack.