Flutter in 7 Days

45 students enrolled

Flutter in 7 Days

Create high-quality, beautiful UIs and reach the top level of app development with Flutter - all in 1 week

45 students enrolled

Created by Packt Publishing

Last updated 4/2019

English

English [Auto-generated]

Preview this course

Flutter in 7 Days

$86.99 $124.99 30% off

5 hours left at this price!

30-Day Money-Back Guarantee

4 hours on-demand video
1 downloadable resource
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

Get introduced to basic Flutter concepts
Master internationalization (i18) for your apps based on the Redux architecture
Build a real-world app based on the Pexels .com API
Make use of basic and layout widgets, for both single-child and multiple-child layouts
Use widgets to better customize and control your apps
How animations play a vital role when adding interactivity to your application
Handle HTTP requests and state management with Redux
Build a real-world photos app that retrieves popular and featured images

+ – Flutter and Its Basic Components

10 lectures 30:07

This video provides an overview of the entire course.

The Course Overview

Preview 02:13

This video will give a basic introduction to Flutter.

• Introduce Flutter

Introduction

01:25

In this video, we’ll set up our operating system for Flutter development.

• Download the software and install them in the system to get ready for Flutter development.

• Visual Studio Code - https://code.visualstudio.com/download

• Flutter SDK Ehttps://storage.googleapis.com/Flutter_infra/releases/stable/windows/Flutter_windows_v1.0.0-stable.zip

• Android SDK Ehttps://developer.android.com/sdk/older_releases

• Setup environment variables

• Installing VS code

Installation

02:25

In this video, we will see what the widgets in Flutter are, and what their main categories are.

• Introduce widgets and get a basic idea about the stateful and stateless widgets

• Talk about stateless widgets

• Talk about stateful widgets

Widgets

03:09

Understand how to create a new project in Flutter, and what the basic structure of a Flutter project is

• Create a new Flutter project and see the introduction to the folders inside the project

• Use Flutter and create project_name to create a new Flutter project

• Get a basic idea about the different folders in the Flutter project

Basic Structure and Creating Flutter Project

02:14

In this video, we’ll understand how to use stateless widgets in Flutter.

• Code in Flutter, understand how to code a stateless widget

• Make a basic stateless widget

Stateless Widgets

04:44

In this video, we’ll understand how to use stateful widgets in Flutter.

• Understand how to code a stateful widget

• Make a basic stateful widget and understand about setState function

• Understand about the initState function

Stateful Widgets

05:39

Learn about assets in Flutter projects.

• Learn what assets are and see how to add assets in Flutter project

• Add an asset to the project folder

• Load that asset into our Flutter project

Assets

03:50

Learn about plugins in Flutter projects.

• Learn what plugins are and see how to add plugins in Flutter project

• Add package file to pubspec.yaml

• Import the plugin file to the project

Plugins

03:19

This video aims to explain the assignment for day 1.

Assignment

01:09

+ – The building blocks and widgets of Flutter

11 lectures 01:02:05

This video gives an overview of the topics for day 2 and also demonstrates the solution to the day 1 assignment.

• Demonstrate the solution using a real-world example

Assignment Solution

Preview 00:52

Learn how to use Text, Images, and Padding.

• Add a text and learn different options available in Text widget

Text, Images, and Padding

06:53

Learn how to use Row and Column.

• Add a Row and learn different options available in Text widget

• Add a Column and learn different options available in Text widget

Rows and Columns

06:29

Learn how to use Scaffold and AppBar.

• Add a Scaffold and learn different options available in Text widget

• Add an AppBar and learn different options available in Text widget

Scaffold and AppBar

11:51

Learn how to use Stack.

• Example showing the use cases of Stack

Stack

03:50

Learn how to use ListView and ListTile.

• Add a ListView and learn different options available in Text widget

• Add a ListTile and learn diff options available in Text widget

ListView and ListTile

11:15

Learn how to use Expanded.

• Example showing the use cases of Expanded

• Learn the properties provided by card Expanded widget

Expanded

02:39

Learn how to use Containers.

• Example showing the use cases of Containers

• Learn the properties provided by Container widget

Container

05:31

Learn how to use Cards.

• Example showing the use cases of Cards

• Learn the properties provided by Card widget

Card

04:23

Learn how to use Buttons.

• Add different types of Buttons and try them out

• Learn the properties provided by Button widget

Buttons

07:38

This video aims to explain the assignment for Day 2.

Assignment

00:44

+ – Animations

7 lectures 26:20

This video aims to give an overview of the topics for day 3 and also demonstrates the solution for the day 2 assignment.

• Demonstrate the solution using a real-world example

Assignment Solution

Preview 02:23

This video explains how the animations work in Flutter.

• How animations works?

How Animations Work?

02:28

The aim of this video is to create a basic animation in Flutter.

• Create a basic animation

• Create animation and Animation Controller object

• Use objects to create a simple animation

Create Animations

07:43

The aim of this video is to understand Animated Cross Fade widget.

• How Animated Cross Fade widget works?

• Use the previous video animation object to make Animated Cross Fade widget

Animated Cross Fade

05:22

The aim of this video is to understand Fade Transition widget.

• How Fade Transition widget works?

• Understand cross fades with examples of Flutter logo

Fade Transition

02:27

The aim of this video is to understand Hero widget

