Welcome to FlutterLearn! We have a lot of content lined up for you, but before we get into the details, let’s first get familiar with what is Flutter, why we use it. This video will do just that, sit back and buckle up.

Introduction to Flutter- The What’s and The Why’s

Introduction

The language that a library uses is always an important aspect to know about. The Flutter team chose Dart for a reason and here is why and also how it helps the library and how knowing Dart will help you with the Flutter journey.

Reason why Dart holds the fort strong.

Tooling is an important part of a framework and Flutter provides just the right tools from its bag to help us, the developers. This video teaches you how to install VS Code and the Dart plugin for it.

Installing Visual Studio Code and the Dart Plugin.

Here is all you need to know about installing the Dart SDK on your system.

Installing Dart SDK.

Let’s dive into creating our very first Dart “Hello world” application.

Writing the first Dart Program.

Introduction To Dart

This video shows how to set up the Flutter SDK on systems.

Downloading/Cloning the Flutter SDK.

Final step is to add the Flutter plugin to your choice of editor and here is how you do it on VS Code.

Installing Flutter Plugin within VS Code.

This video shows the structure of a Flutter Project.

Understanding the structure of a Flutter Project.

Knowing and understanding the folder structure plays a vital role in understanding the app you are building as well and how you can use what the framework provides. Here is a detailed explanation of all the files that come with the initial set up of Flutter app. Want to say hello to the world of Flutter? Here is something that will help you understand a very rudimentary concept of the main, runApp function and introduce you to a simple Text widget. We will create a small app that displays “Hello World” in the centre of the screen.

Building a simple app from scratch.

Setting up Flutter

Everything is a widget. Widgets are the building blocks in a Flutter app. Everything you see on the screen is a widget and hence every UI element you code is a Widget. So, let’s take look at what these widgets are and how we can use them in our app.

Widgets and their role in a Flutter app.

Although you can use almost any widget in your root, runApp, here are some basic Widgets that help you structure your app and use a particular design (i.e material).

The MaterialApp and Scaffold widget.

One important UI feature in a mobile app is an AppBar a.k.a header. Flutter provides an inbuilt widget out of the box to design these headers.

AppBar.

Floating action buttons are a great way to show some persistent options that the user may need at any point and hence we intend to show this widget that helps you set up and customise to your needs.

FloatingActionButton.

Widgets, widgets, widgets! More widgets to teach you the basics.

More widgets - Text, Center and Padding.

One of the advantages of using Flutter is the amazingly short dev cycles. Meaning, the time you take to make a change in your code and see the result is very less. Hot reload and hot restart helps you achieve this.

Hot Reload and Hot Restart, the tricks of the trade.

The purpose of this lesson is to show you how to use all the basic widgets and ideas that we have so far and build a basic UI.

Recreating the Default Flutter App (UI Only).

Introducing Widget

A container is a convenience widget that combines common painting, positioning, and sizing widgets. Think of it like a widget that can customised really easily and in this video we are going to tell you all about it.

Containers and their role.

Images are an important part of any app. Some of them can be bundled with the app and some can be pulled from the internet. This video explains all you need to know about pulling images from the internet.

Importing images from a network.

Some images need to be bundled along with the app and this is how you do it.

Importing images as assets.

Icons are a visual representation of the functionality a particular element in the app provides. The video provides the knowledge of how one can implement these.

Adding icons to widgets.

A common orientation for elements in any design is vertical and horizontal. Flutter makes arranging the widgets in either of these orientation, easy. Listen to how you can use them in your app.

Understanding Row and Column.

Managing lists, or a scrollable list of items is a difficult task and Flutter makes it easy with the list widgets that it provides. Here, we show you how these widgets are used and how you can implement one on your own.

ListView and ListTile.

Handling long list of items can be even more difficult with pagination and everything. Flutter takes the steam off with its ListView.builder. Here, we introduce and explain how you can implement a seamless list view of elements.

Building views using ListView.builder.

