Skip to content
Related Articles

Related Articles

Difference Between Rows and Columns vs Container in Flutter
  • Difficulty Level : Expert
  • Last Updated : 27 Jul, 2020
GeeksforGeeks - Summer Carnival Banner

In this article, we’ll learn about the key differences between Container and Row/Column widgets. Row and Column both widgets belong to a similar category and have identical uses. These are the basic widgets that you would use in almost every flutter app. We will discuss them in brief.

Container

This is the most used widget in every flutter app. It is mostly used to style its child widgets. It takes only one child. Some flutter widgets, focus only on their core functionality and does not contain much styling options. The container widget comes to the rescue and provides you with various common painting, positioning, and sizing widgets.

Container(
   child: Widget  //Another flutter widget
)

Row/Column

These are widgets that can contain multiple child widgets. The row is the widget that can display various child widgets in a horizontal manner. The column displays child widgets in a vertical manner. By default, these widgets don’t support scrolling. It can be enabled by wrapping with other widgets. But, if there are numerous child widgets, it is preferred to use ListView.



Row(
  children: [
    Container(), // First Widget
    Text(),      // Second Widget
    ----,
    ----,    // Multiple Widgets
  ])
Column(
  children: [
    Container(), // First Widget
    Text(),      // Second Widget
    ----,
    ----,    // Multiple Widgets
  ])

Comparison

Container

Column/Row

Takes exactly one child widgetTakes multiple (unlimited) child widgets
Rich alignment and styling options availableAlignment options available, but there are no styling options
Flexible width (e.g. child width, available width, …)Always takes full available height (column) /width (row)
Perfect for custom styling and alignmentMust-use if widgets sit next to/above each other

Example:

Dart




import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}
  
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Column(     //All elements are wrapped
        children: [     //in this column
          SizedBox(
            height: 15,
          ),
          SizedBox(
            height: 20,
            child: Text('Demonstration of Row'),
          ),
          Row(
            children: [
              Card(
                margin: EdgeInsets.all(10),
                elevation: 8,
                child: Container(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'GeeksforGeeks',
                    style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
              SizedBox(
                width: 2,
              ),
              Card(
                margin: EdgeInsets.all(10),
                elevation: 8,
                child: Container(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'GeeksforGeeks',
                    style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          ),
          SizedBox(
            height: 30,
          ),
          SizedBox(
            height: 20,
            child: Text('Demonstration of Column'),
          ),
          Column(
            children: [
              Card(
                margin: EdgeInsets.all(10),
                elevation: 8,
                child: Container(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'GeeksforGeeks',
                    style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
              SizedBox(
                width: 4,
              ),
              Card(
                margin: EdgeInsets.all(10),
                elevation: 8,
                child: Container(
                  padding: EdgeInsets.all(25),
                  child: Text(
                    'GeeksforGeeks',
                    style: TextStyle(color: Colors.green),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

Output:

rows and columns vs container in dart

In the above example, we have shown how row and column widgets are used in combination with a container widget. When no styling options were available in the child widget, we wrapped it with a container to add some padding to the child widget.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :