Flutter Tutorial for Beginners #5 - Scaffold & AppBar Widgets

Summary

This script provides a step-by-step guide on setting up a basic Flutter app using the Material App as the root widget. It introduces the Scaffold widget for implementing a basic layout, including an app bar, body, and floating action button. The tutorial demonstrates how to customize the app bar with a title and center-align text within the body. It also includes adding a floating action button with a text child. The script emphasizes the ease of using built-in widgets to quickly create a functional app layout and encourages further exploration of the Scaffold widget's properties.

Takeaways

• 📝 The script is a tutorial on setting up a basic Flutter app using the Material App widget as the root widget.
• 🏠 The 'home' property is crucial as it defines what appears on the home screen when the app is launched.
• 📝 Initially, the home screen contains a simple Text widget with the message 'Hey Ninjas'.
• 🛠 The Scaffold widget is introduced as a way to implement a basic layout, including an app bar and floating action buttons.
• 🔄 The Scaffold widget is a built-in Flutter widget that can be customized with various properties.
• 📝 The AppBar widget is used to create a title bar at the top of the app, and it can be customized with properties like 'title'.
• 🎨 The 'centerTitle' property is used to center the app bar title on the screen, which is common for Android devices.
• 📝 The 'body' property of the Scaffold widget is used to define the main content area of the app, placed below the app bar.
• 🔄 The Center widget is used to centralize its child widget, which in this case is a Text widget saying 'Hello Ninjas'.
• 🔄 The 'floatingActionButton' property is used to add a floating action button to the app, which can contain a child widget like Text.
• 🔗 The script encourages further exploration of the Scaffold widget and its properties through the official Flutter documentation.

Q & A

What is the purpose of the Material App widget in Flutter?

The Material App widget in Flutter serves as the root widget for an app, providing a basic structure and acting as a wrapper for the rest of the app.

What is the role of the 'home' property in the Material App widget?

The 'home' property in the Material App widget specifies the initial screen or widget that is displayed when the app is launched.

What is the Scaffold widget and how does it help in app development?

The Scaffold widget is a layout widget in Flutter that provides a basic layout for an app, including an app bar, a body, and a floating action button, making it easier to set up the structure of an app.

How can you add an AppBar to your app using the Scaffold widget?

You can add an AppBar to your app by specifying an 'appBar' property within the Scaffold widget, and setting its value to an AppBar widget with the desired properties.

What is the significance of the 'title' property in the AppBar widget?

The 'title' property in the AppBar widget determines the text that is displayed in the title section of the app bar.

Why is a Text widget used inside the 'title' property of the AppBar?

A Text widget is used inside the 'title' property of the AppBar to display text, as Flutter requires the use of a widget to output text rather than using a plain string.

What does the 'centerTitle' property do in the AppBar widget?

The 'centerTitle' property, when set to true, centers the title text within the AppBar on Android devices.

How can you add content to the body of the screen in a Flutter app?

You can add content to the body of the screen by specifying a 'body' property within the Scaffold widget, and setting its value to the desired widget, such as a Text widget.

What is the purpose of the Center widget in Flutter?

The Center widget in Flutter is used to centralize the content of its child widget, which is useful for aligning text or other widgets in the center of the screen.

How can you add a floating action button to your app using the Scaffold widget?

You can add a floating action button by specifying a 'floatingActionButton' property within the Scaffold widget, and setting its value to a FloatingActionButton widget with a 'child' property containing the desired content, such as a Text widget.

What is the 'hot restart' feature in Flutter and when is it used?

The 'hot restart' feature in Flutter allows developers to see the changes they made in the code without needing to relaunch the app. It is used to quickly refresh the app and display the updated screen after making modifications.

Outlines

00:00

🛠️ Setting Up a Basic Flutter App Layout

This paragraph introduces the process of setting up a basic Flutter application using the Material App widget as the root widget. It discusses the home property, which determines the home screen content, and the initial inclusion of a simple Text widget. The speaker then guides through the enhancement of the app's UI by introducing the Scaffold widget, which facilitates the creation of a basic layout including an app bar, floating action buttons, and more. The Scaffold widget is explained as a built-in Flutter SDK feature that can be customized with various properties. The paragraph concludes with the implementation of an AppBar widget with a title, demonstrating how to create a basic yet functional title bar for the app.

05:02

📝 Adding Content and Interactivity with Scaffold

The second paragraph delves into adding content to the app's body using the Scaffold widget. It starts by adding a Text widget within the body property and then discusses the use of a Center widget to center the text on the screen. The paragraph also covers the addition of a floating action button, which is a common UI element in mobile apps, and demonstrates how to nest a Text widget inside it to display text. The speaker emphasizes the ease of using the Scaffold widget to quickly implement a basic layout with interactive elements. The paragraph concludes with a reference to the Flutter documentation for further exploration of the Scaffold widget's capabilities and properties.

Keywords

💡Material App

