Lecture 3:

Basic Flutter Widgets

 Flutter File Structure
• The file structure is the organization of the data of an application.
• The file structure is something that plays a very important role in the
effective and easy management of the project be it of any size.
• As the size of a project grows, it becomes more and more important to
have a proper structure and format for the code
Assets: static assets for the app

 This directory is on the root level will

contain all the static assets that are used in
the application, for example, fonts, icons,
logos, background images, demo videos, etc.
 It is very much recommended that we should
have different directories for a different type
of data for example images, videos & logos,
should have a different folder of their own so
that it becomes easier to maintain and access
them.
lib: Entire code of the Application
• Lib: This is the most important folder in
the project, used to write most of the dart
code. By default, the lib folder contains
the main. dart file, which is the
application's entry point. This
configuration, however, can be changed.
Potential subfolders in lib folder
• Screens
• Providers
• Service
• Theme
• Models
• Blocs
…
 test
• Testing codes
 Here, you can put your unit and widget tests, which are also just Dart
code.
 As your app expands, automated testing will become an increasingly
important technique to ensure the stability of your project.
 Android
• Android configuration folder
- build.gradle
- AndroidManifest.xml
 ios
• Ios configuration files
- Runner
- pods
 Pubspec.yaml
• Every Flutter project includes a pubspec.yaml file, often referred to as the
pubspec. A basic pubspec is generated when you create a new Flutter
project. It’s located at the top of the project tree and contains metadata
about the project that the Dart and Flutter tooling needs to know.
• The pubspec file specifies dependencies that the project requires, such
as particular packages (and their versions), fonts, or image files. It also
specifies other requirements, such as dependencies on developer
packages (like testing or mocking packages), or particular constraints
on the version of the Flutter SDK.
Flutter Code organization
 Main.dart
• The foundation of any Flutter app, the main.dart file, should hold very
little code and only serve as an overview to an app.
• The widget being run by runApp should be a StatelessWidget, and the
itself should be no more complicated than a simple MaterialApp.
• The MaterialApp itself should have no heavy code in it, instead
pulling the Theme and the widget screens from other files.
void main(){
runApp(StaticApp());
}

class StaticApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
 Layouts in Flutter
• The core of Flutter’s layout mechanism is widgets.
• In Flutter, almost everything is a widget—even layout models are
widgets.
• The images, icons, and text that you see in a Flutter app are all
widgets.
• But things you don’t see are also widgets, such as the rows, columns,
and grids that arrange, constrain, and align the visible widgets.
 Widget
• Widgets describe what their view should look like given their current
configuration and state.
• When a widget’s state changes, the widget rebuilds its description,
which the framework diffs against the previous description in order to
determine the minimal changes needed in the underlying render tree to
transition from one state to the next.
 Stateless widget
• A widget that does not require mutable state.
class MyWidget extends StatelessWidget {
const MyWidget({super.key});

@override
Widget build(BuildContext context) {
return Container();
}
}
 Stateful Widget
• A stateful Widget means a widget that has a mutable state
class MyWidget extends StatefulWidget {
const MyWidget({super.key});

@override
State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

@override
Widget build(BuildContext context) {
return Container();
}
}
import
'package:flutter/material.dart'; The runApp() function takes the given Widget
and makes it the root of the widget tree.
void main() {
runApp( In this example, the widget tree consists of two
widgets, the Center widget and its child, the Text
const Center( widget.
child: Text(
'Hello, world!'
),
),
);}
• When writing an app, you’ll commonly author new widgets that are subclasses of
either StatelessWidget or StatefulWidget, depending on whether your widget
manages any state.
• A widget’s main job is to implement a build() function, which describes the
widget in terms of other, lower-level widgets
 Everything in Flutter should be thought of as living in a tree structure.
 Every widget in Flutter is supposed to perform a single small task.
 On their own, widgets are classes that perform tasks on the user interface.
 A Text widget displays text.
 A Padding widget adds space between widgets.
 A Scaffold widget provides a structure for a screen.
 The real power of widgets comes not from any individual class, but from how you
can chain them together to create expressive interfaces.
Creating immutable widgets
• A stateless widget is the primary building block for creating user
interfaces.
• This widget is simple, lightweight, and performant.
• Flutter can render hundreds of stateless widgets without breaking
sweat.
• Stateless widgets are immutable.
• The only way to modify a stateless widget is by deleting it and
creating a new one.
• Every Flutter app starts with the main function., you also need to call the runApp function:
void main() => runApp(StaticApp());
• This line initializes the Flutter framework and places a StaticApp, which is just another
stateless widget, at the root of the tree.
• The root class, StaticApp, is just a widget. will be used to set up any global data that needs
to be accessed by the rest of our app.
• Every item in Flutter inherits from the widget class.
• If you want it on the screen, it's a widget.
• Boxes are widgets.
• Padding is a widget.
• Even screens are widgets.
• The core data structure in a Flutter app is the tree. Every widget can have a child or
children, which can have other children, which can have other children... This nesting is
referred to as a widget tree.
 Material apps
