Scribd
Upload
18 views16 pages

Stateful & Stateless Widgets, Container, Scaffold, Text - Expended, Sizebox, Row, Column, Button

The document provides an overview of Flutter widgets, which are essential for building user interfaces in Flutter applications. It explains the two main types of widgets: StatelessWidget, which is immutable and does not change over time, and StatefulWidget, which can dynamically update its content. Additionally, it covers various layout widgets such as Scaffold, Container, Column, Row, and buttons, along with examples of their usage.

Uploaded by

abdulqadeer.dastagery55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views16 pages

Stateful & Stateless Widgets, Container, Scaffold, Text - Expended, Sizebox, Row, Column, Button

The document provides an overview of Flutter widgets, which are essential for building user interfaces in Flutter applications. It explains the two main types of widgets: StatelessWidget, which is immutable and does not change over time, and StatefulWidget, which can dynamically update its content. Additionally, it covers various layout widgets such as Scaffold, Container, Column, Row, and buttons, along with examples of their usage.

Uploaded by

abdulqadeer.dastagery55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Flutter

Coding and Programming


01
widgets
1-1 widgets
In Flutter, widgets are the building blocks of the user interface.
Everything you see in a Flutter app is a widget, from a simple text
label to complex layouts. Flutter’s widget-based approach allows
for a highly customizable UI, with each part of the interface
composed of smaller components that can be combined and
nested.
Types of Widgets
There are two main types of widgets in Flutter:
1. StatelessWidget
2. StatefulWidget
1-2 Stateless Widget
A Stateless Widget is a widget that doesn’t change over time. It’s immutable, meaning that once it’s built, it doesn’t rebuild or update its
content unless it’s triggered by external changes (like screen size or orientation changes).
Use Case: Use Stateless Widget for UI components that do not need to update after being rendered. Examples include text labels, icons, and
static images.
Example:
import 'package:flutter/material.dart';
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('StatelessWidget Example'),
),
body: Center(child: Text('This is a stateless widget')));
}}
void main() => runApp(MyStatelessWidget());
1-3 Stateful Widget
A Stateful Widget is dynamic and can
change over time. It has an internal
state that can be modified, and
whenever the state changes, the UI is
rebuilt.
Use Case: Use Stateful Widget when
your widget needs to interact with users
or update its content dynamically, such
as when handling user input,
animations, or any data that can
change.
1-4 Stateful widget Example
import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {


@override
_MyStatefulWidgetState createState() =>
_MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends
State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( title: Text('StatefulWidget
Example’), ),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('You have pressed the button this many
times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
), ] ), ),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter, tooltip:
'Increment',
1-5 Scaffold
In Flutter, Scaffold is a commonly used layout widget
that provides the structure for visual elements in a
typical Material Design application. It contains properties
that allow you to define app bars, drawers, floating
action buttons, bottom navigation, and more.

Scaffold(

appBar: AppBar(title: Text(widget.title),),

body:widget,

bottomSheet: widget,

),
1-6 container
1. width: The width of the container (set to 200 pixels).
2. height: The height of the container (set to 200 pixels).
3. color: The background color of the container (set to blue).
4. alignment: Aligns the child widget within the container (set to center).
5. margin: The space outside the container (set to 20 pixels on all sides).
6. padding: The space inside the container (set to 15 pixels on all sides).
7. decoration: A BoxDecoration object that allows you to customize the container's appearance:
color: Background color (set to green).
border: Defines the border around the container, including color and width.
borderRadius: Rounds the corners of the container (set to 20 pixels).
boxShadow: A list of BoxShadow objects that create shadows for the container, allowing for
customization of color, blur radius, and offset.
8. transform: Applies a transformation matrix to the container, allowing for rotation, scaling, and
translation (set to a slight rotation).
1-6-1 Container Example
Container(
width: 200, height: 200, color: Colors.blue,
margin: EdgeInsets.all(20),padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(color: Colors.red, width: 5, ),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius: 10,
offset: Offset(5, 5),
),],),
transform: Matrix4.rotationZ(0.1),
child:
),
1-7 Text widget Example
Text( 'Hello, Flutter!’,
style: TextStyle(
fontSize: 24, // Text size font
Weight: FontWeight.bold, // Bold text
fontStyle: FontStyle.italic, // Italic text
color: Colors.blue, // Text color
decoration: TextDecoration.underline, // Underline
text
decorationColor: Colors.red, // Color for text
decoration
decorationStyle: TextDecorationStyle.dashed, //
Decoration style
backgroundColor: Colors.yellow, // Text background
color
1-8 Expanded
This example demonstrates the versatility of the Column
widget in Flutter, allowing you to arrange child widgets
vertically with various alignment options. You can
customize the layout according to your application’s
needs using these properties.
Expanded(
flex: 2,
child: Container(
color: Colors.red,
child: Center(
child: Text('Expanded 1 (flex:
2)’,
style: TextStyle(color:
Colors.white)
1-9 Column
This example demonstrates the versatility of the Column
widget in Flutter, allowing you to arrange child widgets
vertically with various alignment options. You can customize
the layout according to your application’s needs using these
properties.
Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
width: 100, height: 50, color: Colors.red,
child: Center(child: Text('Item 1')),
),
Container(
width: 100, height: 50, color: Colors.green,
child: Center(child: Text('Item 2')),
1-10 Row
This example illustrates the flexibility of the Row widget in
Flutter, allowing you to arrange child widgets horizontally with
various alignment options. You can customize the layout based
on your application's requirements using these properties.
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Container(
width: 100, height: 50, color: Colors.red,
child: Center(child: Text('Item 1')),
),
Container(
width: 100, height: 50, color: Colors.green,
child: Center(child: Text('Item 2')),
1-11 ElevatedButton
ElevatedButton(
child: Text('Click Me',),
onPressed: () { print('Button clicked!'); },
onLongPress: () { print('Long press
triggered!’); },
style: ElevatedButton.styleFrom(
primary: Colors.blue,
onPrimary: Colors.white,
shadowColor: Colors.black,
elevation: 10,
padding: EdgeInsets.symmetric(horizontal: 30,
vertical: 15),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(30.0))
side: BorderSide( color: Colors.red , width: 2),
), ),
1-11 Custome Button
InkWell(
onTap: (){},
onLongPress: (){ },
child: widget
),

GestureDetector(
onTap: (){},
onLongPress: (){ },
child: widget
),
Thanks
Do you have any
questions?
!
Resources
 https://flutter.dev

You might also like