WIDGETS INTRODUCTION
https://docs.flutterflow.io/resources/ui/widgets
https://flutterwidgets.com/article/Flutter_Widgets_A_Comprehensive_Guide.html
https://docs.flutter.dev/assets/images/docs/fwe/simple_composition_example.png
TEXT WIDGET PROGRAM
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter Lab'),
),
body: Center(
child: Text( 'I am Text Widget', style:
TextStyle(fontSize: 24),
),
),
),
);
}
}
MyApp (StatelessWidget)
│
└──
MaterialApp
│
├──
(title: 'Hello World App') [metadata]
│
└──
home: Scaffold
│
├── appBar: AppBar
│ │
│ └── title: Text(Welcome to
Flutter Lab)
│
└── body: Center
│
└── child: Text(I am Text Widget', style: TextStyle(fontSize: 24))
1.
style
style is a property name used in many Flutter widgets
such as Text.
It defines the visual styling of that widget.
For example, in a Text widget, the style property
controls how the text looks (font size, color, weight, etc.).
Its value is usually an object that describes the
style details.
2.
TextStyle
TextStyle is a class in Flutter that holds styling
information for text.
It contains properties like fontSize, color,
fontWeight, fontStyle, and many more.
When you assign style: TextStyle(...), you are
creating a TextStyle object that describes the visual format for the text.
import
'package:flutter/material.dart';
This line imports the Flutter material design library,
which contains pre-made widgets and tools for building apps that follow
Google's Material Design guidelines.
You need this import to use widgets like MaterialApp,
Scaffold, AppBar, Text, etc.
void
main() {
runApp(MyApp());
}
·
runApp is a top-level function provided by
the Flutter framework.
·
Its main job is to take a widget (usually
the root widget of your app, like MyApp()) and attach it to the screen.
·
Every Dart app starts from the main
function.
Here, runApp()
tells Flutter: "Start the app, and show the widget I pass to you."
MyApp()
is the root widget of this app.
class
MyApp extends StatelessWidget {
MyApp extends (inherits from) StatelessWidget.
A StatelessWidget means this widget:
·
Does not have any internal state that can
change over time.
·
Its UI is static and only depends on the
inputs (properties).
We use StatelessWidget here because the interface
shown doesn’t change dynamically.
@override
Widget
build(BuildContext context)
·
Declares a method named build.
·
Returns a value of type Widget.
·
Takes a parameter context of type
BuildContext (provides info
about widget location).
·
Starts the method body where you return
the UI widget tree.
return
MaterialApp(
MaterialApp is a convenience widget wrapping many
material design features.
It acts as the root of the app, setting:
·
App-wide title
·
Themes (colors, font styles)
·
Navigator (screens/pages)
·
And more.
title:
'Hello World App',
This is a string property passed to MaterialApp.
It sets the application’s title.
The title appears in places outside your app UI:
Android/iOS task switcher (when you view open apps)
Some accessibility tools
home:
Scaffold(
The home property defines the default screen or main
page of the app.
Scaffold is a widget that provides a basic layout
structure for Material apps.
It sets up common UI scaffolding like:
·
App bar on top
·
Main body area
·
Floating action buttons
·
Drawers, bottom navigation, etc.
appBar:
AppBar(
title: Text('Welcome to Flutter Lab),
),
appBar is a named parameter inside Scaffold.
AppBar creates a toolbar shown at the top of the
screen.
Here, inside AppBar:
title is set using a Text widget that displays
'Welcome to Flutter Lab’.
This text will appear centered in the app bar as the
screen’s heading.
body:
Center(
child: Text(
I am Text Widget',
style: TextStyle(fontSize: 24),
),
),
body is another named parameter in Scaffold.
It defines what goes inside the main area below the
app bar.
Here, we use a Center widget to center whatever is inside
it both vertically and horizontally.
The Center has a child widget:
Text(
I am Text Widget',
style: TextStyle(fontSize: 24),
)
A Text widget to display 'Hello World!'.
TextStyle(fontSize: 24) sets the font size to 24,
making the text larger and more readable.
What
is StatelessWidget?
A StatelessWidget is a widget that never changes after
it's built.
Once it appears on the screen, its content and
appearance stay the same.
It does not remember or react to any user interaction
or data changes.
Think of it like a photo or label that always looks
the same.
Example:
A button that just shows “Hello” and never changes.
A text label that always displays “Welcome”.
Because they don’t hold any data or state, stateless
widgets are simple and efficient.
What
is StatefulWidget?
A StatefulWidget is a widget that can change over
time.
It can remember information (called state) and update
its appearance when the state changes.
For example:
A counter that increases every time you tap a button.
A favorite icon that toggles between filled and empty
when clicked.
These widgets can react to user input, timers, network
data, or anything else that affects how they look.
Customizing
Text Style
Flutter’s TextStyle class allows you to customize text
with various properties such as font size, color, weight, and more. Here’s how
you can use it:
Example:
Text(
'Hello,
Flutter!',
style:
TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color:
Colors.blue,
letterSpacing: 2.0,
wordSpacing: 5.0,
),
)
Text
Alignment
Text alignment is crucial in UI design. The TextAlign
property lets you align text within its container.
Example:
Text(
'Center
Aligned Text',
textAlign:
TextAlign.center,
style:
TextStyle(fontSize: 18),
)
You can choose from several alignment options like
TextAlign.left, TextAlign.right, TextAlign.justify, and TextAlign.start.
Comments
Post a Comment