Material App is a Flutter widget that serves as the root widget for an app, providing a consistent look and feel across different platforms by adhering to Material Design guidelines. In the video, it is used as the starting point for setting up the app's basic structure, acting as a wrapper for the rest of the app's widgets.

💡Home Property

The home property in Flutter is a widget that defines what is displayed on the initial screen of an app. In the script, it is mentioned as a part of the Material App setup, where it initially contains a single Text widget displaying 'Hey Ninjas', indicating the starting content of the app.

💡Scaffold Widget

The Scaffold widget in Flutter is a layout widget that provides a basic structure for an app, including an app bar, body, and potentially a floating action button. It is introduced in the script as a means to enhance the app's layout by replacing the simple Text widget with a more complex structure that includes an app bar and a body for additional content.

💡App Bar

An App Bar is a widget in Flutter that typically appears at the top of a screen and can contain a title, navigation buttons, and other interactive elements. In the video, the App Bar is configured within the Scaffold widget to display a title and is later centered using the 'centerTitle' property for aesthetic alignment.

💡Text Widget

The Text widget in Flutter is used to display a short piece of text in an app. Throughout the script, it is used to display messages like 'Hey Ninjas' and 'My First App' within the App Bar's title. It is a fundamental widget for displaying textual information in the user interface.

💡Widget Tree

A widget tree in Flutter represents the hierarchy of widgets that make up the user interface of an app. Each widget can be a parent to other widgets, creating a nested structure. The script discusses the creation of a widget tree programmatically, starting with the Scaffold and nesting other widgets like the App Bar and Text widgets within it.

💡Center Widget

The Center widget in Flutter is used to center its child widget both horizontally and vertically within the available space. In the script, it is used to centralize the 'Hello Ninjas' Text widget within the body of the Scaffold, demonstrating how to align content on the screen.

💡Floating Action Button

A Floating Action Button is a circular button that floats above the UI and is typically used for a primary action, such as adding an item or taking a photo. In the video, it is added to the Scaffold as a property and contains a Text widget with the message 'Click', showing how to place interactive elements in the UI.

💡Hot Reload

Hot Reload is a feature in Flutter that allows developers to see the effects of their code changes in real-time without needing to restart the app. The script mentions using hot reload to quickly view the changes made to the app's layout and UI after modifying the widget structure.

💡Flutter SDK

The Flutter SDK is a software development kit that contains the tools and libraries needed to build Flutter apps. The script refers to the built-in widgets that come with the Flutter SDK, such as Scaffold, App Bar, and Text, which are used to create the app's layout and interface without needing to create custom widgets from scratch.

Highlights

Introduction to setting up a basic hub using the Material App as the root widget.

Explanation of the 'home' property and its role in specifying the home screen content.

Utilization of the Scaffold widget to implement a basic layout for the app.

Inclusion of an AppBar property within the Scaffold to set up the top app bar.

Demonstration of how to use the AppBar widget to create a title bar.

Use of the 'title' property within the AppBar to display text.

Nesting of widgets within widgets to programmatically create a widget tree.

Introduction of the 'center' property to align the text centrally on the screen.

Explanation of the 'body' property in the Scaffold for specifying screen content below the app bar.

Inclusion of a Text widget within the body to display content.

Use of the Center widget to centralize the Text widget on the screen.

Introduction of the 'floatingActionButton' property for adding a floating action button.

Explanation of how to nest a Text widget within a FloatingActionButton.

Demonstration of creating a basic layout with the Scaffold widget.

Highlighting the Scaffold widget as a wrapper for different layout widgets like AppBar, body, and FloatingActionButton.

Encouragement to explore the Scaffold class on the Flutter Docs for more properties and examples.

Transcripts

okay then gang so we've seen now how to

set up a very very basic hub using the

material app as our root widget right

here and it acts as a wrapper for the

rest of our app now inside it we have

this home property which remember

specifies what is going to be on the

home screen when we load this app and

inside that at the minute we just

declare a single text widget which says

hey ninjas and we see over here looking

at a rather ugly so this is all a bit

boring at the minute and gradually what

we want to do is add more content to

this screen to make it look a bit better

so to do that the first thing we're

going to explore is a widget called the

scaffold widget now the scaffold widget

is going to allow us to implement a

basic layout for our app it's going to

allow us to set up an app bar at the top

some floating action buttons every one

and more so what we're going to do is

actually delete this text widget for now

and we're saying now the home property

should be a scaffold widget and by the

way all these widgets come built into

the flutter SDK out-of-the-box we can

build our own widgets later our own

custom ones but these ones come out of

the box that we can use so anyway this

scaffold widget is going to take a

multitude of different properties so we

can specify different things about the

base layout of our app the first thing

I'm going to do inside this is an app

bar property so up bar like that and

this app bar property is going to

specify how our app bar is going to look

at the top now the value of this

property is actually just going to be

another inbuilt widget which is called

up but like so and notice the convention

our widgets are all starting with a

