Important widget Row & Column with Example

 In this article, we’re going to learn how to use rows & columns in a flutter with an example. This Topic is very very important in flutter development, without Rows & Columns you cannot build UI.




Column 

A Column widget displays its children vertically. It takes a children property containing an array of List. The children align vertically without taking up the full height of the screen. Each child widget can be embedded in an Expanded widget to fill available space. You can use CrossAxisAlignment, MainAxisAlignment, and MainAxisSize to align and size how much space is occupied on the main axis.




Column(

  crossAxisAlignment: CrossAxisAlignment.center,

 mainAxisAlignment: MainAxisAlignment.spaceEvenly,

 mainAxisSize: MainAxisSize.max,

 children: <Widget>[

 Text('Column 1'),

 Divider(),

 Text('Column 2'),

 Divider(),

 Text('Column 3'),

 ],

),




Row

A Row widget displays its children horizontally. It takes a children property containing an array of List. The same properties that the Column contains are applied to the Row widget with the exception that the alignment is horizontal, not vertical.







Row(

 crossAxisAlignment: CrossAxisAlignment.start,

 mainAxisAlignment: MainAxisAlignment.spaceEvenly,

 mainAxisSize: MainAxisSize.max,

 children: <Widget>[

 Row(

 children: <Widget>[

 Text('Row 1'),

 Padding(padding: EdgeInsets.all(16.0),),

 Text('Row 2'),

 Padding(padding: EdgeInsets.all(16.0),),

 Text('Row 3'),

 ],

 ),

 ],

),


Properties of Row and Column Widgets:

  • children: This property takes in List<Widget>, which is a list of widgets to display inside the Row or the Column widget.
  • direction: This property holds as the Axis enum object to decide the direction used in the main axis. For Row and Column, it is fixed.
  • crossAxisAlignment: The crossAxisAlignment takes in CrossAxisAlignment enum as the object to how the children’s widgets should be places in crossAxisAlignment. For Row it is vertical and for Column it is horizontal.
  • mainAxisAlignment: This property takes in MainAxisAlignment enum as the object to decide how the children widgets should be place in mainAxisAlignment. For Row it is horizontal and for Column it is vertical.

Axis size and alignment


We can align the row's children widget with the help of the following properties:

  • start: It will place the children from the starting of the main axis.
  • end: It will place the children at the end of the main axis.
  • center: It will place the children in the middle of the main axis.
  • space-between: It will place the free space between the children evenly.
  • space around: It will place the free space between the children evenly and half of that space before and after the first and last children widget.
  • spaceEvenly: It will place the free space between the children evenly and before and after the first and last children widget.




mainAxisSize property

Row and Column occupy different main axes. A Row’s main axis is horizontal, and a Column’s main axis is vertical


mainAxisAlignment property

When mainAxisSize is set to MainAxisSize.max, Row and Column might lay out their children with extra space. The mainAxisAlignment property determines how Row and Column can position their children in that extra space. mainAxisAlignment has six possible values:



MainAxisAlignment.start
Positions children near the beginning of the main axis. (Left for Row, top for Column)
MainAxisAlignment.end
Positions children near the end of the main axis. (Right for Row, bottom for Column)
MainAxisAlignment.center
Positions children at the middle of the main axis.
MainAxisAlignment.spaceBetween
Divides the extra space evenly between children.
MainAxisAlignment.spaceEvenly
Divides the extra space evenly between children and before and after the children.
MainAxisAlignment.spaceAround
Similar to MainAxisAlignment.spaceEvenly, but reduces half of the space before the first child and after the last child to half of the width between the children.


crossAxisAlignment property

The crossAxisAlignment property determines how Row and Column can position their children on their cross axes. A Row’s cross axis is vertical, and a Column’s cross axis is horizontal. The crossAxisAlignment property has five possible values:

CrossAxisAlignment.start
Positions children near the start of the cross axis. (Top for Row, Left for Column)
CrossAxisAlignment.end
Positions children near the end of the cross axis. (Bottom for Row, Right for Column)
CrossAxisAlignment.center
Positions children at the middle of the cross axis. (Middle for Row, Center for Column)
CrossAxisAlignment.stretch
Stretches children across the cross axis. (Top-to-bottom for Row, left-to-right for Column)
CrossAxisAlignment.baseline
Aligns children by their character baselines. (Text class only, and requires that the textBaseline property is set to TextBaseline.alphabetic. See the Text widget section for an example.)

