Introduction

A quote by the very company that developed flutter, sums it all up...

"Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.” - Google

The Keywords to understand in the above quote are

UI Toolkit

A UI kit generally contains a bunch of graphic files including UI components (buttons, check boxes, progress bars, etc.) for the purpose of user interface design. This prevents the wasting of time figuring out how to implement components, but create wonderful designs.

Native mobile application

Native mobile application, are usually applications that has been written using the native development language and tools specific to that platform. A native iOS application written in Swift or Objective-C and compiled through Xcode, a native Android application written in Kotlin or Java and compiled using Android Studio.

Since these applications are developed using the platform’s default solutions, developers have full and easier access to the device’s capabilities; like all the device’s sensors, the user’s address book. Native applications are also more performant than web or hybrid applications.

However, any application written for iOS using Swift cannot run on Android, and vice versa, thus forcing you to develop specifically for each platform.

These disadvantages are not the issue in flutter. To know why, see Flutter Architecture.

Codebase

The source code. By single codebase it means that you can create web, mobile and desktop applications by writing code only for one and allow access to all through this. The Programming language flutter uses is Dart.

Why Flutter?

For a start, have a look at companies that use flutter

Flutter provides the advantage of native applications providing performance, greater control over the hardware as well as ease of use for developers.

Flutter Architecture

Best to get the overview from flutter itself to know about it and it's uses.

Technical overview

Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web ( beta), and desktop ( technical preview) from a single codebase. The goal is to enable developers to deliver high-performance apps that feel natural on different platforms. We embrace differences in scrolling behaviors, typography, icons, and more.

https://flutter.dev/docs/resources/technical-overview

Here is the architecture in short.

How Flutter Works - Build Flutter

Flutter is built in a whole new way, compared to other frameworks, working more like a gaming engine, than a traditional application framework. I will go through the high level basics of how Flutter works, and how it delivers the simple, high performance outcome. Starting at a very high level, your app is composed of ...

https://buildflutter.com/how-flutter-works/

Here is a video explaining the same.

How is Flutter different for app development

In this video, hear Martin Aguinis from the Flutter team discuss what goes on under the hood when you create apps with Flutter and how it's different from ot...

https://youtu.be/l-YO9CmaSUM

What does flutter consist of?

Flutter consists of two important parts:

• An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).

• A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.

Installation

Here is how you can install Flutter. Do not install Android Studio right now, this week you do not require it. Read until writing your first flutter app.

Install

How to set up your code editor.

https://flutter.dev/docs/get-started/install

To use flutter consistently between different terminal sessions, go through this

Linux install

To install and run Flutter, your development environment must meet these minimum requirements: Operating Systems: Linux (64-bit) Disk Space: 600 MB (does not include disk space for IDE/tools).

https://flutter.dev/docs/get-started/install/linux#update-your-path

Basics

Dart

To develop with Flutter, you will use a programming language called Dart. You can download dart sdk or use the online DartPad. But as we are developing flutter apps, we do not need Dart sdk.

Dart focuses on front-end development, and you can use it to create mobile and web applications.

Let's learn a little about it. (Use below given online IDE)

DartPad

https://dartpad.dartlang.org/

Topcoder

Topcoder is a crowdsourcing marketplace that connects businesses with hard-to-find expertise. The Topcoder Community includes more than one million of the world's top designers, developers, data scientists, and algorithmists. Global enterprises and startups alike use Topcoder to accelerate innovation, solve challenging problems, and tap into specialized skills on demand.

https://www.topcoder.com/thrive/articles/Dart%20Programming%20Language

Dart Programming - Syntax

Syntax defines a set of rules for writing programs. Every language specification defines its own syntax. A Dart program is composed of − Variables and Operators Classes Functions Expressions and Programming Constructs Decision Making and Looping Constructs Comments Libraries and Packages Typedefs Data structures represented as Collections / Generics Let us start with the traditional "Hello World" example − main() { print("Hello World!"); } The main() function is a predefined method in Dart.

https://www.tutorialspoint.com/dart_programming/dart_programming_syntax.htm

Create your first app

The best way to learn flutter is to create an app on your own. Dont worry, its easy!

If you are more of a watch-and-learn person, here's a full video to help you get started. Just skip the initial installation parts:

Flutter Tutorial for Beginners - Build iOS and Android Apps with Google's Flutter & Dart

You don't need to learn Android/ Java and iOS/ Swift development to build real native mobile apps! Join the full Flutter course: https://acad.link/flutter Ch...

https://youtu.be/GLSG_Wh_YWc

Or if you want to read and learn, you can visit these:

The Flutter Series: Exploring a Flutter project and building your first Flutter app

The Complete Flutter Series is a series of articles focused on cross-platform app development on the Flutter framework for everyone from beginners to experienced mobile developers. Flutter is a cross-platform mobile app development framework by Google and is an alternative to traditional Android or iOS development.

https://medium.com/@dev.n/the-complete-flutter-series-article-1-exploring-a-flutter-project-and-building-your-first-flutter-e438ea941d70

The Flutter Series: Basic Widgets and Layout

The Complete Flutter Series is a series of articles focused on cross-platform app development on the Flutter framework for everyone from beginners to experienced mobile developers. In the last article we talked about a Flutter project and the files it includes. We also explored the code of the default counter app and dived into how the app works.

https://medium.com/@dev.n/the-complete-flutter-series-article-2-basic-widgets-and-layout-in-flutter-92a4fbd4a3e1

For reference, keep this handy

Basic Understanding

Flutter Widgets - Javatpoint

In this section, we are going to learn the concept of a widget, how to create it, and their different types available in the Flutter framework. We have learned earlier that everything in Flutter is a widget. If you are familiar with React or Vue.js, then it is easy to understand the Flutter.

https://www.javatpoint.com/flutter-widgets

Flutter - Container Cheat Sheet

A convenience widget that combines common painting, positioning, and sizing widgets. Container Class URL The Container widget is used to contain a child widget with the ability to apply some styling properties. If the Container widget has no child it will automatically fill the given area on the screen, otherwise it will wrap the height & width of the given child element.

https://medium.com/jlouage/container-de5b0d3ad184

What is Future in flutter?

You must have encountered keywords like async, await and Future till now. These are very important blocks that one should comprehend.

Get this concept with this video created by Google developers themselves

Async/Await - Flutter in Focus

This is the fourth video in the Flutter in Focus series on asynchronous coding in Dart. In this episode, learn how to use the async and await keywords with D...

https://www.youtube.com/watch?v=SmTCmDMi4BY

Optional topics

Local database

So far so good. Let's learn a new concept - how to store the information in mobile memory?

Let's create a simple dynamic to-do list app

To-do List in Flutter with SQLite as local database

Introduction Data is very important for users since it would be inconvenient for them to type their information every time or wait for the network to load the same data again. In situations like this, it would be better to save data locally. In this tutorial, we'll learn how to crate To-do list with...

https://simpleactivity435203168.wordpress.com/2019/09/19/to-do-list-in-flutter-with-sqlite-as-local-database/

Or if you would like to work it out with a video -

Using SQLite in Flutter

If you'd like to see a written version of this video check out the link below: http://garrettlove.com/using-sqlite-in-flutter/ Channel Survey: https://forms....

https://www.youtube.com/watch?v=xrCBVwYjcvQ

Task

All the details of the task are provided in the README.md file.

As you are aware, you need to fork from and the repository, clone the forked repository, complete the task, commit and push your changes and finally open the pull request back here.