Visual feedback for the users are important since they make the app feel intuitive. Here, we explain how you can use the InkWell widget and it’s importance.

Inkwell and its importance.

Common Widget in Flutter

Setting up state is an important part and this video helps you understand the implementation of it.

Stateless vs. Stateful widgets.

Defining a ‘State’.

Once the state is set up. how do you tell the framework that the widgets need to be rebuilt? Introducing setState. Here, we explain how you can use setState.

The setState() method.

Now that we know how to manage state to a basic level. Let’s take a look back at the App we showed earlier and implement the working of it completely. Here, we provide functionalities to the FAB button and increment a count that is displayed on screen when the FAB is tapped.

Returning to the Default Flutter App.

Stateless and Stateful Widgets- The Concept

Navigation is never as easy as it is here. We explain what a Navigator is and what a Route is.

Navigator and routes.

Sometimes, you need to pass information from one screen to the next. Here, we introduce a method of routing using the MaterialPageRoute.

Applying push() using MaterialPageRoute.

Letting the user to navigate to the previous is easy with the pop method. Here, we explain how exactly to use it.

Applying pop().

Organise all your routes in a single place and use the pushNamed method to navigate from one screen to the other for a clean and concise app code base. Here, we explain how you can implement the method.

Declaring parameter-less routes (pushNamed()) in MaterialApp widget.

Navigating through Navigation

An interactive app needs to have a source for the user to communicate back and text often helps a lot in communicating. Flutter helps in this regard by providing a text input field widget, which as the name suggests paints an input field on the screen. Here, we explain what these are and how they are used.

Using TextField.

Here, we discuss how you can handle the changes that the user makes in the input fields.

Handling changes to a TextField.

Here, we implement the MaterialPageRoute to the app we are building and pass values.

Pass retrieved values using Navigator.

Handling User Input.

Managing a universal app theme is important as it’s easy to make changes to and so Flutter provides the right tool to do that. Here, we use ThemeData which internally uses inherited widget system to provide you with the ThemeData throughout the app.

Applying ThemeData.

Planning the layout of your screen is another important aspect since it sets the structure in which you build your app upon. Here, we show an example of how to construct a basic layout with Rows, Columns and other widgets.

The Basic Screen Layout.

Basics on how to use custom fonts in a Flutter app is explained.

Applying Custom Font.

User Interface

Waiting to know what the ‘Future’ holds? Wait no more. We tell you all about what a ‘Future’ is in terms of Dart and show you how to use it.

The ‘Future’ function.

Dart provides an easy way to go about asynchronous programming and here we will discuss and implement asynchronous code.

‘async’ and ‘await’.

Asynchronous Functions

Connecting the app to the internet is easier than ever with the Dart’s http package. Let’s go ahead and use the package to make http request from our app to allow it to communicate with an external server via internet.

The ‘http’ package.

Object-oriented programming is deeply rooted in creating classes and objects and how these classes work together, so let’s make use of this to build a model class for the data we receive from the HTTP request. The data received from the HTTP request needs to be parsed and in this video, let’s see some action and parse the JSON in class objects that can be used later.

Model Class and JSON parsing.

Using a public API can be a good starting point to understanding how everything works. Here, let’s look at how we can use the News API to get a list of news feed.

Displaying Remote Data. (NEWS API).

Working with Remote Data

‘url_launcher’ is a package that let’s you open up a browser with the desired url, open other applications or use the underlying platform’s text or call services. This video will show how one can implement the same in the Flutter app.

The ‘url_launcher’ package.

Combining the concepts of navigation, passing values while navigating and HTTP calls, let’s pass some value got from the API to another screen in this tutorial.

Adding onTap() to NEWS API.

Using 3rd Party Packages

Creating a Grid View for N number of items.

GridView.

Flying an image from one screen to another.

The ‘Hero’ Animation

Stack

‘AlertDialog’ with buttons.

Other Useful Widgets

This course will walk you through the complete procedure of setting up Flutter and learning the basic concepts.