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 without a
Read more

HTTP GET Response in Flutter

Model Class // To parse this JSON data, do // // final welcome = welcomeFromJson(jsonString); import 'dart:convert' ; List<Welcome> welcomeFromJson (String str) => List <Welcome>. from (json.decode(str).map((x) => Welcome . fromJson (x))) ; String welcomeToJson (List<Welcome> data) => json.encode( List < dynamic >. from (data.map((x) => x.toJson()))) ; class Welcome { Welcome({ required this . userId , required this . id , required this . title , }) ; int userId ; int id ; String title ; factory Welcome. fromJson (Map<String , dynamic > json) => Welcome ( userId: json[ "userId" ] , id: json[ "id" ] , title: json[ "title" ] , ) ; Map<String , dynamic > toJson () => { "userId" : userId , "id" : id , "title" : title , } ; } Main Class // Importing important packages require to connect // Flutter and Dart import
Read more

Building a Flutter Firebase Firestore CRUD App

    In this tutorial, we will walk you through the process of creating a Flutter application that performs CRUD (Create, Read, Update, Delete) operations on a list of items using Firebase Firestore. Firestore is a cloud-based NoSQL database provided by Firebase, and Flutter is a powerful open-source framework for building cross-platform mobile apps. By combining these technologies, you can create a real-time and cloud-synced list management app.  Prerequisites Before we start, ensure that you have the following prerequisites in place: Adding Dependencies First, we need to add the necessary dependencies to our Flutter project. Open your project's pubspec.yaml file and add the following dependencies: dependencies:   flutter:     sdk: flutter   firebase_core: ^latest_version   cloud_firestore: ^latest_version Replace latest_version with the actual latest versions of the firebase_core and cloud_firestore packages available on the Flutter packages website ( https://pub.dev/ ). After add
Read more