DATE: PAGE NO:
WEEK-2
Aim:
Write a Flutter program to display a simple text widget on the screen using a
StatelessWidget.
Description:
1. Entry point of the application:
- The main() function calls runApp(MyApp()) to launch the app.
2. MyApp Class:
- MyApp is a StatelessWidget that returns a MaterialApp.
- The title is set to 'My Application'.
- The home property is set to MyHomePage().
3. MyHomePage Class:
- MyHomePage is a separate StatelessWidget.
- It builds a Scaffold with an AppBar titled 'Simple Flutter App'.
- The body contains a Center widget that holds a Text widget displaying 'Hello
Flutter!'.
Source Code:
import 'package:flutter/[Link]';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Application',
PAGE NO:
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Flutter App'),
),
body: Center(
child: Text('Hello Flutter!'),
),
);
}
}
OUTPUT:
PAGE NO:
Aim:
Write a Flutter program to demonstrate the use of the Container widget with
styling properties like padding, margin, alignment, and decoration.
Description:
This Flutter program displays a Text widget inside a styled Container. The
Container is customized using properties such as height, width, alignment,
margin, padding, and border decoration.
1. Entry point of the application:
The main() function calls runApp() with an instance of MyApp to start the
application:
void main() => runApp(const MyApp());
- runApp() inflates the given widget and attaches it to the screen.
2. StatelessWidget Implementation:
The MyApp class extends StatelessWidget:
class MyApp extends StatelessWidget {
const MyApp({[Link]});
...
}
Experiment-01 Date:
- Used when the UI does not require dynamic changes.
3. Widget tree inside build():
- MaterialApp is the root widget that enables material design styling.
- Scaffold provides a structure with an AppBar and body.
- The AppBar displays the title “Container example”.
- The body contains a Container with:
- Height of 200 and width set to maximum available space.
PAGE NO:
- Margin of 20 and padding of 30.
- Alignment to center the child.
- Border using BoxDecoration.
- Inside the container, a Text widget displays the message:
"Hello! I am inside a container!"
Source Code:
import 'package:flutter/[Link]';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Container example"),
),
body: Container(
height: 200,
width: [Link],
alignment: [Link],
margin: const [Link](20),
PAGE NO:
padding: const [Link](30),
decoration: BoxDecoration(
border: [Link](color: [Link], width: 3),
),
child: const Text(
"Hello! I am inside a container!",
style: TextStyle(fontSize: 20),
),
),
);
}
}
Output :
PAGE NO:
Aim:
Write a Flutter program to demonstrate the use of a Row layout to arrange widgets
horizontally.
Description:
In Flutter, a Row widget arranges its child widgets horizontally from left to right.
It is useful for displaying elements side by side, such as buttons, icons, or text labels.
SOURCE CODE:
import 'package:flutter/[Link]';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Row Example',
home: Scaffold(
appBar: AppBar(
title: Text('Row Widget Example'),
),
body: Row(
mainAxisAlignment: [Link],
children: const [
Text(
'First',
style: TextStyle(fontSize: 24),
),
SizedBox(width: 20),
Text(
'Second',
style: TextStyle(fontSize: 24),
),
PAGE NO:
SizedBox(width: 20),
Text(
'Third',
style: TextStyle(fontSize: 24),
),
],
),
),
);
}
}
Expected Output:
PAGE NO:
Aim:
Write a Flutter program to demonstrate the use of a Column layout to arrange widgets
vertically.
Description:
In Flutter, a Column widget arranges its child widgets vertically from top to bottom.
It is useful for stacking elements one below the other, such as headings, paragraphs, and
buttons.
Pseudo Code:
import 'package:flutter/[Link]';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Column Example',
home: Scaffold(
appBar: AppBar(
title: Text('Column Widget Example'),
),
body: Column(
mainAxisAlignment: [Link],
children: const [
Text(
'First Text',
style: TextStyle(fontSize: 24),
),
Text(
'Second Text',
style: TextStyle(fontSize: 24),
),
PAGE NO:
Text(
'Third Text',
style: TextStyle(fontSize: 24),
),
],
),
),
);
}
}
Expected Output:
PAGE NO:
Aim:
Write a Flutter program to demonstrate the use of a Stack layout to overlap widgets on the
screen.
Description:
In Flutter, a Stack widget lets you place widgets on top of each other.
The first widget is placed at the bottom, and each next widget appears above the previous
one.
This is useful for creating overlapping elements like profile images with status icons, cards
with badges, etc.
SOURCE CODE:
import 'package:flutter/[Link]';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack Example',
home: Scaffold(
appBar: AppBar(
title: Text('Stack Widget Example'),
),
body: Center(
child: Stack(
alignment: [Link],
children: [
Container(
width: 200,
height: 200,
color: [Link],
),
PAGE NO:
Container(
width: 150,
height: 150,
color: [Link],
),
const Text(
'Stacked Text',
style: TextStyle(
fontSize: 24,
color: [Link],
),
),
],
),
),
),
);
}
}
Expected Output:
PAGE NO: