EXPERIMENT-2
2 a) Explore various Flutter widgets (Text, Image,
Container, etc.).
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget
build(BuildContext context) {
return
MaterialApp(
home:
Scaffold(
appBar:
AppBar(
title:
Text('Flutter Widgets Example'),
),
body:
Center(
child:
Column(
children: [
Text('This is a text widget'),
SizedBox(height: 20), // <--
Added space here
Container(
color: Colors.red,
width: 100,
height: 100,
),
SizedBox(height: 20), // Optional
space below container
Image.network(
'https://cdn.pixabay.com/photo/2016/07/19/23/36/sport-1529264_640.jpg',
width: 200,
height: 200,
),
],
),
),
),
);
}
}
MaterialApp
└── Scaffold
├── appBar:
AppBar
│ └── title: Text('Flutter Widgets Example')
└── body:
Center
└──
Column
├──
Text('This is a text widget')
├──
SizedBox(height: 20)
├──
Container
│ ├── color: Colors.red
│ ├── width: 100
│ └── height: 100
├──
SizedBox(height: 20)
└──
Image.network
├── src: 'https://cdn.pixabay.com/photo/2016/07/19/23/36/sport-1529264_640.jpg'
├── width: 200
└── height: 200
2 b) Implement different layout structures using Row,
Column, and Stack widgets.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget
build(BuildContext context) {
return
MaterialApp(
home:
Scaffold(
appBar:
AppBar(
title:
Text('Layout Structures'),
),
body:
Column(
children:
[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(color: Colors.red, width: 50, height: 50),
Container(color: Colors.green, width: 50, height: 50),
Container(color: Colors.blue, width: 50, height: 50),
],
),
SizedBox(height: 20),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(color: Colors.yellow, width:
50, height: 50),
Container(color: Colors.orange, width: 50, height: 50),
],
),
SizedBox(height: 20),
Stack(
alignment: Alignment.center,
children: [
Container(color: Colors.purple, width: 100, height: 100),
Container(color: Colors.pink, width: 50, height: 50),
],
),
],
),
),
);
}
}
MaterialApp
└── Scaffold
├── AppBar
│ └── Text('Layout Structures')
└── Body
(Column)
├── Row
(with spaceAround alignment)
│ ├── Container (red, 50x50)
│
├── Container (green, 50x50)
│ └── Container (blue, 50x50)
├──
SizedBox (height: 20)
├──
Column (center alignment)
│ ├── Container (yellow, 50x50)
│ └── Container (orange, 50x50)
├──
SizedBox (height: 20)
└──
Stack (center alignment)
├──
Container (purple, 100x100)
└──
Container (pink, 50x50)
Comments
Post a Comment