From 43636881c9cd3fea4c974692b7e834c1c36e42b3 Mon Sep 17 00:00:00 2001
From: ranidu1999 <ranindujay@gmail.com>
Date: Tue, 22 Oct 2019 20:25:18 +0530
Subject: [PATCH 1/2] Add image widget, create icon widget,layout widget

---
 flutter_layout.md | 65 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 flutter_layout.md

diff --git a/flutter_layout.md b/flutter_layout.md
new file mode 100644
index 0000000..4ffbfbb
--- /dev/null
+++ b/flutter_layout.md
@@ -0,0 +1,65 @@
+Add the layout widget to the page
+
+This provides a default banner, background color, and has API for adding drawers, snack bars, and bottom sheets.
+Then you can add the Center widget directly to the body property for the page.This is mostly using in MaterialApp.This code is show how to do it.
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter layout demo',
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Flutter layout demo'),
+        ),
+        body: Center(
+          child: Text('Hello World'),
+        ),
+      ),
+    );
+  }
+}
+
+For a non-Material app, you can add it follow this code.By default a non-Material app doesn’t include an AppBar, title, or background color. If you want these features in a non-Material app, you have to build them yourself.
+This app changes the background color to white and the text to dark grey to mimic a Material app.
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(color: Colors.white),
+      child: Center(
+        child: Text(
+          'Hello World',
+          textDirection: TextDirection.ltr,
+          style: TextStyle(
+            fontSize: 32,
+            color: Colors.black87,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+create an image widget.
+
+Image.asset(
+  'images/lake.jpg',
+  fit: BoxFit.cover,
+),
+
+create an icon widget.
+
+Icon(
+  Icons.star,
+  color: Colors.red[100],
+),
+
+Add the visible widget to the layout.
+A child property if they take a single child – for example, Center or Container
+A children property if they take a list of widgets – for example, Row, Column, ListView, or Stack.
+
+Center(
+  child: Text('Hello World'),
+),
\ No newline at end of file

From cc46e2957ee7bddcb28f0b85f7098258e9a802c2 Mon Sep 17 00:00:00 2001
From: ranidu1999 <ranindujay@gmail.com>
Date: Tue, 22 Oct 2019 20:39:18 +0530
Subject: [PATCH 2/2] Add packing widget,row and columns widgets sizing
 aligning

---
 flutter_layout.md | 60 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/flutter_layout.md b/flutter_layout.md
index 4ffbfbb..e5bc13e 100644
--- a/flutter_layout.md
+++ b/flutter_layout.md
@@ -62,4 +62,62 @@ A children property if they take a list of widgets – for example, Row, Column,
 
 Center(
   child: Text('Hello World'),
-),
\ No newline at end of file
+),
+
+Aligning widgets.
+You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties. For a row, the main axis runs horizontally and the cross axis runs vertically. For a column, the main axis runs vertically and the cross axis runs horizontally.
+
+Row(
+  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+  children: [
+    Image.asset('images/pic1.jpg'),
+    Image.asset('images/pic2.jpg'),
+    Image.asset('images/pic3.jpg'),
+  ],
+);
+
+Columns work the same way as rows. The following example shows a column of 3 images, each is 100 pixels high. The height of the render box (in this case, the entire screen) is more than 300 pixels, so setting the main axis alignment to spaceEvenly divides the free vertical space evenly between, above, and below each image.
+
+Column(
+  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+  children: [
+    Image.asset('images/pic1.jpg'),
+    Image.asset('images/pic2.jpg'),
+    Image.asset('images/pic3.jpg'),
+  ],
+);
+
+Sizing widgets
+
+When a layout is too large to fit a device, a yellow and black striped pattern appears along the affected edge. Here is an example of a row that is too wide.
+Widgets can be sized to fit within a row or column by using the Expanded widget. To fix the previous example where the row of images is too wide for its render box, wrap each image with an Expanded widget.
+
+Row(
+  crossAxisAlignment: CrossAxisAlignment.center,
+  children: [
+    Expanded(
+      child: Image.asset('images/pic1.jpg'),
+    ),
+    Expanded(
+      child: Image.asset('images/pic2.jpg'),
+    ),
+    Expanded(
+      child: Image.asset('images/pic3.jpg'),
+    ),
+  ],
+);
+
+Packing widgets
+By default, a row or column occupies as much space along its main axis as possible, but if you want to pack the children closely together, set its mainAxisSize to MainAxisSize.min. The following example uses this property to pack the star icons together.
+
+Row(
+  mainAxisSize: MainAxisSize.min,
+  children: [
+    Icon(Icons.star, color: Colors.green[500]),
+    Icon(Icons.star, color: Colors.green[500]),
+    Icon(Icons.star, color: Colors.green[500]),
+    Icon(Icons.star, color: Colors.black),
+    Icon(Icons.star, color: Colors.black),
+  ],
+)
+