Ex.




import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Important widget Row & Column with Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter With Praveen'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        color: Colors.cyanAccent,
        height: double.infinity,
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  color: Colors.red,
                  height: 50,
                  width: 50,
                ),
                Container(
                  color: Colors.yellow,
                  height: 50,
                  width: 50,
                ),
                Container(
                  color: Colors.deepPurple,
                  height: 50,
                  width: 50,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  color: Colors.black,
                  height: 50,
                  width: 50,
                ),
                Container(
                  color: Colors.pink,
                  height: 50,
                  width: 50,
                ),
                Container(
                  color: Colors.teal,
                  height: 50,
                  width: 50,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  color: Colors.red,
                  height: 50,
                  width: 50,
                ),
                Container(
                  color: Colors.yellow,
                  height: 50,
                  width: 50,
                ),
                Container(
                  color: Colors.deepPurple,
                  height: 50,
                  width: 50,
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

As you can see, nesting Rows and Columns in Flutter can be quite challenging if you don’t know how it works.

I hope that after reading this shot, you won’t have any issues or errors with implementing this concept in your future apps.

Thank you for reading!

Comments

Post a Comment

Popular posts from this blog

Unlocking the Power of OOP: A Beginner's Guide to Objects, Encapsulation, Inheritance, Abstraction, and Polymorphism

Image
 OOPs (Object-Oriented Programming System) This article explains the fundamental concepts of OOP and its most significant advantages What is OOPs (Object Oriented Programming System)? Object-oriented programming System (OOPs) is defined as a programming paradigm (and not a specific language) built on the concept of objects, i.e., a set of data contained in fields, and code, indicating procedures – instead of the usual logic-based system. Key Concepts of OOP To understand and use object-oriented programming, it is necessary to know the following key concepts : 1. Class A class is a blueprint or template of an object. It is a user-defined data type. We define variables, constants, member functions, and other functionality inside a class. it binds data and functions together in a single unit. It does not consume memory at run time. Note that classes are not considered as a data structure. It is a logical entity. It is the best example of data binding. Note that a class can exist witho...
Read more

Flutter Drawer – Create a Smooth Navigation Menu

Image
 A Drawer is a side menu that slides in from the left and provides quick navigation within the app. It is commonly used when there are multiple sections in an app, but space is limited for a bottom navigation bar or tabs. In this blog, we’ll learn how to implement a Drawer in Flutter and customize it to match your app’s design . Let's Jump into the Code! 🚀 Step 1: Setting Up the Basic Drawer import 'package:flutter/material.dart' ; // Function to trigger app build void main () => runApp( const MyApp ()); class MyApp extends StatelessWidget { final appTitle = 'Flutter Drawer Demo' ; const MyApp({Key? key}) : super (key: key); @override Widget build (BuildContext context) { return MaterialApp ( title: appTitle , home: MyHomePage (title: appTitle ), ); // MaterialApp } } class MyHomePage extends StatelessWidget { final String title ; const MyHomePage({Key? key, required this . title }) : super (key: key); @override Widget b...
Read more

Mastering Hive in Flutter: A Complete Guide for Beginners to Advanced Users

Image
In this blog, we will dive deep into **Hive**, a lightweight and fast key-value database that is widely used for local storage in **Flutter** apps. Whether you're a beginner or someone looking to level up your Flutter skills, this guide will help you master **Hive** from basic to advanced usage. --- ### **What is Hive in Flutter?** **Hive** is a NoSQL database that allows you to store data locally on the device. Unlike other databases like SQLite, Hive is very fast, lightweight, and easy to integrate into any **Flutter** application. It supports **primitive data types** as well as **custom objects**, making it an ideal choice for Flutter developers looking to handle data storage efficiently. --- ### **Setting Up Hive in Flutter** Before you begin, make sure you have the required dependencies in your **`pubspec.yaml`** file. ```yaml dependencies:   flutter:     sdk: flutter   hive: ^2.0.4   hive_flutter: ^1.1.0   path_provider: ^2.0.1 ``` import 'package:flu...
Read more