## Flutter multiple child layout widgets /n/n**1) Row** /n/nRow is a layout widget in flutter which aligns its children horizontally. It can have multiple child widgets. Child widget can also be a Row or Column widget. Children of Row widget are not scrollable. If you want scrollable widgets then use ListView. If we add a large number of children in Row widget which can not be fit in Row then we see an overflow message. /n/nConstructor: /n/n``` /nRow({/n/tKey key,/n/tMainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,/n/tMainAxisSize mainAxisSize: MainAxisSize.max,/n/tCrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,/n/tTextDirection textDirection,/n/tVerticalDirection verticalDirection: VerticalDirection.down,/n/tTextBaseline textBaseline,/n/tList children: const []/n}) /n``` /n/nmainAxisAlignment property runs horizontally and crossAxisAlignment property runs vertically. /n/n![Output](/assets/flutter/logo1.png) /n/nHere is different properties explained for main axis and cross axis alignment: /n/n**start**: it will align children at the start of the axis direction. /n/n**center**: It will align children at the center of the axis. /n/n**end**: It will align children at the end of the axis. /n/n**spaceBetween**: It will add space between children evenly. /n/n**spaceAround**:It will add the space between the children evenly and half of that space before and after the first and last children widget. /n/n**spaceEvenly**: It will add the space between the children evenly and before and after the first and last children widget. /n/n**2) Column** /n/nColumn is a layout widget in flutter which aligns its children vertically. It can have multiple child widgets. Child widget can also be a Row or Column widget. Children of Column widget are not scrollable. If you want scrollable widgets then use ListView. If we add a large number of children in Column widget which can not be fit in column then we see an overflow message. /n/nConstructor: /n/n``` /nColumn(/n/t{/n/t/tKey key,/n/t/tMainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,/n/t/tMainAxisSize mainAxisSize: MainAxisSize.max,/n/t/tCrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,/n/t/tTextDirection textDirection,/n/t/tVerticalDirection verticalDirection: VerticalDirection.down,/n/t/tTextBaseline textBaseline,/n/t/tList children: const []/n/t}/n) /n``` /n/n![Output](/assets/flutter/logo1.png) /n/nHere is different properties explained for main axis and cross axis alignment: /n/n**start**: it will align children at the start of the axis direction. /n/n**center**: It will align children at the center of the axis. /n/n**end**: It will align children at the end of the axis. /n/n**spaceBetween**: It will add space between children evenly. /n/n**spaceAround**: It will add the space between the children evenly and half of that space before and after the first and last children widget. /n/n**spaceEvenly**: It will add the space between the children evenly and before and after the first and last children widget. /n/n**3) Expanded** /n/nExpanded works with Flex/Flexbox layout and is great for distributing space between multiple items. It expands the child of the Row, Column or Flex widget such that the child fills maximum available space. /n/nExample: /n/n``` /nCenter(/n/tchild: Row(/n/t/tchildren: [/n/t/t/tContainer(/n/t/t/t/tcolor: Colors.blue,/n/t/t/t/theight: 100,/n/t/t/t/twidth: 100,/n/t/t/t),/n/t/t/tExpanded(/n/t/t/t/tchild: Container(/n/t/t/t/t/tcolor: Colors.orange,/n/t/t/t/t/theight: 100,/n/t/t/t/t),/n/t/t/t),/n/t/t/tContainer(/n/t/t/t/tcolor: Colors.blue,/n/t/t/t/theight: 100,/n/t/t/t/twidth: 100,/n/t/t/t),/n/t/t],/n/t),/n) /n``` /n/nIf multiple children are expanded, the available space is divided among them according to the flex factor. /n/nExample: /n/n``` /nCenter(/n/tchild: Row(/n/t/tchildren: [/n/t/t/tExpanded(/n/t/t/t/tflex: 2,/n/t/t/t/tchild: Container(/n/t/t/t/t/tcolor: Colors.blue,/n/t/t/t/t/theight: 100,/n/t/t/t/t/twidth: 100,/n/t/t/t/t),/n/t/t/t),/n/t/t/tExpanded(/n/t/t/t/tflex: 3,/n/t/t/t/tchild: Container(/n/t/t/t/t/tcolor: Colors.orange,/n/t/t/t/t/theight: 100,/n/t/t/t/t/twidth: 100,/n/t/t/t/t),/n/t/t/t),/n/t/t/tExpanded(/n/t/t/t/tflex: 4,/n/t/t/t/tchild: Container(/n/t/t/t/t/tcolor: Colors.blue,/n/t/t/t/t/theight: 100,/n/t/t/t/t/twidth: 100,/n/t/t/t/t),/n/t/t/t),/n/t/t],/n/t),/n) /n``` /n/n**4) ListView** /n/nA scrollable list of widgets arranged linearly. It shows children one by one in a scrollable direction. when we want to create a list recursively without writing code again and again then ListView.builder is used instead of ListView. /n/nConstructor of ListView: /n/n``` /nListView({/n/tKey key,/n/tAxis scrollDirection: Axis.vertical,/n/tbool reverse: false,/n/tScrollController controller,/n/tbool primary,/n/tScrollPhysics physics,/n/tbool shrinkWrap: false,/n/tEdgeInsetsGeometry padding,/n/tdouble itemExtent,/n/tbool addAutomaticKeepAlives: true,/n/tbool addRepaintBoundaries: true,/n/tbool addSemanticIndexes: true,/n/tdouble cacheExtent,/n/tList children: const [],/n/tint semanticChildCount,/n/tDragStartBehavior dragStartBehavior: DragStartBehavior.start,/n/tScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,/n/tString restorationId,/n/tClip clipBehavior: Clip.hardEdge,/n}) /n``` /n/nExample of ListView: /n/n``` /nListView(/n/tchildren: [/n/t/tText('Sunday'),/n/t/tText('Monday'),/n/t/tText('Tuesday'),/n/t],/n) /n``` /n/nThe above constructor is useful for a small size of list because it takes List as children. To work with lists having a large number of items, we need to use ListView.builder. The difference between ListView and ListView.builder is that ListView creates all items at once whereas ListView.builder creates items when they are scrolled onto the screen. /n/nConstructor of ListView.builder: /n/n``` /nListView.builder({/n/tKey key,/n/tAxis scrollDirection: Axis.vertical,/n/tbool reverse: false,/n/tScrollController controller,/n/tbool primary,/n/tScrollPhysics physics,/n/tbool shrinkWrap: false,/n/tEdgeInsetsGeometry padding,/n/tdouble itemExtent,/n/t@required IndexedWidgetBuilder itemBuilder,/n/tint itemCount,/n/tbool addAutomaticKeepAlives: true,/n/tbool addRepaintBoundaries: true,/n/tbool addSemanticIndexes: true,/n/tdouble cacheExtent,/n/tint semanticChildCount,/n/tDragStartBehavior dragStartBehavior: DragStartBehavior.start,/n/tScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,/n/tString restorationId,/n/tClip clipBehavior: Clip.hardEdge,/n}) /n``` /n/nThe ListView.builder constructor takes an IndexedWidgetBuilder, which builds the children on demand. /n/nExample: /n/n``` /nfinal List entries = ['A', 'B', 'C'];/n/n ListView.builder(/n/titemCount: entries.length,/n/titemBuilder: (BuildContext context, int index) {/n/t/treturn Text('${entries[index]}');/n/t}/n) /n``` /n/nSimilarly ListView.separated is useful when you want to add a separator in between children of the List. /n/nConstructor of ListView.separated: /n/n``` /nListView.separated({/n/tKey key,/n/tAxis scrollDirection: Axis.vertical,/n/tbool reverse: false,/n/tScrollController controller,/n/tbool primary,/n/tScrollPhysics physics,/n/tbool shrinkWrap: false,/n/tEdgeInsetsGeometry padding,/n/t@required IndexedWidgetBuilder itemBuilder,/n/t@required IndexedWidgetBuilder separatorBuilder,/n/t@required int itemCount,/n/tbool addAutomaticKeepAlives: true,/n/tbool addRepaintBoundaries: true,/n/tbool addSemanticIndexes: true,/n/tdouble cacheExtent,/n/tDragStartBehavior dragStartBehavior: DragStartBehavior.start,/n/tScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,/n/tString restorationId,/n/tClip clipBehavior: Clip.hardEdge,/n}) /n``` /n/nThe ListView.separated constructor takes two IndexedWidgetBuilders: itemBuilder builds child items on demand, and separatorBuilder similarly builds separator children which appear in between the child items. This constructor is appropriate for list views with a fixed number of children. /n/nExample: /n/n``` /nfinal List entries = ['A', 'B', 'C'];/n ListView.separated(/n /titemCount: entries.length,/n /titemBuilder: (BuildContext context, int index) {/n /t/treturn Container(/n /t/t/theight: 50,/n /t/t/tcolor: Colors.orange,/n /t/t/tchild: Center(child: Text('${entries[index]}')),/n /t/t);/n /t},/n /tseparatorBuilder: (BuildContext context, int index) => const Divider(),/n ); /n``` /n/n**Horizontal ListView:** /n/nTo create horizontal ListView, specify scrollDirection as horizontal. /n/nExample: /n/n``` /nListView.builder(/n /tscrollDirection: Axis.horizontal,/n /titemBuilder: (context, index) {/n /t/treturn Container(/n /t/t/tmargin: const EdgeInsets.symmetric(horizontal: 1.0),/n /t/t/tcolor: Colors.tealAccent,/n /t/t/tchild: Text('$index'),/n /t/t);/n /t},/n ) /n``` /n/n**5) GridView** /n/nGridView is a scrollable 2D array of widgets. The main axis direction of a grid is the direction in which it scrolls. We can define the direction only in which it can scroll using scrollDirection property. /n/nThe most frequently used grid layout is GridView.count /n/n**i) GridView.count:** /n/nConstructor of GridView.count: /n/n``` /nGridView.count({/n /tKey key,/n /tAxis scrollDirection: Axis.vertical,/n /tbool reverse: false,/n /tScrollController controller,/n /tbool primary,/n /tScrollPhysics physics,/n /tbool shrinkWrap: false,/n /tEdgeInsetsGeometry padding,/n /t@required int crossAxisCount,/n /tdouble mainAxisSpacing: 0.0,/n /tdouble crossAxisSpacing: 0.0,/n /tdouble childAspectRatio: 1.0,/n /tbool addAutomaticKeepAlives: true,/n /tbool addRepaintBoundaries: true,/n /tbool addSemanticIndexes: true,/n /tdouble cacheExtent,/n /tList children: const [],/n /tint semanticChildCount,/n /tDragStartBehavior dragStartBehavior: DragStartBehavior.start,/n /tScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,/n /tString restorationId,/n /tClip clipBehavior: Clip.hardEdge/n }) /n``` /n/nCreates a scrollable, 2D array of widgets with a fixed number of tiles in the cross axis. Some of the important properties are: /n/n**scrollDirection**:It specifies the direction in which GridView will scroll. By default, it scrolls in a vertical direction. /n/n**shrinkWrap**:If the scroll view does not shrink wrap, then the scroll view will expand to the maximum allowed size in the scrollDirection. If the scroll view has unbounded constraints in the scrollDirection, then shrinkWrap must be true. /n/n**crossAxisCount**:It specifies the number of columns in a grid view. /n/n**crossAxisSpacing**:It specifies the spacing between each child widget listed in the cross axis. /n/n**mainAxisSpacing**:It specifies the number of pixels between each child widget listed in the main axis. /n/nExample: /n/n``` /nGridView.count(/n /tcrossAxisCount: 2,/n /tchildren: List.generate(10, (index) {/n /t/treturn Container(/n /t/t/tchild: Card(/n /t/t/t/tcolor: Colors.blue,/n /t/t/t),/n /t/t);/n /t}),/n ) /n``` /n/n**ii) GridView.builder** /n/nConstructor: /n/n``` /nGridView.builder(/n /t{Key key,/n /tAxis scrollDirection: Axis.vertical,/n /tbool reverse: false,/n /tScrollController controller,/n /tbool primary,/n /tScrollPhysics physics,/n /tbool shrinkWrap: false,/n /tEdgeInsetsGeometry padding,/n /t@required SliverGridDelegate gridDelegate,/n /t@required IndexedWidgetBuilder itemBuilder,/n /tint itemCount,/n /tbool addAutomaticKeepAlives: true,/n /tbool addRepaintBoundaries: true,/n /tbool addSemanticIndexes: true,/n /tdouble cacheExtent,/n /tint semanticChildCount,/n /tDragStartBehavior dragStartBehavior: DragStartBehavior.start,/n /tScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,/n /tString restorationId,/n /tClip clipBehavior: Clip.hardEdge}/n ) /n``` /n/nCreates a scrollable, 2D array of widgets that are created on demand. This constructor is appropriate for grid views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. /n/n**itemCount**:It specifies the item count. /n/n**gridDelegate**:It determines the grid or its divider. Its argument should not be null. /n/n**itemBuilder**:It is used to create items that will be displayed on the grid view. It will be called only when the indices >= 0 and indices < itemCount. /n/nExample: /n/n``` /nfinal List entries = ['A', 'B', 'C', 'D', 'E', 'F'];/n GridView.builder(/n /titemCount: entries.length,/n /tgridDelegate: SliverGridDelegateWithFixedCrossAxisCount(/n /t/tcrossAxisCount: 2,/n /t),/n /titemBuilder: (BuildContext context, int index) {/n /t/treturn Text('${entries[index]}');/n /t},/n ) /n``` /n/n**iii) GridView.extent()** /n/nCreates a scrollable, 2D array of widgets with tiles that each have a maximum cross-axis extent. /n/nConstructor: /n/n``` /nGridView.extent(/n /t{Key key,/n /tAxis scrollDirection: Axis.vertical,/n /tbool reverse: false,/n /tScrollController controller,/n /tbool primary,/n /tScrollPhysics physics,/n /tbool shrinkWrap: false,/n /tEdgeInsetsGeometry padding,/n /t@required double maxCrossAxisExtent,/n /tdouble mainAxisSpacing: 0.0,/n /tdouble crossAxisSpacing: 0.0,/n /tdouble childAspectRatio: 1.0,/n /tbool addAutomaticKeepAlives: true,/n /tbool addRepaintBoundaries: true,/n /tbool addSemanticIndexes: true,/n /tdouble cacheExtent,/n /tList children: const [],/n /tint semanticChildCount,/n /tDragStartBehavior dragStartBehavior: DragStartBehavior.start,/n /tScrollViewKeyboardDismissBehavior keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,/n /tString restorationId,/n /tClip clipBehavior: Clip.hardEdge}/n ) /n``` /n/nExample: /n/n``` /nGridView.extent(/n /tprimary: false,/n /tpadding: const EdgeInsets.all(16),/n /tcrossAxisSpacing: 10,/n /tmainAxisSpacing: 10,/n /tmaxCrossAxisExtent: 200.0,/n /tchildren: [/n /t/tContainer(/n /t/t/tpadding: const EdgeInsets.all(8),/n /t/t/tchild: const Text('A', style: TextStyle(fontSize: 20)),/n /t/t/tcolor: Colors.orange,/n /t/t),/n /t/tContainer(/n /t/t/tpadding: const EdgeInsets.all(8),/n /t/t/tchild: const Text('B', style: TextStyle(fontSize: 20)),/n /t/t/tcolor: Colors.blue,/n /t/t),/n /t/tContainer(/n /t/t/tpadding: const EdgeInsets.all(8),/n /t/t/tchild: const Text('C', style: TextStyle(fontSize: 20)),/n /t/t/tcolor: Colors.blue,/n /t/t),/n /t/tContainer(/n /t/t/tpadding: const EdgeInsets.all(8),/n /t/t/tchild: const Text('D', style: TextStyle(fontSize: 20)),/n /t/t/tcolor: Colors.orange,/n /t/t),/n /t],/n ) /n``` /n/n**6) Stack** /n/nStack is useful when you want to overlap multiple children in a single screen. Each member of a Stack widget is either positioned or non-positioned. /n/n**i) Positioned Widget:** /n/nA child of Stack wrapped with Positioned Widget that has at least one non-null property. It works with a combination of parameters - vertical (top, bottom, height) and horizontal (left, right and width) to position the widgets within the Stack. If not positioned widget, Align Widget is used to position the member of Stack. /n/n**ii) Non-positioned Widget:** /n/nIf Stack's member is not wrapped with Align or Positioned Widget, then it is considered a Non-positioned widget. Non-positioned widgets end up on the screen based on Stack's alignment property. By default, the top left corner on the screen. /n/nExample: /n/n``` /nStack(/n /talignment: Alignment.topLeft,/n /tchildren: [/n /t/tPositioned(/n /t/t/ttop: 100,/n /t/t/tleft: 100,/n /t/t/tchild: Container(/n /t/t/t/theight: 300,/n /t/t/t/twidth: 300,/n /t/t/t/tchild: Center(child: Text('Positioned')),/n /t/t/t/tcolor: Colors.orange,/n /t/t/t),/n /t/t),/n /t/tAlign(/n /t/t/talignment: Alignment.topCenter,/n /t/t/tchild: Container(/n /t/t/t/theight: 300,/n /t/t/t/twidth: 300,/n /t/t/t/tchild: Center(child: Text('Aligned')),/n /t/t/t/tcolor: Colors.red,/n /t/t/t),/n /t/t),/n /t/tContainer(/n /t/t/theight: 100,/n /t/t/twidth: 100,/n /t/t/tchild: Center(child: Text('Non-Positioned')),/n /t/t/tcolor: Colors.blue,/n /t/t),/n /t],/n ) /n``` /n/nOutput: /n/n![Output](/assets/flutter/logo1.png)

How to create a new flutter project?