Scribd
Upload
2 views

5. Stack, Padding, Center, Icon, TextField, CheckBox, Switch, Image Widgets

The document provides an overview of various Flutter widgets including Stack, Padding, Center, Icon, TextField, Checkbox, Switch, and Image widgets. It includes examples of how to implement these widgets in a Flutter application, demonstrating their properties and usage. Additionally, it offers guidance on displaying both asset and network images in Flutter.

Uploaded by

abdulqadeer.dastagery55
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

5. Stack, Padding, Center, Icon, TextField, CheckBox, Switch, Image Widgets

The document provides an overview of various Flutter widgets including Stack, Padding, Center, Icon, TextField, Checkbox, Switch, and Image widgets. It includes examples of how to implement these widgets in a Flutter application, demonstrating their properties and usage. Additionally, it offers guidance on displaying both asset and network images in Flutter.

Uploaded by

abdulqadeer.dastagery55
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Flutter

Coding and Programming


01
widgets
1-1 Stack
The Stack widget in Flutter is used to
position widgets on top of each other. It
allows you to overlay widgets and
control their position within the stack. By
default, widgets are positioned in the
order they are added, with the first
widget being at the bottom and the
subsequent ones layered on top.
1-2 Stack Example
import 'package:flutter/material.dart';

Stack(

alignment: Alignment.center,

children: [

Container( width: 200, height: 200, color: Colors.blue, ),

Container( width: 150, height: 150, color: Colors.red, ),

Positioned(

bottom: 10,

right: 10,

child: Container( width: 50, height: 50, color: Colors.green, ),

), ], ),
1-3 Padding and Center Widget
Padding widget: This widget adds
empty space around its child widget. It's
a great way to create gaps between
widgets or from the screen edge.

Center widget: This widget centers its


child within its parent. It’s often used
when you want to align a widget in the
middle of the screen or within a specific
area
1-4 Padding and Center Widget
Example
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('Padding and Center Example'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0), // Padding
of 20 on all sides
child: Container(
width: 150,
height: 150,
color: Colors.blue,
child: Center(
child: Text(
'Hello!',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
),),),),);}}
1-5 Icon widget
In Flutter, the Icon widget is used to display a graphical
symbol or icon from the material design library. Here's a
basic example of how the Icon widget is implemented:

Icon(
Icons.favorite, // The icon itself, here it's a heart symbol
color: Colors.red, // The color of the icon
size: 30.0, // The size of the icon
)
1-6 TextField widget
The TextField widget in Flutter is used for user input. It
allows users to enter text, and you can customize its
behavior, style, and validation. Below is an example
demonstrating how to use the TextField widget in a
Flutter application.
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Name’,
hintText: 'e.g. John Doe’,
prefixIcon: Icon(Icons.person), // Optional: adds an icon
),
onChanged: (text) {
// Handle text changes print('Name entered: $text’);
},
)
1-7 CheckBox & Switch Example
1. Checkbox Widget Example:
bool isChecked = false;
Checkbox(
value: isChecked, // Whether the checkbox is
checked or not
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue!;
});
},)
2. Switch Widget Example:
bool isSwitched = false;
Switch(
value: isSwitched, // Whether the switch is on or
off
onChanged: (bool newValue) {
setState(() {
isSwitched = newValue;
});},)
1-8 Image widget
1. Displaying an Asset Image
To use an image stored in your app's assets, add the image to your project
and reference it in pubspec.yaml.
Step 1: Add the image to your assets folder
 Create an assets folder in your project directory.
 Place your image file (e.g., my_image.png) inside the assets folder.
Step 2: Update pubspec.yaml

 assets: - lib/assets/my_image.png
Image.asset(
‘lib/assets/my_image.png',
width: 200,
height: 200,
fit: BoxFit.cover,
)
1-8 Image widget
2. Displaying a Network Image
For images from a URL, use Image.network.

Image.network(
'https://example.com/my_image.png',
width: 200, height: 200,
fit: BoxFit.cover,
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(),
);
},
errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
return Text('Failed to load image');
},
)
Thanks
Do you have any
questions?
!
Resources
 https://flutter.dev

You might also like