Row Widget

What is Row Widget?

A widget that displays its children in a horizontal array.

Use Row widget to Layout a list of child widgets in the horizontal direction:

  1. Row is a horizontal, linear layout.
  2. The Row widget does not scroll.

Default Constructor

The default constructor creates a horizontal array of children.

Row(
        // <Widget> is the type of items in the list.
        children: <Widget>[
          // add one or more widgets here
        ],
      );

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

The children, parameter is to add the array of child widgets.

Code snippet

The following code snippet shows how to configure Row widget.

Row(
        children: <Widget>[
          Expanded(
            child: Text('Deliver features faster', textAlign: TextAlign.center),
          ),
          Expanded(
            child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.contain, // otherwise the logo will be tiny
              child: const FlutterLogo(),
            ),
          ),
        ],
      );

Demo Code

This example divides the available space into three (horizontally), and places text centered in the first two cells and the Flutter logo centered in the third.

import 'package:flutter/material.dart';

class RowDemo extends StatelessWidget {
  
  Widget build(BuildContext context) {
    // Return Material widget
    return Material(
      child: Row(
        children: <Widget>[
          Expanded(
            child: Text('Deliver features faster', textAlign: TextAlign.center),
          ),
          Expanded(
            child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
          ),
          Expanded(
            child: FittedBox(
              fit: BoxFit.contain, // otherwise the logo will be tiny
              child: const FlutterLogo(),
            ),
          ),
        ],
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  
  Widget build(BuildContext context) {
    // MaterialApp Widget
    return MaterialApp(
      title: 'Row Demo',
      home: RowDemo(),
    );
  }
}

void main() => runApp(MyApp());