Row Widget
The row is a multi-child widget which arranges its children horizontally.
Coding Example
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
color: const Color.fromARGB(255, 142, 109, 8),
height: 100,
width: 100,
child: const Center(
child: Text(
"first child",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
),
Container(
color: const Color.fromARGB(255, 11, 21, 168),
height: 100,
width: 100,
child: const Center(
child: Text(
"Second child",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
),
Container(
color: const Color.fromARGB(255, 164, 15, 62),
height: 100,
width: 100,
child: const Center(
child: Text(
"Third child",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
),
],
),
),
),
));
}
Column Widget
Column widget is a multi-child widget which arranges its children vertically.
Coding Example
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
color: const Color.fromARGB(255, 142, 109, 8),
height: 100,
width: 100,
child: const Center(
child: Text(
"first child",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
),
Container(
color: const Color.fromARGB(255, 11, 21, 168),
height: 100,
width: 100,
child: const Center(
child: Text(
"Second child",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
),
Container(
color: const Color.fromARGB(255, 164, 15, 62),
height: 100,
width: 100,
child: const Center(
child: Text(
"Third child",
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
),
],
),
),
),
));
}
No comments:
Post a Comment