• The core of every StatelessWidget is the build() method.
• Flutter will call this method every time it needs to repaint a given set of widgets.

@override
Widget build(BuildContext context) {
return MaterialApp(
home: ImmutableWidget(),
);
}
 Material apps are one of the primary building blocks for apps that follow Google's
Material Design specification
 This widget creates several helper properties, such as navigation, theming, and
localization.
 You can also use a CupertinoApp if you want to follow Apple's design language, or a
WidgetsApp if you want to create your own.
 There are some widgets that use different property names to describe
their child.
 MaterialApp uses home, and Scaffold uses body.
 Using the MaterialApp widget is entirely optional but a good practice.
 Even though these are named differently, they are still the same as
the child property that you will see on most of the widgets in the
Flutter framework.
 Container widget
• container is similar to a div in HTML. It's rendered as a box that has many styling options
• The Container widget lets you create a rectangular visual element. A container can be decorated with a
BoxDecoration, such as a background, a border, or a shadow.
@override
Widget build(BuildContext context) {
return Container(
color: Colors.green,
child: Padding(
padding: EdgeInsets.all(40),
child: Container(
color: Colors.purple,
),
),
);
}

 The Padding widget will adjust the spacing of its child, which can be any widget of any shape or size.
Scaffold Widget

• Android and iOS user interfaces are based on two different design languages.
• Android uses Material Design, while iOS uses Cupertino
• Material and Cupertino, provide a set of widgets that mirror the user experience of their respective
platforms.
• These frameworks use a widget called Scaffold (CupertinoScaffold in the Cupertino framework) that
provides a basic structure of a screen.
• Scaffold widget are used to add an AppBar to the top of the screen and a slide-out drawer that you can
pull from the left, and body.
• AppBar is persistent header that lives at the top of the screen and helps you navigate from one screen
to the next.
• The scaffold will expand to fill the available space. That
usually means that it will occupy its entire window or device
screen
• Elements
AppBar
BottomAppBar
FloatingActionButton
BottomSheet
Drawer
body: is the primary content of the scaffold
• Which is a horizontal bar typically shown at the top
of an app using the appBar property.
• App bars typically expose one or more common
actions with IconButtons which are optionally
followed by a PopupMenuButton for less common
operations (sometimes called the "overflow menu").
appBar: AppBar(
leading:Text('') ,
title: Text('') ,
actions: [],
),.
appBar: AppBar(
backgroundColor: Colors.indigo,
title: Text('Welcome to Flutter’),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(10.0),
child: Icon(Icons.edit), ),
],

)
 Drawer
• A panel displayed to the side of the body, often hidden on mobile
devices.
• You can easily add to Scaffold widget:
drawer: Drawer(
child: ListView()
),
 Text
• The Text widget lets you create a run of styled text within your
application.
Attributes:
Text(“HELLO!”, style: TextStyle(fontSize: 14, fontweight:
FontWeight.bold))
• Scaffold widget as the root widget for your screen, as you have in this recipe, but it is not
required.
• You generally use a Scaffold widget when you want to create a screen.
• Widgets that do not begin with Scaffold are intended to be components used to compose
screens
• Scaffolds are also aware of your device's metrics.

Center Widget
A Center widget centers its child both horizontally and vertically.
• To make Widget element to center of the container widget(upper father widget)
Center(
child: Text(“Centered Text”);
)
AspectRatio widget
 You can use the AspectRatio widget when you want to size a widget
following a specific aspect ratio.
 The AspectRatio widget tries the largest width possible in its context,
and then sets the height applying the chosen aspect ratio to the
width.
 For instance, an aspect ratio of 1 will set the height to be equal to the
width.
 Icon
Icon(
child: Icons.home,
color:Colors.red,
size: 10,
)
• Icon widget have on tap functionality, but you can wrap this widget
with other widgets
 Image
• NetworkImage(String url): this widget is user to
read image from the network/remote server
• Image.asset(String image_path): this widget helps
to read image from local asset folder.
• Image.file(File file): read image from file
• Image.memory(Uint8List byte): read an image from
byte array
 TextButton
TextButton(
style: TextButton.styleFrom(
textStyle: const TextStyle(fontSize: 20),
),
onPressed: () {},
child: const Text('Enabled'),
),
 Column
• A widget that displays its children in a vertical array.
• To cause a child to expand to fill the available vertical space, wrap the child in an
Expanded widget.
Column(
children:<Widget> [
Text(“Hello”),
Container()
])
 Row
• A widget that displays its children in a horizontal array.
• To cause a child to expand to fill the available horizontal space, wrap
the child in an Expanded widget.
Row(
children:<Widget> [
Text(“Hello”),
Container()
])
THANK YOU!