capital letter and each new word starts

with a capital letter as well that's the

convention of these widgets so inside

the scaffold we now have the app bar

property and the value of that property

is an out bar widget now remember I said

put a comma after every value of every

property so let's put a comment there

and also a comma after scaffold as well

just in case we had more properties down

here later on okay then so inside the

app bar we can also

specify a couple of properties and this

is the general pattern here we have a

property with a value which is sometimes

a widget and inside that widget we can

have more properties and sometimes the

values of those properties and widgets

and it's had those widgets we can have

more properties and so forth because

we're nesting widgets within widgets

remember that widget tree structure I

showed you in one of the first slides

that's basically what we're doing here

programmatically creating a widget tree

and each widget has different properties

so the first property of this app bar is

going to be the title property and this

is going to say what is actually shown

what text is shown on the title of the

app bar now you might think we can just

say something like this hello and pass a

string but that's not the way flutter

works if we want to output some text we

need to use a text widget so we can say

text like so and then put the string and

what we want to show as the title inside

this text widget so I'm just going to

say my first app okay so let's try

previewing this I'm going to save it now

and go to run and I'm gonna go to hot

reload right here or rather hot restart

this one's hot reload we'll talk more

about that later

for now just click on hot restart it's a

bit like a refresh button for you to see

the new screen so let me press that and

now we can see this app bar at the top

it's all done for us we didn't have to

do any kind of styling or anything like

that it just comes out of the box we can

change the colors and I'm going to show

you how to do that later on but now we

can see a pretty decent looking title

bar or app bar at the top with a title

on it now at the minute

this is left-aligned and this is how it

looks on Android devices most of the

time so what I'm gonna do is use a

property called sensor title to

essentially align this and this we can

just set to a boolean which is going to

be true so this doesn't have to be a

widget this is just an option if you

like we're centralizing this so we set

it to true so if we save that now and

then we go to hot refresh or hot restart

then we can see it's now in the sensor

cool so that's our app bar

done so inside the scaffold now I'm

going to add a second property after the

app bar

so let's now UPS and do that for a start

and let's now go on to the next line

after the up bar and this time we'll do

a body property now this property is

going to specify what content is going

to go inside the body of the screen so

anything under the app bar over here now

all I'm gonna do is add in a text widget

and I'll say hello ninjas okay so if I

now save this and go down to run and

press hot restart we should see this

over here hello ninjas okay so it's

quite small but we'll talk about

textiles later on and it's also in the

top left now when we viewed that dummy

project it had the text in the center

and it looked a bit better so now I want

to do the same thing and the way we do

that is we wrap this widget inside a

center widget so I'm going to actually

cut this for him

instead of directly putting the text

inside the body property I'm going to do

a center widget like so so a center

widget centralizes whatever is nested

inside of it so inside the center widget

we're gonna have a child property we

don't just place in the text like this

we always have to have properties inside

widgets and when we nest something

directly inside another widget it's

normally the child property that we use

so we're saying okay well the child of

this Center widget the thing we're

nesting inside it is now going to be

this text widget so that means that it's

going to centralize this text widget on

the page so if I save it and go to hot

restart then we should see now that is

in the center cool okay so let's do a

one more property inside this scaffold

widget so after the body we'll come down

and we'll do another property called

floating action button and this is

basically get a place as a little

floating action button in the bottom or

right corner so the value for this

property again is going to be a widget

because like I said we have widgets as

values to properties a lot of the time

so this widget is called the floating

action button now just delete that on

pressed we're going to cover that later

don't worry about that now

that's how we react we use a pressing

this button but for now I just want to

show you how to get one on the screen so

comment after that then inside the

floating action button again we have a

child property because we're going to

nest another widget inside this widget

the floating action button just gets us

the button with nothing inside it but we

want to show text inside it so we'll say

that the text widget is going to be a

child of this and inside the text widget

we'll just say click that's what the

text is going to say so let me save it

and then hop restart come over here and

we should see now this floating action

button with this click message inside it

now nothing happens when we click on

this because we deleted that on pressed

property but we'll talk about that later

on for now I just wanted to show you how

to get a pond ring with a basic layout

like this and how quick that was using

this scaffold widget right here so

remember the scaffold widget is

basically like a wrapper to a few

different layout widgets things like the

app bar the body and also a floating

action button ok so generally speaking

when we're creating apps we're going to

be using the scaffold a lot to flesh out

the general layout of our apps but if

you want to read more about it now then

you can go to the scaffold class on the

floor to Docs I'll leave this link down

below so you can go and check it out and

if we scroll down here it gives you some

different examples it looks very similar

to what we've done over there and if we

scroll down even more then we're going

to see all of the different properties

we can add to the scaffold widget so app

bar we've seen that because I've done

that background color body we've got

that we've also got these others down

here there's loads of different

properties so you can have a play around

with those if you want to but we are

going to explore them more as we go

forward as well this is just an

introduction to it