Flutter Row Widget

Rishabh Bisht

30 August 2023

Hello folks, Welcome to our blog on Flutter’s Row Widget. Here we will learn about the Flutter Row widget and explore it’s uses for creating the dynamic and responsive interface.

What is Flutter Row Widget?

The Flutter Row widget is used to create flexible and responsive user interface where elements are positioned side by side. In short, it is a layout element that arranges its child widget horizontally in a row.

Flutter Row Widget is ideal choice for creating elements like navigation bars, toolbars and forms where components need to be aligned horizontally.

Key Features:-

Following are some key features of the Flutter Row Widget :-

Horizontal Arrangement:-

Horizontal Arrangement is a primary purpose of the Row Widget as it align the children’s of Row widget horizontally from left to write.

Flexibility:-

The Row Widget is extremely flexible as you can control the distribution of the Layout child widgets within the Row. We use ‘mainAxisAlignment’ and ‘crossAxisAlignment’ properties to manage the distribution of the child widgets.

CrossAxisAlignment

MainAxisAlignment

Limitation:-

While the Row Widget is excellent for arranging child widgets horizontally, it has some limitation when it comes to handling the horizontal space. It often shows the overflow warning when the combined width of children’s exceed the device length.

We Can easily overcome this issue by another flutter layout widget called Flutter Wrap Widget.

Implementation:-

We can use the Row widget by simply calling the Row widget and defining the child inside the Row widget.

 body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children:  <Widget>[
            container(Colors.green),
            container(Colors.blue),
            container(Colors.red),
          ],
        ),
      ),

body: Center(

child: Row(

mainAxisAlignment: MainAxisAlignment.start,

children: <Widget>[

container(Colors.green),

container(Colors.blue),

container(Colors.red),

Complete Code:-

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Row Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Row Widget'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children:  <Widget>[
            container(Colors.green),
            container(Colors.blue),
            container(Colors.red),
          ],
        ),
      ),
    );
  }
  container(Color color){
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 100,
        height: 100,
        color: color,
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Row Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

home: const MyHomePage(title: 'Flutter Row Widget'),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({super.key, required this.title});

final String title;

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Row(

mainAxisAlignment: MainAxisAlignment.start,

children: <Widget>[

container(Colors.green),

container(Colors.blue),

container(Colors.red),

);

}

container(Color color){

return Padding(

padding: const EdgeInsets.all(8.0),

child: Container(

width: 100,

height: 100,

color: color,

);

}

Output:-

Conclusion:-

Here with this blog, we have explored the Row widget and learned how to implement it on our program.

Checkout more interesting blogs on flutter with Mobikul Blogs.

You may also check interactive app designs by our Flutter app develop ment company

Reference:- Official Row Widget Documentation.