Flutter Row widget is used to display its widgets in a horizontal array.

1. row layout can be used in another row layout
2. column or container or padding or center layouts can be used in row layout
3. row layout can be used in another layouts

Syntax

              Row(
                  children: const <Widget>[
                    //some widgets
                  ],
                )

                

Constructor

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

                

mainAxisAlignment property runs horizontally and crossAxisAlignment property runs vertically.

different properties explained for main axis and cross axis alignment:

1. start: it will align children at the start of the axis direction.

2. center: It will align children at the center of the axis.

3. end: It will align children at the end of the axis.

4. spaceBetween: It will add space between children evenly.

5. spaceAround:It will add the space between the children evenly and half of that space before and after the first and last children widget.

6. spaceEvenly: It will add the space between the children evenly and before and after the first and last children widget.

Example

                import 'package:flutter/material.dart';
 
void main() => runApp(const MyApp());
 
/// main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  static const String _title = 'Flutter Tutorial';
 
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}
 
/// stateful widget that the main application instantiates
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);
 
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
 
/// private State class that goes with MyStatefulWidget
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Row Widget Tutorial'),
      ),
      body: Row(
        children: const <Widget>[
          Text('Text 1', style: TextStyle(fontSize: 24.0,), ),
          Icon(
            Icons.beach_access,
            color: Colors.pink,
            size: 90.0,
          ),
          Text('Text 2', style: TextStyle(fontSize: 20.0),),
          Icon(
            Icons.audiotrack,
            color: Colors.green,
            size: 90.0,
          ),
        ],
      )
    );
  }
}