2a) ExplorevariousFlutterwidgets(Text, Image,Container, etc.
Code for Implementing Flutter Widgets Text:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Widget Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Text Widget Example'),
),
body: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(
fontSize: 24, // Text size
fontWeight: FontWeight.bold, // Bold text
color: Colors.blue, // Text color
letterSpacing: 1.5, // Space between letters
),
textAlign: TextAlign.center, // Align text center
),//Text
),//center
), //scaffold
); //MaterialApp
}
}
import 'package:flutter/material.dart';
This properly tells Dart to import the Flutter Material UI components.
void → The function doesn’t return anything.
main() → Entry point of every Dart app.
{} → Curly braces define the function body.
runApp() → Starts your Flutter app and takes a widget (usually your root widget).
class MyApp extends StatelessWidget {
class MyApp: You're defining a new Dart class called MyApp.
extends StatelessWidget: You're saying MyApp is a widget that does not hold any internal state
— it's static.
@override
Widget build(BuildContext context) {
@override
A Dart annotation.
It tells the compiler: "I am overriding a method from the parent class."
Here, you're overriding the build() method from the StatelessWidget or
StatefulWidget class.
Helps catch errors if you mistype a method name (e.g., writing buid() won’t be
accepted).
✅ Widget build(BuildContext context)
This is a method that builds and returns the UI for your widget.
build() returns a Widget tree (like MaterialApp, Text, Container, etc.).
BuildContext context gives the widget access to the widget tree, such as themes,
navigation, etc.
return MaterialApp(
title: 'Text Widget Demo',
Widget Purpose
MaterialApp Root widget that enables Material Design features
title Used for app switcher/task manager title (not visible on screen)
home The main screen of your app
Scaffold Provides structure — app bar, body, drawer, floating buttons, etc.
AppBar A top bar with a title or actions
Center Centers its child
Text Displays a string on screen
home: Scaffold(
appBar: AppBar(
title: Text('Text Widget Example'),
Widget Hierarchy:
MaterialApp
└── Scaffold
├── AppBar
│ └── Text (title)
└── Body
└── Center
└── Text
Widget Purpose
Scaffold Basic app layout (app bar, body, drawer, etc.)
AppBar Top navigation bar with a title
body Main content of the screen
Center Centers the child widget
Text Displays styled text
Code for Implementing Flutter Widgets Image:
import 'dart:io';
import 'package:flutter/material.dart';
void main() {
runApp(MyDesktopApp());
}
class MyDesktopApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Image from File System")),
body: Center(
child: Image.file(
File('C:/Users/admin/Pictures/flower.jpg'),
),//Image.file
),//center
),//scaffold
);//MaterialApp
}
}
Explanation:
import 'dart:io';
This line is used to import Dart’s I/O (Input/Output) library, which provides APIs to:
Access files and directories
Read/write files
Work with sockets and HTTP servers (low-level)
Handle the file system
Important Notes:
dart:io only works on platforms with a file system, like:
o Windows, Linux, macOS (Flutter desktop)
o Android
Feature Purpose
import 'dart:io'; Enables file system, network, sockets
Use cases Image.file(), File(), Directory()
Code for Implementing Flutter Widgets Container:
import 'package:flutter/material.dart';
void main() {
runApp(MyWindowsApp());
}
class MyWindowsApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Windows App - Container Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Container Widget Example'),
),
body: Center(
child: Container(
width: 300,
height: 150,
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.lightBlueAccent,
borderRadius: BorderRadius.circular(15),
border: Border.all(
color: Colors.blue,
width: 3,
),
boxShadow: [
BoxShadow(
color: Colors.black26,
blurRadius: 10,
offset: Offset(4, 4),
),
],
),
child: Center(
child: Text(
'This is a Container!',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),//Text style
),//Text
),//center
),//container
),//center
),//scaffold
);//MaterialApp
}
}
Output:
padding: Adds 20 pixels of inner space inside the container — space between
EdgeInsets.all(20) content and container edges.
margin: Adds 20 pixels of outer space outside the container — space between
EdgeInsets.all(20) this container and other widgets.
BoxDecoration: Styling the Container
Line What it does
color: Colors.lightBlueAccent Sets the background color of the container.
borderRadius: Rounds the corners of the container with a 15-pixel
BorderRadius.circular(15) radius. Makes it look smoother.
border: Border.all(color: Colors.blue, Draws a blue border around the container that is 3 pixels
width: 3) thick.
boxShadow: [...] Adds a drop shadow to give a sense of depth.
BoxShadow(
color: Colors.black26, // Light black shadow
blurRadius: 10, // Makes the shadow soft and spread out
offset: Offset(4, 4), // Shifts the shadow 4 pixels right and 4 pixels down
),
+-----------------------------+ <-- Margin (outer spacing)
| ┌─────────────────────┐ |
| | Padding Area | |
| | ┌─────────────────┐ | |
| | | Your Text | | <- Inside Container
| | └─────────────────┘ | |
| └─────────────────────┘ |
+-----------------------------+ <-- Border & Shadow
