Flutter: Row Widget

Row and column help us to arrange the widgets horizontally and vertically respectively. These two widgets are very Useful in Flutter.

Let’s see the Row widget:

We can arrange widgets horizontally By Using this widget. This is the Row widget properties.

Row(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textBaseline: TextBaseline.alphabetic,
List<Widget> children: const <Widget>[]}
)

Alignment Properties:

1. mainAxisAlignment: it considers main axis alignment as horizontal.
2. crossAxisAlignment: it considers crossAxisAlignment as vertically.
   

These two alignments have the following properties.

• Start: it will arrange widgets from the start horizontally.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: const Text("Row"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.pink.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.green.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.blueGrey.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.orange.shade200,
          ),
        ],
      ),
    );
  }
}

End: it will arrange the widgets at the end.

import 'package:flutter/material.dart';

class RowExample extends StatefulWidget {
  const RowExample({super.key});

  @override
  State<RowExample> createState() => _RowExampleState();
}

class _RowExampleState extends State<RowExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Row"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.pink.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.green.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.blueGrey.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.orange.shade200,
          ),
        ],
      ),
    );
  }
}

Center: it will arrange widgets in the middle horizontally.

import 'package:flutter/material.dart';

class RowExample extends StatefulWidget {
  const RowExample({super.key});

  @override
  State<RowExample> createState() => _RowExampleState();
}

class _RowExampleState extends State<RowExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Row"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.pink.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.green.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.blueGrey.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.orange.shade200,
          ),
        ],
      ),
    );
  }
}

SpaceBetween: it will arrange widgets with space between.

import 'package:flutter/material.dart';

class RowExample extends StatefulWidget {
  const RowExample({super.key});

  @override
  State<RowExample> createState() => _RowExampleState();
}

class _RowExampleState extends State<RowExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Row"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.pink.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.green.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.blueGrey.shade200,
          ),
           Container(
            height: 100.0,
            width: 50.0,
            color: Colors.orange.shade200,
          ),
        ],
      ),
    );
  }
}

SpaceAround:  it will evenly arrange widgets with space between widgets.

import 'package:flutter/material.dart';

class RowExample extends StatefulWidget {
  const RowExample({super.key});

  @override
  State<RowExample> createState() => _RowExampleState();
}

class _RowExampleState extends State<RowExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Row"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.pink.shade200,
          ),
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.green.shade200,
          ),
        ],
      ),
    );
  }
}

SpaceEvenly:  it will evenly arrange widgets with the same space between widgets.

import 'package:flutter/material.dart';

class RowExample extends StatefulWidget {
  const RowExample({super.key});

  @override
  State<RowExample> createState() => _RowExampleState();
}

class _RowExampleState extends State<RowExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Row"),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.pink.shade200,
          ),
          Container(
            height: 100.0,
            width: 50.0,
            color: Colors.green.shade200,
          ),
        ],
      ),
    );
  }
}

Here explained the use of the Row widget, Thank you,

Happy Coding.