Flutter Class Curriculum and Resources

Learning how to code is becoming more and more essential as much of what we value now is digital. In this curriculum I will be walking through some basics and other useful widgets and functions within the programming language flutter. I teach a Flutter and Python class every Monday through Thursday at 9:00 AM EST.

If you are interested in joining you can submit an application at https://www.wequil.school/

--

Downloading Flutter

Before you can get started you have to download flutter. Here is the official documentation on how you can download Flutter on any operating system: https://flutter.dev/docs/get-started/install

If you want some more instruction, I've written out some of my own documentation with more guidance on how to do it easily and correctly here: https://coda.io/@sumay-mcphail/learning-flutter/getting-started-21

--

Curriculum

You can find my full curriculum here as well as other resources: https://coda.io/@sumay-mcphail/learning-flutter

import “package:flutter/material.dart”;

import ‘package:flutter/material.dart’; is what you always need to do when you start a new project or .dart file. This is because it gets all the materials you need to start coding.

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, like this one!

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. In other words, 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 and the UI is absolute and there usually isn’t a lot of backend action.

A Stateful widget is when you are making changes in real time.

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.

AppBars

App bars are commonly used in most app and can only be accessed using Scaffolds.

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

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.

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,
       ),
   ),
],

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.

DebugShowCheckedModeBanner

In the corner of your simulator you may notice a red banner in the corner the says debug.

To get rid of it in your main.dart you can write debugShowCheckedModeBanner: false in order to get rid of it.

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: MainAxisAlignment.center
mainAxisAlignment: MainAxisAlignment.end
mainAxisAlignment: MainAxisAlignment.spaceBetween
mainAxisAlignment: MainAxisAlignment.spaceEvenly

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.

Custom Widgets

Custom Widgets are used when you are making things multiple times. Why Re-write the same code over and over again when you can just make a custom widget?

Custom widgets can also be made to have certain parts of it changed based on your needs. For example, a menu. Every item on the menu is going to have a title, a picture, a price, a calorie count, and a list on ingredients. The formatting is the same, but all the different components will change. You can use a custom widget for this as well!

Drawers