From 421ed571a5afdb8e749d12770f44227858e4d730 Mon Sep 17 00:00:00 2001
From: "[imashi921]" <[imashi921a@gmail.com]>
Date: Sat, 19 Oct 2019 15:41:48 +0530
Subject: [PATCH 1/4] added content to the read.md
---
README.md | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 61 insertions(+)
diff --git a/README.md b/README.md
index c8a8b48..1c0a165 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,63 @@
# Flutter-Layout-Cheat-Sheet
This repo includes identified Flutter Layouts which anyone can refer as their layout cheat sheet.
+
+# 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.*
+
+
+ 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.
+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
+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.
+
+
+
+ Center(
+ child: Container(
+ margin: const EdgeInsets.all(10.0),
+ color: Colors.amber[600],
+ width: 48.0,
+ height: 48.0,
+ ),
+ )
+
From 0f3231031fafe8d1f3783b78f55d3905327420e2 Mon Sep 17 00:00:00 2001
From: "[imashi921]" <[imashi921a@gmail.com]>
Date: Sat, 19 Oct 2019 21:14:43 +0530
Subject: [PATCH 2/4] styled previous content
---
README.md | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 113 insertions(+), 4 deletions(-)
diff --git a/README.md b/README.md
index 1c0a165..f5a3f11 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,3 @@
-# Flutter-Layout-Cheat-Sheet
-This repo includes identified Flutter Layouts which anyone can refer as their layout cheat sheet.
-
# Layout widgets
## Single-child layout widgets
@@ -26,9 +23,66 @@ This repo includes identified Flutter Layouts which anyone can refer as their la
- Aspect Ratio
A widget that attempts to size the child to a specific aspect ratio.
+
+
+
+# Layout widgets
+
+## Single-child layout widgets
+
+
+
+### (1) Align
+
+
+
+
+
+ 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,
+ ),
+ ),
+ ),
+ );
+
+
+
+
+
+### (2) Aspect Ratio
+
+
+
+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(),
+ );
+
+
+
+### (3) Baseline
+
+
No video data available
+
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
@@ -50,7 +104,7 @@ For example, if you wanted [child](https://api.flutter.dev/flutter/widgets/Sing
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.
-
+
Center(
child: Container(
@@ -60,4 +114,59 @@ Containers with no children try to be as big as possible unless the incoming con
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**
+
No Usage data available
+
+
+
+### (4) Center
+
+
No video data available
+
+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:**
+
No Usage data available
+
+
+
+
+### (5) ContrainedBox Class
+
+
No video data available
+
+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!')),
+ );
+
+
+
+### (6) 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.
+
+**Usage:**
+
+ Center(
+ child: Container(
+ margin: const EdgeInsets.all(10.0),
+ color: Colors.amber[600],
+ width: 48.0,
+ height: 48.0,
+ ),
+ );
\ No newline at end of file
From 40fbd1c433ce4e30b1ea361f735ea994e666d033 Mon Sep 17 00:00:00 2001
From: "[imashi921]" <[imashi921a@gmail.com]>
Date: Sat, 19 Oct 2019 21:35:18 +0530
Subject: [PATCH 3/4] pick affc3bb added more widget layout content
---
README.md | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 74 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index f5a3f11..77e08be 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,8 @@
+<<<<<<< HEAD
+=======
+# Flutter-Layout-Cheat-Sheet
+This repo includes identified Flutter Layouts which anyone can refer as their layout cheat sheet.
+>>>>>>> affc3bb... added more widget layout content
# Layout widgets
## Single-child layout widgets
@@ -169,4 +174,72 @@ Containers with no children try to be as big as possible unless the incoming con
height: 48.0,
),
- );
\ No newline at end of file
+<<<<<<< HEAD
+ );
+=======
+ );
+
+## Multi-child layout widgets
+
+### (1) Column Class
+
+
No video data available
+
+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: [
+ 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
+
+
No video data available
+
+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:**
+
No Usage data available
+
+
+
+
+### (3) LayoutBuilder Class
+
+
+
+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:**
+
No Usage data available
+
+
+>>>>>>> affc3bb... added more widget layout content
From fb7c95cc0c413e90e9b315dfdd953d05193aa909 Mon Sep 17 00:00:00 2001
From: "[imashi921]" <[imashi921a@gmail.com]>
Date: Sun, 20 Oct 2019 07:31:22 +0530
Subject: [PATCH 4/4] added basic widget content
---
README.md | 103 +++++++++++++++++++++++++++++++++++++++++++++++++-----
1 file changed, 95 insertions(+), 8 deletions(-)
diff --git a/README.md b/README.md
index 77e08be..8bf6f0b 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,99 @@
-<<<<<<< HEAD
-=======
# Flutter-Layout-Cheat-Sheet
This repo includes identified Flutter Layouts which anyone can refer as their layout cheat sheet.
->>>>>>> affc3bb... added more widget layout content
+
+# Basic widgets
+
+## (1) Appbar
+
No video data available
+
+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 scaffoldKey = GlobalKey();
+ 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: [
+ 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
+
No video data available
+
+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
@@ -174,9 +265,6 @@ Containers with no children try to be as big as possible unless the incoming con
height: 48.0,
),
-<<<<<<< HEAD
- );
-=======
);
## Multi-child layout widgets
@@ -241,5 +329,4 @@ Similar to the [Builder](https://api.flutter.dev/flutter/widgets/Builder-class.
**Usage:**
No Usage data available
-
->>>>>>> affc3bb... added more widget layout content
+
\ No newline at end of file