Flutter Mobile Development

Flutter is created by Google and is the future of all iOS and Android applications. It is powered by the Dart language

Last updated 2022-01-10 | 4.8

- Flutter Design & Development
- Dart Programming
- Android Programming

What you'll learn

Flutter Design & Development
Dart Programming
Android Programming
iOS Programming
Mobile Development
Swift Programming
Objective-C Programming
Kotlin Programming
Java Programming
Application Programming
Mobile Design
Semantics of general programming
The format of coding applications
All the features of Flutter
Application programming
Mobile programming

* Requirements

* Passion for learning Flutter & Dart
* Basic computer knowledge and skills
* Passion for programming
* Basic knowledge of computer science is optional
* Passion for mobile development

Description

  • Flutter Design & Development
  • Dart Programming
  • Android Programming
  • iOS Programming
  • Mobile Development
  • Swift Programming
  • Objective-C Programming
  • Kotlin Programming
  • Java Programming
  • Application Programming
  • Mobile Design
  • Semantics of general programming
  • The format of coding applications
  • All the features of Flutter
  • Application programming
  • Mobile programming

Course content

15 sections • 136 lectures

Introduction Preview 02:09

Course Introduction

Setup On Windows Preview 15:54

You will learn about setting up Flutter projects on Windows.

Setup On Linux Preview 13:52

You will learn about setting up Flutter projects on Linux.

Setup On Mac iOS Preview 14:19

You will learn about setting up Flutter projects on Mac for iOS development.

Setup On Mac Android Preview 11:36

You will learn about setting up Flutter projects on Mac for Android development.

App Base Code Preview 02:41

Learn about the applications setup code.

Text Preview 03:58

A run of text with a single style.

Container Preview 04:16

A convenience widget that combines common painting, positioning, and sizing widgets.

Row Preview 05:00

Layout a list of child widgets in the horizontal direction.

Column Preview 02:19

Layout a list of child widgets in the vertical direction.

Stack Preview 01:59

This class is useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the bottom.

Image Preview 06:08

A widget that displays an image.

Padding Preview 03:21

A widget that insets its child by the given padding.

Center Preview 01:57

A widget that centers its child within itself.

Align Preview 02:08

A widget that aligns its child within itself and optionally sizes itself based on the child's size.

Constrained Box Preview 02:30

A widget that imposes additional constraints on its child.

Baseline Class Preview 02:55

A widget that positions its child according to the child's baseline.

Aspect Ratio Preview 02:43

A widget that attempts to size the child to a specific aspect ratio.

Sized Box Preview 01:34

