added layout widget content to the readme.md

README.md

@@ -1,2 +1,332 @@
 # Flutter-Layout-Cheat-Sheet
 This repo includes identified Flutter Layouts which anyone can refer as their layout cheat sheet.
+
+# Basic widgets
+
+## (1) Appbar 
+<center><i>No video data available</i></center>
+
+An app bar consists of a toolbar and potentially other widgets, such as a  TabBar and a  FlexibleSpaceBar. App bars typically expose one or more common  [actions](https://api.flutter.dev/flutter/material/AppBar/actions.html)  with  [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html)s which are optionally followed by a  [PopupMenuButton](https://api.flutter.dev/flutter/material/PopupMenuButton-class.html)  for less common operations (sometimes called the "overflow menu").
+
+App bars are typically used in the  [Scaffold.appBar](https://api.flutter.dev/flutter/material/Scaffold/appBar.html)  property, which places the app bar as a fixed-height widget at the top of the screen. For a scrollable app bar, see  [SliverAppBar](https://api.flutter.dev/flutter/material/SliverAppBar-class.html), which embeds an  [AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html)  in a sliver for use in a  [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html).
+
+**Usage:** 
+
+*This sample shows an AppBar with two simple actions. The first action opens a SnackBar, while the second action navigates to a new page.*
+
+    final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>(); 
+    final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));
+    void openPage(BuildContext context) {
+	Navigator.push(context, MaterialPageRoute(
+			builder: (BuildContext context) {
+				return Scaffold(
+				appBar: AppBar(
+				title: const Text('Next page'),
+				),
+				body: const Center(
+					child: Text(
+					'This is the next page',
+					style: TextStyle(fontSize: 24),
+				),
+			 ),
+		  );
+	    },
+	  ));
+	}
+	Widget build(BuildContext context) {
+		return Scaffold(
+	    key: scaffoldKey,
+	    appBar: AppBar(
+			title: const Text('AppBar Demo'),
+			actions: <Widget>[
+	        IconButton(
+				icon: const Icon(Icons.add_alert),
+				tooltip: 'Show Snackbar',
+				onPressed: () {
+			scaffoldKey.currentState.showSnackBar(snackBar);
+			},
+        ),
+        IconButton(
+			icon: const Icon(Icons.navigate_next),
+			tooltip: 'Next page',
+			onPressed: () {
+				openPage(context);
+			},
+		),
+	  ],
+	),
+		body: const Center(
+			child: Text(
+				'This is the home page',
+				style: TextStyle(fontSize: 24),
+				),
+		    ),
+	    );
+    }
+
+## (2) Scaffold
+<center><i>No video data available</i></center>
+
+Implements the basic material design visual layout structure.
+
+This class provides APIs for showing drawers, snack bars, and bottom sheets.
+
+To display a snackbar or a persistent bottom sheet, obtain the  [ScaffoldState](https://api.flutter.dev/flutter/material/ScaffoldState-class.html)  for the current  [BuildContext](https://api.flutter.dev/flutter/widgets/BuildContext-class.html)  via  [Scaffold.of](https://api.flutter.dev/flutter/material/Scaffold/of.html)  and use the  [ScaffoldState.showSnackBar](https://api.flutter.dev/flutter/material/ScaffoldState/showSnackBar.html)  and  [ScaffoldState.showBottomSheet](https://api.flutter.dev/flutter/material/ScaffoldState/showBottomSheet.html)  functions.
+
+**Usage:** 
+*This example shows a Scaffold with a body and FloatingActionButton. The body is a Text]placed in a Center in order to center the text within the Scaffold. The FloatingActionButton is connected to a callback that increments a counter.*
+
+    int _count = 0;
+    Widget build(BuildContext context) {
+		return Scaffold(
+			appBar: AppBar(
+				title: const Text('Sample Code'),
+			),
+		    body: Center(
+				child: Text('You have pressed the button $_count times.')
+		    ),
+		    floatingActionButton: FloatingActionButton(
+				onPressed: () => setState(() => _count++),
+				tooltip: 'Increment Counter',
+				child: const Icon(Icons.add),
+			),
+		);
+	}
+
+
+# Layout widgets
+
+## Single-child layout widgets
+
+ - Align Class- A widget that aligns its child within itself and optionally sizes itself based on the child's size. This widget positions the `child` such that both points are lined up on top of each other.
+
+	*Align widget in this example uses one of the defined constants from Alignment, topRight. This places the FlutterLogo in the top right corner of the parent blue Container.*
+![enter image description here](https://flutter.github.io/assets-for-api-docs/assets/widgets/align_alignment.png)
+
+        Center( 
+	    	child: Container( 
+	    		height: 120.0,
+    			width: 120.0, 
+    		    color: Colors.blue[50], 
+	    		child: 
+			    	align( alignment: Alignment.topRight, 
+	    		    child: FlutterLogo( 
+	    			    size: 60, 
+		    		), 
+	    		), 
+	    	),
+	    )
+
+ - Aspect Ratio 
+ A widget that attempts to size the child to a specific aspect ratio.
+
+
+
+#  Layout widgets
+
+##  Single-child layout widgets
+
+
+
+### (1) Align 
+
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/g2E7yl3MwMk" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+
+ A widget that aligns its child within itself and optionally sizes itself based on the child's size. This widget positions the `child` such that both points are lined up on top of each other.
+
+*Align widget in this example uses one of the defined constants from Alignment, topRight. This places the FlutterLogo in the top right corner of the parent blue Container.*
+
+**Usage:** 
+
+    Center(  
+      child: Container(  
+	      height: 120.0,  
+	      width: 120.0,  
+	      color: Colors.blue[50],  
+		      child: align(  
+		          alignment: Alignment.topRight,  
+			      child: FlutterLogo(  
+			            size: 60,  
+			      ),  
+		      ),  
+      ),  
+    );
+
+
+<hr>
+
+
+### (2) Aspect Ratio
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/XcnP3_mO_Ms" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+A widget that attempts to size the child to a specific aspect ratio.
+The widget first tries the largest width permitted by the layout constraints. The height of the widget is determined by applying the given aspect ratio to the width, expressed as a ratio of width to height.
+
+ - Baseline Class 
+**Usage:**
+
+    AspectRatio(  
+      aspectRatio: 3/2,  
+      child: myWidget(),  
+    );
+
+  <hr>
+
+### (3) Baseline
+
+<center><i>No video data available</i></center>
+
+A widget that positions its child according to the child's baseline.
+This widget shifts the child down such that the child's baseline (or the bottom of the child, if the child has no baseline) is  [baseline](https://api.flutter.dev/flutter/widgets/Baseline/baseline.html)  logical pixels below the top of this box, then sizes this box to contain the child. If  [baseline](https://api.flutter.dev/flutter/widgets/Baseline/baseline.html)  is less than the distance from the top of the child to the baseline of the child, then the child is top-aligned instead.
+ - Center class
+ A widget that centers its child within itself. This widget will be as big as possible if its dimensions are constrained and [widthFactor](https://api.flutter.dev/flutter/widgets/Align/widthFactor.html) and [heightFactor](https://api.flutter.dev/flutter/widgets/Align/heightFactor.html) are null. For example if widthFactor is 2.0 then the width of this widget will always be twice its child's width.
+
+ - ContrainedBox Class
+ A widget that imposes additional constraints on its child.
+For example, if you wanted  [child](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html)  to have a minimum height of 50.0 logical pixels, you could use  `const BoxConstraints(minHeight: 50.0)`  as the  [constraints](https://api.flutter.dev/flutter/widgets/ConstrainedBox/constraints.html).
+
+ *This snippet makes the child widget (a Card with some Text) fill the parent, by applying BoxConstraints.expand constraints:*
+
+       ConstrainedBox( 
+	       constraints: const BoxConstraints.expand(), 
+		   child: const Card(child: Text('Hello World!')), 
+        )
+
+ - Container  class
+ A convenience widget that combines common painting, positioning, and sizing widgets.
+A container first surrounds the child with  [padding](https://api.flutter.dev/flutter/widgets/Container/padding.html)  (inflated by any borders present in the  [decoration](https://api.flutter.dev/flutter/widgets/Container/decoration.html)) and then applies additional  [constraints](https://api.flutter.dev/flutter/widgets/Container/constraints.html)  to the padded extent (incorporating the  `width`  and  `height`  as constraints, if either is non-null). The container is then surrounded by additional empty space described from the  [margin](https://api.flutter.dev/flutter/widgets/Container/margin.html).
+Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The  `width`,  `height`, and  [constraints](https://api.flutter.dev/flutter/widgets/Container/constraints.html)  arguments to the constructor override this.
+![enter image description here](https://flutter.github.io/assets-for-api-docs/assets/widgets/container_a.png)
+
+
+    Center( 
+	    child: Container( 
+		    margin: const EdgeInsets.all(10.0), 
+			color: Colors.amber[600], 
+			width: 48.0, 
+		    height: 48.0, 
+	    ), 
+    )
+This widget shifts the child down such that the child's baseline (or the bottom of the child, if the child has no baseline) is [baseline](https://api.flutter.dev/flutter/widgets/Baseline/baseline.html) logical pixels below the top of this box, then sizes this box to contain the child. If [baseline](https://api.flutter.dev/flutter/widgets/Baseline/baseline.html) is less than the distance from the top of the child to the baseline of the child, then the child is top-aligned instead.
+
+**Usage**
+<center><i>No Usage data available</i></center>
+
+<hr>
+
+### (4) Center
+
+<center><i>No video data available</i></center>
+
+A widget that centers its child within itself. This widget will be as big as possible if its dimensions are constrained and [widthFactor](https://api.flutter.dev/flutter/widgets/Align/widthFactor.html) and [heightFactor](https://api.flutter.dev/flutter/widgets/Align/heightFactor.html) are null. For example if widthFactor is 2.0 then the width of this widget will always be twice its child's width.
+
+**Usage:**
+<center><i>No Usage data available</i></center>
+
+  <hr>
+
+
+### (5) ContrainedBox Class
+
+<center><i>No video data available</i></center>
+
+A widget that imposes additional constraints on its child.
+For example, if you wanted [child](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) to have a minimum height of 50.0 logical pixels, you could use `const BoxConstraints(minHeight: 50.0)` as the [constraints](https://api.flutter.dev/flutter/widgets/ConstrainedBox/constraints.html).
+*This snippet makes the child widget (a Card with some Text) fill the parent, by applying BoxConstraints.expand constraints:*
+
+  **Usage:**
+
+
+    ConstrainedBox(
+    	constraints: const BoxConstraints.expand(),
+    	child: const Card(child: Text('Hello World!')),
+    );
+
+  <hr>
+
+### (6) Container class
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/c1xLMaTUWCY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+A convenience widget that combines common painting, positioning, and sizing widgets.
+A container first surrounds the child with [padding](https://api.flutter.dev/flutter/widgets/Container/padding.html) (inflated by any borders present in the [decoration](https://api.flutter.dev/flutter/widgets/Container/decoration.html)) and then applies additional [constraints](https://api.flutter.dev/flutter/widgets/Container/constraints.html) to the padded extent (incorporating the `width` and `height` as constraints, if either is non-null). The container is then surrounded by additional empty space described from the [margin](https://api.flutter.dev/flutter/widgets/Container/margin.html).
+Containers with no children try to be as big as possible unless the incoming constraints are unbounded, in which case they try to be as small as possible. Containers with children size themselves to their children. The `width`, `height`, and [constraints](https://api.flutter.dev/flutter/widgets/Container/constraints.html) arguments to the constructor override this.
+
+**Usage:**
+
+    Center(
+    	child: Container(
+    		margin: const EdgeInsets.all(10.0),
+    		color: Colors.amber[600],
+    		width: 48.0,
+    		height: 48.0,
+
+    	),
+    );
+
+##  Multi-child layout widgets
+
+### (1) Column Class
+
+<center><i>No video data available</i></center>
+
+A widget that displays its children in a vertical array.
+
+To cause a child to expand to fill the available vertical space, wrap the child in an  [Expanded](https://api.flutter.dev/flutter/widgets/Expanded-class.html)  widget.
+
+The  [Column](https://api.flutter.dev/flutter/widgets/Column-class.html)  widget does not scroll (and in general it is considered an error to have more children in a  [Column](https://api.flutter.dev/flutter/widgets/Column-class.html)  than will fit in the available room). If you have a line of widgets and want them to be able to scroll if there is insufficient room, consider using a  [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html).
+
+For a horizontal variant, see  [Row](https://api.flutter.dev/flutter/widgets/Row-class.html).
+
+If you only have one child, then consider using  [Align](https://api.flutter.dev/flutter/widgets/Align-class.html)  or  [Center](https://api.flutter.dev/flutter/widgets/Center-class.html)  to position the child.
+
+**Usage**
+*This example uses a Column to arrange three widgets vertically, the last being made to fill all the remaining space.*
+
+    Column( 
+	    children: <Widget>[ 
+		    Text('Deliver features faster'), 
+		    Text('Craft beautiful UIs'), 
+		    Expanded( 
+			    child: FittedBox( 
+			    fit: BoxFit.contain, // otherwise the logo will be tiny 
+			    child: const FlutterLogo(), 
+				), 
+			), 
+		], 
+	)
+
+
+### (2) CustomMultiChildLayout Class
+
+<center><i>No video data available</i></center>
+
+A widget that uses a delegate to size and position multiple children.
+
+The delegate can determine the layout constraints for each child and can decide where to position each child. The delegate can also determine the size of the parent, but the size of the parent cannot depend on the sizes of the children.
+
+[CustomMultiChildLayout](https://api.flutter.dev/flutter/widgets/CustomMultiChildLayout-class.html)  is appropriate when there are complex relationships between the size and positioning of a multiple widgets. To control the layout of a single child,  [CustomSingleChildLayout](https://api.flutter.dev/flutter/widgets/CustomSingleChildLayout-class.html)  is more appropriate. For simple cases, such as aligning a widget to one or another edge, the  [Stack](https://api.flutter.dev/flutter/widgets/Stack-class.html)  widget is more appropriate.
+
+Each child must be wrapped in a  [LayoutId](https://api.flutter.dev/flutter/widgets/LayoutId-class.html)  widget to identify the widget for the delegate.
+
+**Usage:**
+<center><i>No Usage data available</i></center>
+
+  <hr>
+
+
+### (3) LayoutBuilder Class
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/IYDVcriKjsw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+Builds a widget tree that can depend on the parent widget's size.
+
+Similar to the  [Builder](https://api.flutter.dev/flutter/widgets/Builder-class.html)  widget except that the framework calls the  [builder](https://api.flutter.dev/flutter/widgets/LayoutBuilder/builder.html)  function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size. The  [LayoutBuilder](https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html)'s final size will match its child's size.
+
+**Usage:**
+<center><i>No Usage data available</i></center>
+
+  <hr>