Flutter Crash Course #7 - Scaffold, AppBar, Text & FloatingActionButton
Online development, no setup required. Topics covered -
-- main.dart
-- main function
-- runApp function
-- MaterialApp Widget -- home property
-- Text Widget -- TextStyle property
-- Scaffold Widget
-- AppBar Widget -- title property
-- FloatingActionButton Widget
-- Center Widget
Intro
____________
Today, we’re diving into something super exciting—building user interfaces with Flutter. Flutter is an amazing framework that lets you create beautiful apps with ease, and the best part? It works for mobile, web, and desktop applications, all from the same codebase.
In this video, we’re going to explore one of the most essential building blocks of any Flutter app—the Scaffold. Think of the Scaffold as the skeleton or foundation of your app. It provides spaces for things like an AppBar at the top, a main content area, a floating action button, and even a navigation drawer. Once you understand the Scaffold, you’ll be able to start building amazing UIs in Flutter.
main.dart file
_____________
This is the entry point of your Flutter app—it’s where everything begins. At the top of the file, you’ll see a function called main(). This is the first thing Flutter runs when your app starts. Inside main(), there’s a function called runApp(). This tells Flutter to load the widget you pass to it and display it on the screen.
MaterialApp.
______________
The MaterialApp widget is like the outermost wrapper of your app. It’s what brings in Google’s Material Design, making your app look polished and consistent with modern UI standards. Without MaterialApp, you wouldn’t have access to things like themes, navigation, or widgets like the AppBar. Think of it as the backbone of a Flutter app that ensures everything is styled and behaves correctly.
Inside the MaterialApp, we see the home property. This tells Flutter which widget should be the starting point, or the “home screen,” of your app. Right now, it’s set to a Text widget that displays the words "Hello World".
Text Widget
______________
Now, let’s talk about the Text widget.The Text widget is one of the simplest and most commonly used widgets in Flutter. It’s designed to display—you guessed it—text! Whether it’s a title, a paragraph, or just a single word, the Text widget is what you use to show it on the screen.
Here, the Text widget has a property called data. This is just a fancy way of saying, “What text do you want this widget to display?” In this case, the data is set to "Hello World".
AppBar
_________
Inside the Scaffold, add the appBar property. Write appBar first like this to name the property you are specifying. Then put a colon and add the widget Name AppBar. Notice that the property names are lower camel case. They start with a small letter and then each new word starts with a capital letter. On the other hand the widget names are upper camel case, they start with a capital letter and each new word also starts with a capital letter.
We will now specify a title property for the AppBar. This can take any widget and for now we’ll pass a text widget to it by specifying the same hello world text widget now as a title to the app bar. Here is how your code will now look. Now click run again. You’ll see a blue bar at the top with the text “Hello World."
body Property
____________
Below appBar, add the body property: For the value of the property first add a center widget by writing center and to that add a child and specify a text widget as the child widget for this center widget. Now we’ll also specify a style property for the text. For now write style, followed by a colon and then Text style with font size : 24 in parenthesis
FloatingActionButton
_______________________
Finally, let’s add a floating action button (FAB). This is the round button you often see in the bottom-right corner of apps.
Write floatingActionButton followed by a colon like this and the widget name FloatingActionButton with 2 parenthesis
Add the following properties to the button -
First, add an onPressed property. This is the action that’ll happen when the button is pressed. For now we specify the code as follows with a print statement. This is an anonymous function that we’ll cover later - a call back that is triggered on this button proess
Then add the child property similar to what we did for the center widget. This basically tells flutter to use the specified child widget as the child for the parent floating action button.
#Flutter, #FlutterTutorial, #FlutterBasics, #FlutterScaffold, #LearnFlutter, #DartProgramming, #FirstFlutterApp, #FlutterWidgets, #MaterialApp, #TextWidget, #AppBar, #FloatingActionButton, #CenterWidget, #WidgetTree, #FlutterUI, #FlutterFlow, #TheAILanguage, #NoCodeTools, #MobileAppDevelopment, #WebDevelopment, #ProgrammingTutorial, #CodingForBeginners, #AppDevelopment, #ForYou, #FYP
