{"id":2081,"date":"2022-04-07T18:55:12","date_gmt":"2022-04-07T18:55:12","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2081"},"modified":"2022-04-07T18:55:12","modified_gmt":"2022-04-07T18:55:12","slug":"row-widget","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/row-widget\/","title":{"rendered":"Row Widget"},"content":{"rendered":"\n<p><strong>This widget arranges its children in a horizontal direction on the screen<\/strong>. In other words, it will expect child widgets in a horizontal array. If the child widgets need to fill the available horizontal space, we must wrap the children widgets in an Expanded widget.<\/p>\n\n\n\n<p>A row widget does&nbsp;<strong>not appear scrollable<\/strong>&nbsp;because it displays the widgets within the visible view. So it is considered wrong if we have more children in a row which will not fit in the available space. If we want to make a scrollable list of row widgets, we need to use the ListView widget.<\/p>\n\n\n\n<p>We can control how a row widget aligns its children based on our choice using the property&nbsp;<strong>crossAxisAlignment<\/strong>&nbsp;and&nbsp;<strong>mainAxisAlignment<\/strong>. The row&#8217;s&nbsp;<strong>cross-axis<\/strong>&nbsp;will run&nbsp;<strong>vertically<\/strong>, and the&nbsp;<strong>main axis<\/strong>&nbsp;will run&nbsp;<strong>horizontally<\/strong>. See the below visual representation to understand it more clearly.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-row-and-column.png\" alt=\"Flutter Row and Column\"\/><\/figure>\n\n\n\n<h6 class=\"wp-block-heading\">Note: Flutter row widget has several other properties like mainAxisSize, textDirection, verticalDirection, etc. Here, we will discuss only mainAxisAlignment and crossAxisAlignment properties.<\/h6>\n\n\n\n<p>We can align the row&#8217;s children widget with the help of the following properties:<\/p>\n\n\n\n<ul><li><strong>start:<\/strong>&nbsp;It will place the children from the starting of the main axis.<\/li><li><strong>end:<\/strong>&nbsp;It will place the children at the end of the main axis.<\/li><li><strong>center:<\/strong>&nbsp;It will place the children in the middle of the main axis.<\/li><li><strong>spaceBetween:<\/strong>&nbsp;It will place the free space between the children evenly.<\/li><li><strong>spaceAround:<\/strong>&nbsp;It will place the free space between the children evenly and half of that space before and after the first and last children widget.<\/li><li><strong>spaceEvenly:<\/strong>&nbsp;It will place the free space between the children evenly and before and after the first and last children widget.<\/li><\/ul>\n\n\n\n<p>Let us understand it with the help of an example where we are going to align the content such that there is an even space around the children in a row:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.javatpoint.com\/flutter-row-and-column#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-row-and-column#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-row-and-column#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';  \n  \nvoid main() { runApp(MyApp()); }  \nclass MyApp extends StatelessWidget {  \n  @override  \n  Widget build(BuildContext context) {  \n    return MaterialApp(  \n      home: MyHomePage()  \n    );  \n  }  \n}  \n  \nclass MyHomePage extends StatefulWidget {  \n  @override  \n  _MyHomePageState createState() => _MyHomePageState();  \n}  \n  \nclass _MyHomePageState extends State&lt;MyHomePage> {  \n  @override  \n  Widget build(BuildContext context) {  \n    return Scaffold(  \n      appBar: AppBar(  \n        title: Text(\"Flutter Row Example\"),  \n      ),  \n      body: Row(  \n          mainAxisAlignment: MainAxisAlignment.spaceEvenly,  \n          children:&lt;Widget>&#91;  \n            Container(  \n              margin: EdgeInsets.all(12.0),  \n              padding: EdgeInsets.all(8.0),  \n              decoration:BoxDecoration(  \n                  borderRadius:BorderRadius.circular(8),  \n                  color:Colors.green  \n              ),  \n              child: Text(\"React.js\",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  \n            ),  \n            Container(  \n              margin: EdgeInsets.all(15.0),  \n              padding: EdgeInsets.all(8.0),  \n              decoration:BoxDecoration(  \n                  borderRadius:BorderRadius.circular(8),  \n                  color:Colors.green  \n              ),  \n              child: Text(\"Flutter\",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  \n            ),  \n            Container(  \n              margin: EdgeInsets.all(12.0),  \n              padding: EdgeInsets.all(8.0),  \n              decoration:BoxDecoration(  \n                  borderRadius:BorderRadius.circular(8),  \n                  color:Colors.green  \n              ),  \n              child: Text(\"MySQL\",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  \n            )  \n          ]  \n      ),  \n    );  \n  }  \n}  <\/code><\/pre>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<p>When we run this app, we should get the UI as the below screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.javatpoint.com\/tutorial\/flutter\/images\/flutter-row-and-column2.png\" alt=\"Flutter Row and Column\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This widget arranges its children in a horizontal direction on the screen. In other words, it will expect child widgets in a horizontal array. If the child widgets need to fill the available horizontal space, we must wrap the children widgets in an Expanded widget. A row widget does&nbsp;not appear scrollable&nbsp;because it displays the widgets [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[444],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2081"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2081"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2081\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}