"row" is a widget that arranges children in a horizontal row. It is
part of the widget system used to create user interfaces in Flutter. You
can create a set of children using the row widget.
These child elements can be various widgets such as text, images, buttons, etc.
Row(
children: [
// Widget Here
// Widget Here
// Widget Here
],
)
Here's a simple example of using the Row widget in Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Row Example'),
),
body: MyApp(),
),
)
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,// you can use spaceAround, center, spaceBetween, spaceEvenly
children: [
Container(
height: 100,
width: 100,
color: Colors.blue,
alignment: Alignment.center,
child: Text("Text 1"),
),
Container(
height: 100,
width: 100,
color: Colors.red,
alignment: Alignment.center,
child: Text("Text 2"),
),
Container(
height: 100,
width: 100,
color: Colors.amber,
alignment: Alignment.center,
child: Text("Text 3"),
)
],
)
);
}
}
The Row widget is used to create a horizontal arrangement of its children.
The mainAxisAlignment property is set to MainAxisAlignment.spaceEvenly(you can use spaceAround, center, spaceBetween, spaceEvenly ), which means that the children will be spaced evenly in the row.
Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.