Getting Started with flutter

Udara Abeythilake
Sep 8, 2019 · 4 min read

In this tutorial, you will learn the basic things in flutter such as

  • What is flutter?
  • Why use flutter?
  • How to create a sample project in flutter?

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. The goal is to enable developers to deliver high-performance apps that feel natural on different platforms.

No mobile development experience is required to get started. Apps are written in Dart, which looks familiar if you’ve used a language like Java or JavaScript. Experience with object-oriented languages is helpful, but even non-programmers have made Flutter apps.

Why use flutter?

Be highly productive

  • Develop for iOS and Android from a single codebase. As the flutter is a hybrid platform the source code can run on both iOS and Android. Therefore fewer developers can use to create single app with less time and resources.
  • Do more with less code, even on a single OS, with a modern, expressive language and a declarative approach
  • Prototype and iterate easily
  • Experiment by changing code and reloading as your app runs (with hot reload)
  • Fix crashes and continue debugging from where the app left off

Well organized components

Widgets are the basic building blocks of a Flutter app’s user interface. Each widget is an immutable declaration of part of the user interface. Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.

A widget can define:

  • a structural element (like a button or menu)
  • a stylistic element (like a font or color scheme)
  • an aspect of the layout (like padding)
  • and so on…

Widgets form a hierarchy based on composition. Each widget nests inside, and inherits properties from, its parent. There is no separate “application” object. Instead, the root widget serves this role.

You can respond to events, like user interaction, by telling the framework to replace a widget in the hierarchy with another widget. The framework then compares the new and old widgets and efficiently updates the user interface.

Create beautiful, highly-customized user experiences

  • Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework
  • Realize custom, beautiful, brand-driven designs, without the limitations of OEM widget sets

How to create the first project in flutter?

In this section, I’m going to install flutter in windows platforms. From the beginning, I will explain how to install Flutter SDK and create a new project.

  • As the first step, you need to download the flutter SDK and configure your Machine to understand flutter SDK. To do that open your command line and go to the desired location on your pc.
  • Then clone the repository to that folder by using the following command

git clone -b stable https://github.com/flutter/flutter.git

  • Update your path to run the flutter command in your PC.
  • Run flutter doctor command to see if there any platform dependencies to complete the setup. This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform.

Now the platform setup is done. Next, we will see how to create a sample app using flutter. For that, I’m using Visual studio code. Before open the VS code select a folder to create your first project.

  1. Open that destination folder using VS code.
  2. Go to the extensions (View-> Extensions).
  3. Search the flutter extension and install.

4. Search the Dart extension and install.

5. Then press Ctrl+Shift+P command to create a new project and give the project name. From here in both the platform no difference. I’m selecting Visual Studio code as the IDE.

Now your project is created. Connect your mobile to pc to run the app on your device. Open the terminal and type flutter run command.

Conclusion

In this tutorial, you learn what is flutter and importance of flutter. In the next tutorial, I will make a full flutter project from scratch. For more details read Flutter Documentation

Udara Abeythilake

Written by

Full stack Developer at Eyepax IT Consulting (Pvt) Ltd.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade