Flut 2b
2b). Implement different layout structures using Row, Column and Stack widgets.
Row Widget: It is used to display widgets in a single horizontal line, allowing for easy alignment, spacing and flexible layouts. It is one of the fundamental layout widgets in flutter, allowing you to align multiple widgets horizontally. Row widget does not allow scrolling . It automatically sizes its children based on their content and aligns them along the main axis.
Code:
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
Widget build(BuildContext context){
return MaterialApp(
title: 'Row Widget Example',
home: Scaffold(
appBar: AppBar(
title: Text('Row Widget Demo'),
),
body:Center(
child: Container(
color:Colors.grey[200],
padding:EdgeInsets.all(12),
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
width:60,
height: 60,
color: Colors.red,
child: Center(child:Icon(Icons.star,color:Colors.amber)),
),
Container(
width:60,
height: 60,
color: Colors.green,
child: Center(child:Icon(Icons.telegram,color:Colors.red)),
),
Container(
width:60,
height: 60,
color: Colors.blue,
child: Center(child: Icon(Icons.person,color: Colors.white)),
),
],
),
),
),
),
);
}
}
Column Widget:
The column widget in flutter is used to arrange its child widgets in a vertical layout. It is commonly used to create layouts in flutter applications. The column widget does not scroll.
A column can hold multiple child widgets. These child widgets can be anything from text and Icons to other rows or even more columns for nested layouts.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Column Widget Demo'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green,
),
padding: const EdgeInsets.all(8.0),
child: const Text(
"UI-Design",
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green,
),
padding: const EdgeInsets.all(8.0),
child: const Text(
"Flutter",
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.green,
),
padding: const EdgeInsets.all(8.0),
child: const Text(
"Dart Programming",
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
],
),
),
),
),
);
}
}
Comments
Post a Comment