Flutter & Dart Development For Building iOS and Android Apps
4.2 (480 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
29,213 students enrolled

Flutter & Dart Development For Building iOS and Android Apps

Flutter is created by Google and is the future of all iOS and Android applications. It is powered by the Dart language
4.2 (480 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
29,213 students enrolled
Created by Frahaan Hussain
Last updated 3/2019
English [Auto]
Current price: $119.99 Original price: $199.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 8 articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 125 lectures 10:01:01
+ Introduction
6 lectures 01:00:31

Course Introduction

Preview 02:09

You will learn about setting up Flutter projects on Windows.

Preview 15:54

You will learn about setting up Flutter projects on Linux.

Setup On Linux

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

Setup On Mac iOS

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

Setup On Mac Android

Learn about the applications setup code.

Preview 02:41
+ Widgets
14 lectures 44:01

A run of text with a single style.


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


Layout a list of child widgets in the horizontal direction.

Preview 05:00

Layout a list of child widgets in the vertical direction.


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.


A widget that displays an image.

Preview 06:08

A widget that insets its child by the given padding.

Preview 03:21

A widget that centers its child within itself.


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


A widget that imposes additional constraints on its child.

Constrained Box

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

Baseline Class

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

Aspect Ratio

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.

Preview 01:34

A widget that applies a transformation before painting its child.


Time to test your knowledge of widgets.

Quiz 1 - Widgets
5 questions
+ Gestures
7 lectures 25:08

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.

Preview 06:11


  • 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

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

Double Tap

Long press

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

Long Press

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.

Preview 04:27

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.

Preview 04:13


  • 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.


Time to test your knowledge on gestures.

Quiz 2 - Gestures
4 questions
+ Navigation Components
6 lectures 36:36

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


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


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

Preview 07:33

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


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


A material design app bar that integrates with a CustomScrollView.


Time to test your knowledge of navigation components

Quiz 3 - Navigation Components
3 questions
+ Input/Selection Components
34 lectures 02:40:13

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


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

Preview 03:21

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


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


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


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.

Preview 03:49

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


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

Preview 03:41

A horizontal arrangement of buttons.


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.

Floating Action Button

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


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


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

Preview 04:43

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

Time Picker

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).


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


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.


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

ExpansionPanelList and ExpansionPanel

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

Preview 07:17

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

Cupertino Setup

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


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


An iOS-style alert dialog.


An iOS-style button.


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

Preview 03:54

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


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


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


Used to select from a range of values.


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


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


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


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

Preview 04:28

An iOS-style text field.


Time to test your input knowledge.

Quiz 4 - Input/Selection Components
5 questions
+ Information Displays
7 lectures 32:22

A Material Design icon.


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

Preview 03:15

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).

Preview 02:05

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


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


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


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


Time to test your knowledge of implementing information displays

Quiz 5 - Information Displays
3 questions
+ Layout
9 lectures 34:20

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


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

Preview 03:56

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

Stepper & Step

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

Divider & divideTiles

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.

Aligning Widgets

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

Sizing Widgets

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.

Packing Widgets

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

Nesting rows and columns

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

Preview 05:51

Time to test your layout skills

Quiz 6 - Layout
3 questions
+ Navigation & Routing
7 lectures 31:42

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.

Navigate to a new screen and back

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

Preview 03:11

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.

Send data to a new screen

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!

Return data from a screen

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.

Navigate with named routes

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.

Animating a widget across screens

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.

Stateless vs Stateful Widgets

Time to test your knowledge on navigation and routing.

Quiz 7 - Navigation & Routing
3 questions
+ Animation
3 lectures 13:15

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.

Tween Animation

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.

Preview 03:48

Animations can also be reversed/stopped at any moment.

Reverse and Stop Animations
+ Platform Specific Code
8 lectures 55:52

Learn how to call Java code from Dart.

Call Android Java Code

Learn how to send values to Java files.

Preview 06:46

Learn how to call Kotlin code from Dart.

Call Android Kotlin Code

Learn how to send values to Kotlin files.

Send Parameters To Android Kotlin Code

Learn how to call Objective-C code from Dart.

Call iOS Objective-C Code

Learn how to send values to Objective-C files.

Send Parameters To iOS Objective-C Code

Learn how to call Swift code from Dart.

Preview 08:01

Learn how to send values to Swift files.

Send Parameters To iOS Swift Code

Time to test your knowledge of platform specific functionality

Quiz 8 - Platform Specific Code
2 questions
  • Passion for learning Flutter & Dart
  • Basic computer knowledge and skills
  • Passion for programming
  • Basic knowledge of computer science is optional
  • Passion for mobile development

Learn about everything there is to know about Flutter Applications and How To Program Them. A step by step process is used to show explain every facet of these topics.

NOTE: This course includes information on iOS and Android!

Gain a good understanding of the following concepts with this course:

  1. What Flutter is?

  2. Flutter Certifications

  3. How to develop using Flutter Applications

  4. Features of the Dart programming language

  5. Coding semantics

  6. Mobile programming

  7. Design practises of applications

  8. Application programming

  9. Network programming

Flutter is one of the most popular mobile frameworks for iOS and  Android in the world that is requested by all companies such as Google, Facebook and Microsoft for mobile development. This course will ensure you are not left out as more and more companies request this awesome framework. This course will teach you everything about programming Flutter applications.

You will receive all the knowledge to use and leverage the powerful technology behind these amazing and wonderful platforms.

Over 350,000 students have enrolled on my courses and all of them are extremely satisfied. You will also be satisfied with this course. If you do not like the course, remember that within 30 days you can request a full refundI guarantee you satisfaction.

If you have any questions regarding the topics covered in this course, please feel free to ask. I'm always happy to help those who want to learn.

To summarise this is what you get:

• Lifetime access to HD quality videos. No monthly subscription. Learn at your own pace, whenever you want.

• All videos are downloadable. Learn wherever you want, even without an internet connection!

• Downloadable starter code and final code for each section.

• Free helpful support in the course Q&A when you have questions or get stuck.

• Multiple coding challenges to practice your new skills (solutions included).

Sounds great? Then start this adventure today by clicking the “Take this course" button, and join me in the only Flutter course that you will need!

Who this course is for:
  • Anyone looking to learn about Flutter & Dart
  • Developers looking to learn the skills needed to utilise Flutter features
  • Mobile developers
  • People looking to learn about programming
  • Those seeking to understand how Flutter works
  • People seeking guidance on how to create Flutter based programs
  • Beginners and experts in this field
  • People seeking more knowledge on the various features of the Dart programming language
  • People with a desire to improve their programming knowledge
  • Mobile developers