• How Hero widget works?

• Animating widgets from one widget to another

Hero Animations

05:16

This video aims to explain the assignment for day 3.

Assignment

00:41

+ – HTTP Package

4 lectures 08:46

This video aims to give an overview of the topics for day 4 and also demonstrates the solution for the day 3 assignment.

• Demonstrate the solution for the assignment using a real-world example

Assignment Solution

Preview 02:34

In this video, we will learn how to install http package into our app.

• Add http package in pubspec.yaml file

• Import the file into main.dart file

Add HTTP package

01:12

The aim of this video is to learn how to get data and show the data in the application.

• Understand how to fetch data from the online sources and show them into our application

• Fetch data from an online link and save it into a variable

• Show the stored data into the application

HTTP GET

04:39

This video aims to explain the assignment for day 4.

Assignment

00:21

+ – Advanced Widgets

6 lectures 26:55

This video aims to give an overview to the topics for Day 5 and also demonstrate the solution for Day 4 assignment.

• Demonstrate the solution for the assignment using a real-world example

Assignment Solution

Preview 01:45

What are Slivers and how to use them?

• CustomScrollView with example

• SliverAppBar with examples

• Sliver list with examples

Slivers

05:22

What is TabBar and how to use it?

• Initialize TabBarController

• Add TabBarView and give TabBarController

• Add TabBar and give same controller

TabBar

08:26

What is clipping and how to clip widgets?

• Use ClipOval to clip images in oval shapes

• Use ClipRRect to clip images and give rounded corners

Clippers

03:41

How to theme our app and different widgets used for theming?

• Use MaterialApp widget to theme our app

• Give different theme styles

• Use Theming widget to give Implicit themes

Theming

07:11

This video aims to explain the assignment for Day 5.

• Explain the assignment

Assignment

00:30

5 lectures 25:25

This video aims to give an overview to the topics for Day 6 and also demonstrates the solution for Day 5 assignment.

• Demonstrate the solution for the assignment using a real-world example

Assignment Solution

Preview 01:34

Why do we need Redux and what does it do?

• Explain the problems while building an app without using Redux architecture

• Understand what we need Redux for that matters to solve the discussed problems

Redux EThe Need

01:55

How is a Redux architecture used in the app?

• Build a sample app to understand how the Redux architecture is used

• Make reducers and model for the app

Redux Example EPart 1

06:23

Taking forward the app that we started in the previous video.

• Add Redux package to our project

• Learn about Store, StoreConnector, and StoreProvider

• Add more features in the app using the model and reducers file that we created in the last video

Redux Example EPart 2

14:43

This video aims to explain the assignment for Day 6.

• Explain the assignment

Assignment

00:50

+ – Real World Application: Building a Pexels Application

10 lectures 58:00

This video aims to give an overview to the topics for Day 7 and also demonstrates the solution for Day 6 assignment.

• Demonstrate the solution for the assignment using a real-world example

Assignment Solution

Preview 02:01

How do you register for the Pexels API?

• Register for Pexels API

Register for Pexels API

00:57

What will we be making in the app and what is the type of data that we’ll be receiving?

• Convert the json data to a dart object for easy usage

• Website to convert Json To dart - https://javiercbk.github.io/json_to_dart/

Application Architecture

03:07

How to fetch data from API?

• Fetch the data from API using http get

• Convert the json received into dart object created in the last video

Fetch Data

09:14

Creating the apps home page and adding two tabs.

• We’ll create the home page for the app and work on the wallpapers tab

• Send the received data to another file for Wallpapers page that we created and then display the data

• Make the design of the wallpapers tab look attractive

Home Page (Wallpapers Tab)

12:58

Adding pull to refresh in Wallpapers tab

• Add pull to refresh in Wallpapers tab using the RefreshIndicator widget

• Fetch the data as soon as the page is pulled down to show new images

Home Page (Wallpapers Tab Pull to refresh)

07:09

Making the second Search tab.

• Add TextFormField in the Search tab

• Fetch the data and show the wallpapers when the user enters the search text in text form field

Home Page (Search Tab)

16:56

How to finalize the app that we created and building the release APK.

• How to make the build version of an APK after making the necessary changes in the platform-specific files

Building Final APK (Release)

03:24

This video aims to explain the assignment for Day 7.

• Explain the assignment

Assignment

00:30

This video aims to demonstrate the solution for the Day 7 assignment.

• Demonstrate the solution using a real-world example

Assignment Solution

01:44

Requirements

Some mobile development experience on any platform will be beneficial.

Description

You'll gain the confidence to build customized UI's for your own projects using Flutter. You'll work with its cool features and understand how to compose widgets, add animations, and make your apps interactive in 7 days by building them throughout the course.

By the end of this course, you will be up-to-speed with Flutter development and will be able to build stunningly rich cross-platform applications with a single codebase.

About The Author

Aman Malhotra has been developing software for 3 years. He specializes in Android development. Recently, he switched to using Flutter, which saves him writing code in Kotlin/Java for Android and in Swift/Objective-C for iOS, and gives him the required high-quality apps that satisfy him and his customers. He hopes you'll enjoy learning and practicing building Flutter apps in this course

Who this course is for:

If you are a mobile developer looking to create some stunning UI's for your application development skills using Flutter, then this is the course you need! No previous experience with Flutter is assumed.