Skip to content
Flutter Class
How to Get Started
Basics Of Flutter 💻
import “package:flutter/material.dart”;
import ‘package:flutter/material.dart’; is what you always need to write when you start a new project or .dart file. This is because it basically imports everything you need to create a basic Flutter application. There are many other packages and extensions you can connect to your Flutter application, but these are just add ons that are only necessary if you are looking for specific functionality.
Did you like this explanation?
Widget Tree’s
Everything in flutter is an object. Objects are also known as widgets. Different widgets can be stacked and create something called a widget tree! Widget trees are important to understand so you can structure your code correctly to get the output that you want.
Here is an example of a widget tree beside the end product of what ti produces:
Did you like this explanation?
Stateless and Stateful Widgets
In flutter you can make something called a class, a class is where you can start off a new widget tree and make a new page. There are two different types of classes, Stateless widgets and Stateful widgets.
Stateless widgets are for when you are making a page that doesn’t change in real time. This is useful when you want a static UI and aren’t making real time changes such as communicating with a backend, retrieving data and displaying it, etc,
A Stateful widget is when you are making changes in real time.
If you are first starting out with Flutter you are most likely going to be working with Stateless widgets most of the time to create simple UI and functions that don’t require a setState function that is enabled through a Stateful widget.
Did you like this explanation?
Scaffolds
Scaffolds are very important when coding in flutter because it provides a lot of different things that you would usually need in apps and provides default settings for text widgets, button widgets, etc. It is most typically used every time you are creating a screen since it has certain key properties such as appBar, body, drawer, and other things you see frequently in apps.
Properties:
appBar: App bars are commonly used in most apps and can only be accessed using Scaffolds.
body: This is the widget where you input anything you want within the body of your page
drawer: This allows you to create a drawer on the side of the screen that can open up to display navigation, profiles, and pretty much whatever you want! You can learn more in the Widgets section of this document.
There are many more things you can do with Scaffold so feel free to check out the official Flutter documentation to get the full set of properties and possibilities.
Did you like this explanation?
Properties
Properties are the certain things you can do with a certain widget. For example the Scaffold widget has the some properties such as:
appBar and body
Did you like this explanation?
Columns, Rows, Stacks and ListViews
Columns, Rows, Stacks and ListViews are all widgets in Flutter that allow you to structure your widgets in a certain format. These widgets all have the property children: because they all take in multiple widgets.
Formatting:
Column: Structures widgets top to bottom of each other vertically
Row: Formats widget side by side horizontally
Stack: Puts widgets on top of each other
Here are some of the commonly used properties of the Stack widget:
Stack( children: [], alignment: , fit: , textDirection: ,);ListView: Formats widgets top to bottom like a Column but can also scroll
Did you like this explanation?
Container
The container widget is one that you will use very often in your code. Oftentimes it is used for formatting like putting space around widgets, but can also be colored to add decoration to your app.
Properties:
child: The container widget only takes in one child so if you want to have multiple then you will have to put in a multi-child widget such as a column or row
width: You can manipulate the width of the container and the height as well
height:
padding: Padding is a very useful property that allows you to put a padding of pixels around the child of the Container. This helps with the UI of your app and creating nice UI designs with spaced out widgets. You use the EdgeInsets widget within this property.
decoration: Decoration is very useful if you are using the Container for decoration purposes instead of formatting. You can do multiple things in BoxDecoration including changing the color of the Container, adding a border, creating a shadow, and more!
There are several other properties you can use to customize your Container. Container is one of the widgets you’ll be using time and time again so feel free to look into the official Flutter documents to see everything you can do with them.
Did you like this explanation?
Widgets 📱
What are Buttons
Buttons are also commonly used in apps and it core function is something called onPressed. This is where you specify what you want to button to do when you press it. Learn about the different kinds of buttons in the next lesson 👇
Did you like this explanation?
Different Kinds of Buttons
While buttons seem like a pretty simple thing to have in an app they are very important. And in flutter, there are a lot of buttons you can use. So here’s a list of buttons with descriptions:
Flat Button
A button with not much decoration and no elevation. The two required fields are child and onPressed().
Raised Button
A raised button is pretty much the same as the FlatButton just with an elevation that increases when you press it.
Floating Action Button
A floating action button is a button that can have a child as an icon but can also have anything else as its child including a Text Widget. It is usually used in a Scaffold using the floatingActionButton function.
Icon Button
A icon button is a button that has an icon as its child.
InkWell
An InkWell is a button you can put anything in and then if you click it it will do whatever you say it should do. Instead of an onPressed() function is uses an onTap() function instead.
Gesture Doctor
Gesture Doctor is basically an InkWell except with a lot of other functions it can preform when pressed.
Activity Button
An activity button is another button you can use that allows you to put borders around your button directly. And you are able to put images inside your button along with some other functions.
Ghost Button
A ghost button cannot have images but you specify your border color, your fill color, your text color, etc. directly inside of the button.
These are just some buttons that you are able to use and there are probably more that you can use with different functions you can use inside of them.
Divider
A divider is a type of widget that displays a thin line to divide different parts of your app. An example of a divider is this:
Divider( height: 60.0,)persistentFooterButton
A persistentFooterButton is a button in the bottom right corner and is a property of the Scaffold. This allows you to put many buttons at the bottom of your screen. An example is this:
persistentFooterButtons: <Widget>[ RaisedButton( elevation: 0, onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => Login(), )); }, color: Colors.black, child: Icon( Icons.arrow_back, color: Colors.white, ), ),],This created this at the bottom of my screen:
Navigator
Navigator is usually used with buttons to make it so when you press a button it goes to another screen. Here’s an example of it being used.
onPressed: () => Navigator.push( context, SlideLeftRoute(screen: Screen())),This is inside an onPressed function which means that it will be activated once a button is clicked. Then it is pushing another screen in front of another screen.
MainAxisAlignment
Rows and Columns both allow you to do something called MainAxisAlignment that allow you to change how the Widgets inside the Row and Column are positioned.
For example:
Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), Icon(Icons.star, size: 50), ],)This would make it so that all the Widgets inside the Row would start at the beginning of where the Row started. There are many other formatting options as well such as:
MainAxisAlignment.center
mainAxisAlignment: MainAxisAlignment.end
mainAxisAlignment: MainAxisAlignment.spaceBetween
mainAxisAlignment: MainAxisAlignment.spaceEvenly
Did you like this explanation?
Formatting widgets
Formatting widgets are used for formatting. They are invisible but are still used for the UI. Let’s say you have five Text widgets that you want in a row. You can use the Row() widget to put them in a row. The row isn’t actually visible but the Text widgets are now in a row.
Columns and rows are commonly used but there are a lot of formatting widgets that you can use in flutter
Circle Avatar
Circle Avatars are a type of widget that takes either a photo or something else and makes it into a circle.
Here are the properties of the Circle Avatar widget:
backgroundColor
This allows you to change the background color if you are not putting an image in your circle avatar widget
backgroundImage
This is where you can add an image to make your image in a circular shape
child
This is in a lot of widgets such as Columns, Rows, and Containers. This is just for the next widget in the widget tree branching down from your Circle Avatar
foregroundColor
This is the default color for Text in the Circle Avatar.
radius
This is where you set the size of your Circle Avatar
maxRadius
This is where you can set the maximum radius you would like your Circle Avatar to be
minRadius
This is where you can set the minimum radius you would like your Circle Avatar to be
onBackgroundImageError
This is for when there is an error retrieving the image you would like to display in your Circle Avatar. Then you can tell it what to do in that scenario.
Did you like this explanation?
Drawers
Drawers are a type of Widget in flutter that is a flap that comes out. They are part of Scaffolds...here is an example of a Drawer:
drawer: Drawer( elevation: 16, child: Column( children: [ UserAccountsDrawerHeader( accountName: Text( "Sumay McPhail", style: TextStyle(fontWeight: FontWeight.bold), ), accountEmail: Text("sumay.l.mcphail@gmail.com"), currentAccountPicture: CircleAvatar( backgroundColor: Colors.white, child: Text("SM"), ), ), ] ),)That code creates this:
As you can see I added something called UserAccountsDrawerHeader. This is a built in Widget that created the setup we see above it come with the properties:
accountName
accountEmail
currentAccountPicture
Icons
Icons are a type of widget in flutter that allows you to make things like email icons and all different types like this one:
Some icons need to have a dependency in pubspec.yaml. But some of them can just be used like this:
Icon( Icons.email)ThemeData
ThemeData is a property within the MaterialApp widget you call when first creating your Flutter App. Essentially what ThemeData does is it allows you to create a uniform Theme throughout your entire app without changing the color, text style, and various other things all over your app!
ListTile
ListTile is a type of widget that can be a button. The two properties you’ll mainly be using is:
title
leading
These two creates two things in a row...for example:
ListTile( title: Text("Email"), leading: Icon(Icons.mail),),This would create this:
You are also able to use the property onTap
TextFormFields
TextFormFields are things that you can write stuff in. TextFromFields are used very often in apps of all kind. There are lots of different functions you can use with text form fields.
This is what one could look like:
CupertinoActionSheet
CupertinoActionSheets are the things in iOS platforms that pops up from the bottom like this:
Here’s how you would usually make a CupertinoActionSheet:
RaisedButton( // First create a button that will show the CupertinoActionSheet color: Colors.black, child: Text( 'Click me', style: TextStyle(color: Colors.white), ), onPressed: () { // Make the onPressed property open the CupertinoActionSheet final act = CupertinoActionSheet( title: Text('Select Option'), // This is a Text that is at the top actions: <Widget>[ CupertinoActionSheetAction( // This is how you make an option child: Text('1'), onPressed: () {}, ), CupertinoActionSheetAction( child: Text('2'), onPressed: () {}, ), CupertinoActionSheetAction( child: Text('3'), onPressed: () {}, ) ], cancelButton: CupertinoActionSheetAction( // This is the Cancel button child: Text('Cancel'), onPressed: () { Navigator.pop(context); }, ) ); showCupertinoModalPopup( // This is what makes the action sheet pop upWant to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.