How to Arrange Children Widgets in Row and Column in Flutter

When we are building user interface of a mobile app we always need to arrange each UI components in a particular manner. The Row and Column widgets are used to arrange children widgets in row and column in Flutter.

The Row widget is very simple to implement. You just need to wrap the Row widget and pass the children widgets as an array.

Row(
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
          Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),

Here’s the full example of Flutter Row widget.

import 'package:flutter/material.dart';

class RowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Row Example'),
      ),
      body: Center(child:Row(
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
          Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),
      ),
    );
  }
}

And here’s the output of the flutter example.

Similar to Row widget, Column widget is also easy to use.

Column(
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
          Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),

Following is the complete example of Column widget in Flutter.

import 'package:flutter/material.dart';

class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: MainScreen()
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Column Example'),
      ),
      body: Center(child:Column(
        children: <Widget>[
          Container(
            color: Colors.red,
            height: 100,
            width: 100,
          ),
          Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
          Container(
            color: Colors.blue,
            height: 100,
            width: 100,
          ),
        ],
      ),
      ),
    );
  }
}

And here’s the output of the example.

I hope this flutter tutorial helped you!