A box with a specified size. If given a child, this widget forces its child to have a specific width and/or height (assuming values are permitted by this widget's parent). If either the width or height is null, this widget will size itself to match the child's size in that dimension.

Transform Preview 03:13

A widget that applies a transformation before painting its child.

Quiz 1 - Widgets

Time to test your knowledge of widgets.

Pointers Preview 06:11

Pointers represent raw data about the user’s interaction with the device’s screen. There are four types of pointer events:

  • PointerDownEvent The pointer has contacted the screen at a particular location.

  • PointerMoveEvent The pointer has moved from one location on the screen to another.

  • PointerUpEvent The pointer has stopped contacting the screen.

  • PointerCancelEvent Input from this pointer is no longer directed towards this app.

Tap Preview 01:55

Tap

  • onTapDown A pointer that might cause a tap has contacted the screen at a particular location.

  • onTapUp A pointer that will trigger a tap has stopped contacting the screen at a particular location.

  • onTap A tap has occurred.

  • onTapCancel The pointer that previously triggered the onTapDown will not end up causing a tap.

Double Tap Preview 01:40

Double tap

  • onDoubleTap The user has tapped the screen at the same location twice in quick succession.

Long Press Preview 02:45

Long press

  • onLongPress A pointer has remained in contact with the screen at the same location for a long period of time.

Vertical Drag Preview 04:27

Vertical drag

  • onVerticalDragStart A pointer has contacted the screen and might begin to move vertically.

  • onVerticalDragUpdate A pointer that is in contact with the screen and moving vertically has moved in the vertical direction.

  • onVerticalDragEnd A pointer that was previously in contact with the screen and moving vertically is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.

Horizontal Drag Preview 04:13

Horizontal drag

  • onHorizontalDragStart A pointer has contacted the screen and might begin to move horizontally.

  • onHorizontalDragUpdate A pointer that is in contact with the screen and moving horizontally has moved in the horizontal direction.

  • onHorizontalDragEnd A pointer that was previously in contact with the screen and moving horizontally is no longer in contact with the screen and was moving at a specific velocity when it stopped contacting the screen.

Pan Preview 03:57

Pan

  • onPanStart A pointer has contacted the screen and might begin to move horizontally or vertically. This callback causes a crash if onHorizontalDragStart or onVerticalDragStart is set.

  • onPanUpdateA pointer that is in contact with the screen and is moving in the vertical or horizontal direction. This callback causes a crash if onHorizontalDragUpdate or onVerticalDragUpdate is set.

  • onPanEnd A pointer that was previously in contact with screen is no longer in contact with the screen and is moving at a specific velocity when it stopped contacting the screen. This callback causes a crash if onHorizontalDragEnd or onVerticalDragEnd is set.

Quiz 2 - Gestures

Time to test your knowledge on gestures.

Scaffold Preview 05:56

Implements the basic Material Design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.

Appbar Preview 05:14

A Material Design app bar. An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.

BottomNavigationBar Preview 07:33

Bottom navigation bars make it easy to explore and switch between top-level views in a single tap. The BottomNavigationBar widget implements this component.

TabBarView Preview 06:38

A page view that displays the widget which corresponds to the currently selected tab. Typically used in conjunction with a TabBar.

Drawer Preview 04:39

A Material Design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

SliverAppBar Preview 06:36

A material design app bar that integrates with a CustomScrollView.

Quiz 3 - Navigation Components

Time to test your knowledge of navigation components

FlatButton Preview 04:18

A flat button is a section printed on a Material Components widget that reacts to touches by filling with color.

RaisedButton Preview 03:21

A Material Design raised button. A raised button consists of a rectangular piece of material that hovers over the interface.

DropdownButton Preview 08:50

Shows the currently selected item and an arrow that opens a menu for selecting another item.


TextField Preview 04:09

Touching a text field places the cursor and displays the keyboard. The TextField widget implements this component.

CheckBox Preview 06:22

Checkboxes allow the user to select multiple options from a set. The Checkbox widget implements this component.

Radio Button Preview 03:49

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

PopupMenuButton Preview 06:39

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.

IconButton Preview 03:41

An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

ButtonBar Preview 02:43

A horizontal arrangement of buttons.

Floating Action Button Preview 04:05

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

Switch Preview 03:57

On/off switches toggle the state of a single settings option. The Switch widget implements this component.

Slider Preview 04:37

Sliders let users select from a range of values by moving the slider thumb.

Date Picker Preview 04:43

Date pickers use a dialog window to select a single date on mobile.

Time Picker Preview 06:50

Time pickers use a dialog to select a single time (in the hours:minutes format) on mobile.

SimpleDialog Preview 08:26

Simple dialogs can provide additional details or actions about a list item. For example they can display avatars icons clarifying subtext or orthogonal actions (such as adding an account).

AlertDialog Preview 06:16

Alerts are urgent interruptions requiring acknowledgement that inform the user about a situation. The AlertDialog widget implements this component.

BottomSheet Preview 05:32

Bottom sheets slide up from the bottom of the screen to reveal more content. You can call showBottomSheet() to implement a persistent bottom sheet or showModalBottomSheet() to implement a modal bottom sheet.

ExpansionPanelList and ExpansionPanel Preview 07:23

Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.

SnackBar Preview 07:17

A lightweight message with an optional action which briefly displays at the bottom of the screen.

Cupertino Setup Preview 02:20

Lets setup our project so it can support for Cupertino widgets and components.

CupertinoActionSheet Preview 06:12

An iOS-style modal bottom action sheet to choose an option among many.

CupertinoActivityIndicator Preview 01:06

An iOS-style activity indicator. Displays a circular 'spinner'.

CupertinoAlertDialog Preview 04:20

An iOS-style alert dialog.

CupertinoButton Preview 03:11

An iOS-style button.

CupertinoPageScaffold Preview 03:54

Basic iOS style page layout structure. Positions a navigation bar and content on a background.

CupertinoPicker Preview 04:29

An iOS-style picker control. Used to select an item in a short list.

CupertinoPopupSurface Preview 03:54

Rounded rectangle surface that looks like an iOS popup surface, such as an alert dialog or action sheet.

CupertinoSegmentedControl Preview 03:48

An iOS-style segmented control. Used to select mutually exclusive options in a horizontal list.

CupertinoSlider Preview 04:05

Used to select from a range of values.

CupertinoSwitch Preview 02:38

An iOS-style switch. Used to toggle the on/off state of a single setting.

CupertinoNavigationBar Preview 03:52

An iOS-style top navigation bar. Typically used with CupertinoPageScaffold.

CupertinoTabBar Preview 04:30

An iOS-style bottom tab bar. Typically used with CupertinoTabScaffold.

CupertinoTabScaffold Preview 04:28

Tabbed iOS app structure. Positions a tab bar on top of tabs of content.

CupertinoTextField Preview 04:28

An iOS-style text field.

Quiz 4 - Input/Selection Components

Time to test your input knowledge.

Icons Preview 04:26

A Material Design icon.

Chip Preview 03:15

A Material Design chip. Chips represent complex entities in small blocks, such as a contact.

Tooltip Preview 02:05

Tooltips provide text labels that help explain the function of a button or other user interface action. Wrap the button in a Tooltip widget to show a label when the widget long pressed (or when the user takes some other appropriate action).

DataTable Preview 09:18

Data tables display sets of raw data. They usually appear in desktop enterprise products. The DataTable widget implements this component.

Card Preview 06:16

A Material Design card. A card has slightly rounded corners and a shadow.

LinearProgressIndicator Preview 03:21

A material design linear progress indicator, also known as a progress bar.

CircularProgressIndicator Preview 03:41

A material design circular progress indicator, which spins to indicate that the application is busy.

Quiz 5 - Information Displays

Time to test your knowledge of implementing information displays

GridView Preview 03:12

A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. The GridView widget implements this component.

ListView & ListTile Preview 03:56

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

Stepper & Step Preview 06:32

A Material Design stepper widget that displays progress through a sequence of steps.

Divider & divideTiles Preview 04:34

A one logical pixel thick horizontal line, with padding on either side.

Aligning Widgets Preview 03:02

You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties. For a row, the main axis runs horizontally and the cross axis runs vertically. For a column, the main axis runs vertically and the cross axis runs horizontally.

Sizing Widgets Preview 03:19

When a layout is too large to fit a device, a yellow and black striped pattern appears along the affected edge.

Packing Widgets Preview 01:07

By default, a row or column occupies as much space along its main axis as possible, but if you want to pack the children closely together, set its mainAxisSize to MainAxisSize.min. The following example uses this property to pack the star icons together.

Nesting rows and columns Preview 02:47

The layout framework allows you to nest rows and columns inside of rows and columns as deeply as you need.

Add, Update and Delete Widgets Preview 05:51

Learn how to modify existing widgets and elements with new content.

Quiz 6 - Layout

Time to test your layout skills

Navigate to a new screen and back Preview 05:29

Most apps contain several screens for displaying different types of information. For example, an app might have a screen that displays products. Users can then tap the image of a product to get more detailed information on a new screen.

Multiple Files For Each Screen Preview 03:11

You can separate each screen into individual files which are much easier to maintain.

Send data to a new screen Preview 04:41

Oftentimes, we not only want to navigate to a new screen, but also pass some data to the screen as well. For example, we often want to pass information about the item we tapped on.

Remember: Screens are Just Widgets™. In this example, we’ll create a List of Todos. When a todo is tapped on, we’ll navigate to a new screen (Widget) that displays information about the todo.

Return data from a screen Preview 05:25

In some cases, we might want to return data from a new screen. For example, say we push a new screen that presents two options to a user. When the user taps on an option, we’ll want to inform our first screen of the user’s selection so it can act on that information!

Navigate with named routes Preview 03:08

In the Navigate to a new screen and back recipe, we learned how to Navigate to a new screen by creating a new route and pushing it to the Navigator.

However, if we need to navigate to the same screen in many parts of our apps, this can result in code duplication. In these cases, it can be handy to define a “named route,” and use the named route for Navigation.

To work with named routes, we can use the Navigator.pushNamed function. This example will replicate the functionality from the original recipe, demonstrating how to use named routes instead.

Animating a widget across screens Preview 02:18

It’s often helpful to guide users through our apps as they navigate from screen to screen. A common technique to lead users through an app is to animate a Widget from one screen to the next.

Stateless vs Stateful Widgets Preview 07:30

Stateful and stateless widgets. A widget is either stateful or stateless. If a widget can change—when a user interacts with it, for example—it's stateful. ... A widget's state is stored in a State object, separating the widget's state from its appearance.

Quiz 7 - Navigation & Routing

Time to test your knowledge on navigation and routing.

Tween Animation Preview 07:09

Short for in-betweening. In a tween animation, the beginning and ending points are defined, as well as a timeline, and a curve that defines the timing and speed of the transition. The framework calculates how to transition from the beginning point to the end point.

Staggered Animation Preview 03:48

Animations that are broken into smaller motions, where some of the motion is delayed. The smaller animations may be sequential, or may partially or completely overlap.

Reverse and Stop Animations Preview 02:18

Animations can also be reversed/stopped at any moment.

Call Android Java Code Preview 08:12

Learn how to call Java code from Dart.

Send Parameters To Android Java Code Preview 06:46

Learn how to send values to Java files.

Call Android Kotlin Code Preview 08:18

Learn how to call Kotlin code from Dart.

Send Parameters To Android Kotlin Code Preview 04:50

Learn how to send values to Kotlin files.

Call iOS Objective-C Code Preview 09:49

Learn how to call Objective-C code from Dart.

Send Parameters To iOS Objective-C Code Preview 04:44

Learn how to send values to Objective-C files.

Call iOS Swift Code Preview 08:01

Learn how to call Swift code from Dart.

Send Parameters To iOS Swift Code Preview 05:12

Learn how to send values to Swift files.

Quiz 8 - Platform Specific Code

Time to test your knowledge of platform specific functionality

Remove Debug Badge Preview 00:47

Remove the debug banner from your applications

Build & Release For Android Preview 04:17

To prepare your application for release, you need to configure, build, and test a release version of your application. The configuration tasks are straightforward, involving basic code cleanup and code modification tasks that help optimize your application. The build process is similar to the debug build process and can be done using JDK and Android SDK tools. The testing tasks serve as a final check, ensuring that your application performs as expected under real-world conditions. When you are finished preparing your application for release you have a signed APK file, which you can distribute directly to users or distribute through an application marketplace such as Google Play.

Build & Release For iOS Preview 05:58

Learn to build and release for iOS platforms.

Quiz 9 - Building & Releasing

Time to test your knowledge of building and releasing applications

Fetch data from the internet Preview 13:28

Fetching data from the internet is necessary for most apps. Luckily, Dart and Flutter provide tools for this type of work.

Making authenticated requests using HTTP Headers Preview 03:04

In order to fetch data from many web services, you need to provide authorization. There are many ways to do this, but perhaps the most common uses the Authorization HTTP header.

Parsing JSON in the background Preview 16:53

By default, Dart apps do all of their work on a single thread. In many cases, this model simplifies coding and is fast enough that it does not result in poor app performance or stuttering animations, often called “jank.”

However, you may need to perform an expensive computation, such as parsing a very large JSON document. If this work takes more than 16 milliseconds, your users will experience jank.

To avoid jank, you need to perform expensive computations like this in the background. On Android, this would mean scheduling work on a different thread. In Flutter, you can use a separate Isolate.

Working with WebSockets Preview 10:04

In addition to normal HTTP requests, you can connect to servers using WebSockets. WebSockets allow for two-way communication with a server without polling.

In this example, you’ll connect to a test server provided by websocket.org. The server simply sends back the same message you send to it.

Reading & Writing Files Preview 13:42

In some cases, it can be handy to read and write files to disk. This can be used to persist data across app launches, or to download data from the internet and save it for later offline use.

In order to save files to disk, you’ll need to combine the path_provider plugin with the dart:io library.

Quiz 10 - Networking

Time to test your knowledge on networking

Storing Key-Value Data On Disk Preview 02:47

If you have a relatively small collection of key-values that you’d like to save, you can use the shared_preferences plugin.

Normally you would have to write native platform integrations for storing data on both platforms. Fortunately, theshared_preferences plugin can be used to persist key-value data on disk. The shared preferences plugin wraps NSUserDefaults on iOS and SharedPreferences on Android, providing a persistent store for simple data.

Data Persistence Using SQLite Preview 04:26

If you write an app that needs to persist and query larger amounts of data on the local device, consider using a database instead of a local file or key-value store. In general, databases provide faster inserts, updates, and queries compared to other local persistence solutions.

Flutter apps can make use of the SQLite databases via the sqflite plugin available on pub. This recipe demonstrates the basics of using sqflite to insert, read, update, and remove data about various Dogs!

Calculator Part 1 - TabBar Creation Preview 12:23

Let's start developing our calculator application and implement a TabBar.

Calculator Part 2 - Implementing The Tabs Preview 05:18

Let's implement each tab and add the following functionality:

  • Addition

  • Subtraction

  • Multiplication

  • Division

Quiz 11 - Data Persistence

Time to test your data persistence knowledge

Calculator Part 3 - Tab Persistence Preview 03:13

Let's add tab persistence so the tabs don't reload every time the user changes a tab

Changing Android App Icon Preview 04:50

Learn how to change the app icon for the Android part of your project.

Changing iOS App Icon Preview 01:00

Learn how to change the app icon for the iOS part of your project.

Change App Display Name Preview 04:49

Learn how to change your apps display name.

Flutter Documentation Preview 00:00

Flutter Documentation

hackr.io Preview 00:00

hackr.io

Medium Preview 00:00

Medium

Flutter Institute Preview 00:00

Flutter Institute

Google Codelabs Preview 00:00

Google Codelabs

Awesome Flutter List Preview 00:00

Awesome Flutter List

Tutorial Kart Preview 00:00

Tutorial Kart

Dart Documentation Preview 00:00

Dart Documentation