From bee0aa1dbb8f339c8f2da1a4cfde079e5680d3e3 Mon Sep 17 00:00:00 2001 From: Dilhani Date: Sat, 19 Oct 2019 17:09:33 +0530 Subject: [PATCH 1/4] added widget contents to the Readme.md --- README.md | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) diff --git a/README.md b/README.md index c8a8b48..da0106d 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,90 @@ # Flutter-Layout-Cheat-Sheet This repo includes identified Flutter Layouts which anyone can refer as their layout cheat sheet. + +# Widget catalog + + +## Accessibility widgets + +## 1.ExcludeSemantics class + +A widget that drops all the semantics of its descendants. + +## Properties + +[excluding](https://api.flutter.dev/flutter/widgets/ExcludeSemantics/excluding.html) → [bool](https://api.flutter.dev/flutter/dart-core/bool-class.html) + +Whether this widget is excluded in the semantics tree. + +final + +[child](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) → [Widget](https://api.flutter.dev/flutter/widgets/Widget-class.html) + +The widget below this widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) + +final, inherited + +[hashCode](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) → [int](https://api.flutter.dev/flutter/dart-core/int-class.html) + +The hash code for this object. [[...]](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) + +read-only, inherited + +[key](https://api.flutter.dev/flutter/widgets/Widget/key.html) → [Key](https://api.flutter.dev/flutter/foundation/Key-class.html) + +Controls how one widget replaces another widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/Widget/key.html) + +final, inherited + +[runtimeType](https://api.flutter.dev/flutter/dart-core/Object/runtimeType.html) → [Type](https://api.flutter.dev/flutter/dart-core/Type-class.html) + +A representation of the runtime type of the object. + +read-only, inherited + + +## Operators + +[operator ==](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html)(dynamic other) → [bool](https://api.flutter.dev/flutter/dart-core/bool-class.html) + +The equality operator. [[...]](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html) + +inherited + +## 2.MergeSemantics class + +A widget that merges the semantics of its descendants + +## Properties + +[child](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) → [Widget](https://api.flutter.dev/flutter/widgets/Widget-class.html) + +The widget below this widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) + +final, inherited + +[hashCode](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) → [int](https://api.flutter.dev/flutter/dart-core/int-class.html) + +The hash code for this object. [[...]](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) + +read-only, inherited + +[key](https://api.flutter.dev/flutter/widgets/Widget/key.html) → [Key](https://api.flutter.dev/flutter/foundation/Key-class.html) + +Controls how one widget replaces another widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/Widget/key.html) + +final, inherited + +[runtimeType](https://api.flutter.dev/flutter/dart-core/Object/runtimeType.html) → [Type](https://api.flutter.dev/flutter/dart-core/Type-class.html) + +A representation of the runtime type of the object. + +read-only, inherited + +## Operators + +[operator ==](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html)(dynamic other) → [bool](https://api.flutter.dev/flutter/dart-core/bool-class.html) + +The equality operator. [[...]](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html) + +inherited \ No newline at end of file From 9a3c59a444a5a46df9498a1f07e09e3447ed64e5 Mon Sep 17 00:00:00 2001 From: Dilhani Date: Sat, 19 Oct 2019 17:12:46 +0530 Subject: [PATCH 2/4] added widget contents to the Readme.md --- README.md | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/README.md b/README.md index da0106d..ce5a49b 100644 --- a/README.md +++ b/README.md @@ -16,32 +16,22 @@ A widget that drops all the semantics of its descendants. Whether this widget is excluded in the semantics tree. -final - [child](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) → [Widget](https://api.flutter.dev/flutter/widgets/Widget-class.html) The widget below this widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) -final, inherited - [hashCode](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) → [int](https://api.flutter.dev/flutter/dart-core/int-class.html) The hash code for this object. [[...]](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) -read-only, inherited - [key](https://api.flutter.dev/flutter/widgets/Widget/key.html) → [Key](https://api.flutter.dev/flutter/foundation/Key-class.html) Controls how one widget replaces another widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/Widget/key.html) -final, inherited - [runtimeType](https://api.flutter.dev/flutter/dart-core/Object/runtimeType.html) → [Type](https://api.flutter.dev/flutter/dart-core/Type-class.html) A representation of the runtime type of the object. -read-only, inherited - ## Operators @@ -49,8 +39,6 @@ read-only, inherited The equality operator. [[...]](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html) -inherited - ## 2.MergeSemantics class A widget that merges the semantics of its descendants @@ -61,30 +49,20 @@ A widget that merges the semantics of its descendants The widget below this widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/SingleChildRenderObjectWidget/child.html) -final, inherited - [hashCode](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) → [int](https://api.flutter.dev/flutter/dart-core/int-class.html) The hash code for this object. [[...]](https://api.flutter.dev/flutter/dart-core/Object/hashCode.html) -read-only, inherited - [key](https://api.flutter.dev/flutter/widgets/Widget/key.html) → [Key](https://api.flutter.dev/flutter/foundation/Key-class.html) Controls how one widget replaces another widget in the tree. [[...]](https://api.flutter.dev/flutter/widgets/Widget/key.html) -final, inherited - [runtimeType](https://api.flutter.dev/flutter/dart-core/Object/runtimeType.html) → [Type](https://api.flutter.dev/flutter/dart-core/Type-class.html) A representation of the runtime type of the object. -read-only, inherited - ## Operators [operator ==](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html)(dynamic other) → [bool](https://api.flutter.dev/flutter/dart-core/bool-class.html) The equality operator. [[...]](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html) - -inherited \ No newline at end of file From 285f731c323029eadcfb7341a6827fe813bc7db8 Mon Sep 17 00:00:00 2001 From: Dilhani Date: Mon, 21 Oct 2019 07:20:54 +0530 Subject: [PATCH 3/4] added more widget contents to the Readme.md --- README.md | 174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) diff --git a/README.md b/README.md index ce5a49b..4b41be1 100644 --- a/README.md +++ b/README.md @@ -66,3 +66,177 @@ A representation of the runtime type of the object. [operator ==](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html)(dynamic other) → [bool](https://api.flutter.dev/flutter/dart-core/bool-class.html) The equality operator. [[...]](https://api.flutter.dev/flutter/dart-core/Object/operator_equals.html) +# Scrolling widgets + +## 1.CustomScrollView class + +A [ScrollView](https://api.flutter.dev/flutter/widgets/ScrollView-class.html) that creates custom scroll effects using slivers. + +This sample code shows a scroll view that contains a flexible pinned app bar, a grid, and an infinite list. + +_assignment_ + +```dart +CustomScrollView( + slivers: [ + const SliverAppBar( + pinned: true, + expandedHeight: 250.0, + flexibleSpace: FlexibleSpaceBar( + title: Text('Demo'), + ), + ), + SliverGrid( + gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( + maxCrossAxisExtent: 200.0, + mainAxisSpacing: 10.0, + crossAxisSpacing: 10.0, + childAspectRatio: 4.0, + ), + delegate: SliverChildBuilderDelegate( + (BuildContext context, int index) { + return Container( + alignment: Alignment.center, + color: Colors.teal[100 * (index % 9)], + child: Text('Grid Item $index'), + ); +``` +### Accessibility +A [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) can allow Talkback/VoiceOver to make announcements to the user when the scroll state changes. + +## 2.GridView class +A scrollable, 2D array of widgets. +The main axis direction of a grid is the direction in which it scrolls (the [scrollDirection](https://api.flutter.dev/flutter/widgets/ScrollView/scrollDirection.html)). + +### Transitioning to [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) + +A [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) is basically a [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) with a single [SliverGrid](https://api.flutter.dev/flutter/widgets/SliverGrid-class.html) in its [CustomScrollView.slivers](https://api.flutter.dev/flutter/widgets/CustomScrollView/slivers.html) property. + +If [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) is no longer sufficient, for example because the scroll view is to have both a grid and a list, or because the grid is to be combined with a [SliverAppBar](https://api.flutter.dev/flutter/material/SliverAppBar-class.html), etc, it is straight-forward to port code from using [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) to using [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) directly + +[_ +link_](https://api.flutter.dev/flutter/# "Copy link to clipboard") + +Sample + +This example demonstrates how to create a [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) with two columns. The children are spaced apart using the `crossAxisSpacing` and `mainAxisSpacing` properties. + +![A screenshot of a GridView](https://flutter.github.io/assets-for-api-docs/assets/widgets/grid_view.png) + +_assignment_ + +```dart +GridView.count( + primary: false, + padding: const EdgeInsets.all(20), + crossAxisSpacing: 10, + mainAxisSpacing: 10, + crossAxisCount: 2, + children: [ + Container( + padding: const EdgeInsets.all(8), + child: const Text('He\'d have you all unravel at the'), + color: Colors.teal[100], + ), + Container( + padding: const EdgeInsets.all(8), + child: const Text('Heed not the rabble'), + color: Colors.teal[200], + ), + Container( + padding: const EdgeInsets.all(8), + child: const Text('Sound of screams but the'), + color: Colors.teal[300], + ), + Container( + padding: const EdgeInsets.all(8), + child: const Text('Who scream'), + color: Colors.teal[400], + ), + Container( + padding: const EdgeInsets.all(8), + child: const Text('Revolution is coming...'), + color: Colors.teal[500], + ), + Container( + padding: const EdgeInsets.all(8), + child: const Text('Revolution, they...'), + color: Colors.teal[600], + ), + ], +) +``` + +[_link_](https://api.flutter.dev/flutter/# "Copy link to clipboard") + +Sample + +This example shows how to create the same grid as the previous example using a [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) and a [SliverGrid](https://api.flutter.dev/flutter/widgets/SliverGrid-class.html). + +![A screenshot of a CustomScrollView with a SliverGrid](https://flutter.github.io/assets-for-api-docs/assets/widgets/grid_view_custom_scroll.png) + +_assignment_ + +```dart +CustomScrollView( + primary: false, + slivers: [ + SliverPadding( + padding: const EdgeInsets.all(20), + sliver: SliverGrid.count( + crossAxisSpacing: 10, + mainAxisSpacing: 10, + crossAxisCount: 2, + children: [ + Container( + padding: const EdgeInsets.all(8), + child: const Text('He\'d have you all unravel at the'), + color: Colors.green[100], + ), + Container( + padding: const EdgeInsets.all(8), + child: const Text('Heed not the rabble'), + color: Colors.green[200], + ), + Container( + padding: const EdgeInsets.all(8), + child: const Text('Sound of screams but the'), + color: Colors.green[300], +``` + +## 3.ListView class + +A scrollable list of widgets arranged linearly. + +[_link_](https://api.flutter.dev/flutter/widgets/ListView-class.html#widgets.ListView.1 "Copy link to clipboard") + +Sample + +This example uses the default constructor for [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html) which takes an explicit [List](https://api.flutter.dev/flutter/dart-core/List-class.html) of children. This [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html)'s children are made up of [Container](https://api.flutter.dev/flutter/widgets/Container-class.html)s with [Text](https://api.flutter.dev/flutter/widgets/Text-class.html). + +![A ListView of 3 amber colored containers with sample text.](https://flutter.github.io/assets-for-api-docs/assets/widgets/list_view.png) + +_assignment_ + +```dart +ListView( + padding: const EdgeInsets.all(8), + children: [ + Container( + height: 50, + color: Colors.amber[600], + child: const Center(child: Text('Entry A')), + ), + Container( + height: 50, + color: Colors.amber[500], + child: const Center(child: Text('Entry B')), + ), + Container( + height: 50, + color: Colors.amber[100], + child: const Center(child: Text('Entry C')), + ), + ], +) +``` \ No newline at end of file From 65c679930083c6d60d64c93d2e6ec4ffc41efbf4 Mon Sep 17 00:00:00 2001 From: Dilhani Date: Mon, 21 Oct 2019 07:23:38 +0530 Subject: [PATCH 4/4] added more widget contents to the Readme.md --- README.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/README.md b/README.md index 4b41be1..6924b3f 100644 --- a/README.md +++ b/README.md @@ -74,7 +74,6 @@ A [ScrollView](https://api.flutter.dev/flutter/widgets/ScrollView-class.html) This sample code shows a scroll view that contains a flexible pinned app bar, a grid, and an infinite list. -_assignment_ ```dart CustomScrollView( @@ -114,9 +113,6 @@ A [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) is b If [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) is no longer sufficient, for example because the scroll view is to have both a grid and a list, or because the grid is to be combined with a [SliverAppBar](https://api.flutter.dev/flutter/material/SliverAppBar-class.html), etc, it is straight-forward to port code from using [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) to using [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) directly -[_ -link_](https://api.flutter.dev/flutter/# "Copy link to clipboard") - Sample This example demonstrates how to create a [GridView](https://api.flutter.dev/flutter/widgets/GridView-class.html) with two columns. The children are spaced apart using the `crossAxisSpacing` and `mainAxisSpacing` properties. @@ -167,7 +163,6 @@ GridView.count( ) ``` -[_link_](https://api.flutter.dev/flutter/# "Copy link to clipboard") Sample @@ -175,7 +170,6 @@ This example shows how to create the same grid as the previous example using a ![A screenshot of a CustomScrollView with a SliverGrid](https://flutter.github.io/assets-for-api-docs/assets/widgets/grid_view_custom_scroll.png) -_assignment_ ```dart CustomScrollView( @@ -207,16 +201,12 @@ CustomScrollView( ## 3.ListView class A scrollable list of widgets arranged linearly. - -[_link_](https://api.flutter.dev/flutter/widgets/ListView-class.html#widgets.ListView.1 "Copy link to clipboard") - Sample This example uses the default constructor for [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html) which takes an explicit [List](https://api.flutter.dev/flutter/dart-core/List-class.html) of children. This [ListView](https://api.flutter.dev/flutter/widgets/ListView-class.html)'s children are made up of [Container](https://api.flutter.dev/flutter/widgets/Container-class.html)s with [Text](https://api.flutter.dev/flutter/widgets/Text-class.html). ![A ListView of 3 amber colored containers with sample text.](https://flutter.github.io/assets-for-api-docs/assets/widgets/list_view.png) -_assignment_ ```dart ListView(