Your First Flutter App in 30 Minutes

You may know my past affair with Xamarin, which somehow died a natural death. In today’s post, we’re taking a look at Flutter. If you want to know what is Flutter and how to build your first Flutter app in less than 30 minutes (including installation time) – let’s jump right into it 😉

Table of Contents

What is Flutter?

Flutter is an open-source platform and development kit created by Google. You can use it to create mobile (Android, iOS), desktop (Windows, Mac, Linux) and recently also web applications.

Flutter is quite new, as it’s first official version 1.0 was released in December 2018. Before, it was developed and used internally by Google for a few years.

Since this time, countless Flutter apps have been published. You can find their list for instance here. One of the most well-known Flutter apps is Xianyu app created by Alibaba and used by 50M+ people.

The main purposes of Flutter are claimed to be fast development, beautiful and consistent UIs and native performance on each platform.

Dart as a programming language

Flutter uses Dart as a programming language. Why is that? Well, of course, Dart is also developed by Google 😁 However, one of the real reasons is believed to be performance.

As you probably know, Flutter is not the first (and not the last) cross-platform mobile development platform. Its main competitor is React Native, which uses JavaScript. Dart compiles to the given platform’s native machine code. Thanks to that, it doesn’t have to use a JavaScript bridge to interact with native components that React Native apps have to do. I don’t know how true this is in real life and how it helps with performance, but that is one of the reasons for using Dart as a programming language for Flutter apps.

Dart is a UI-oriented language. For C/C#/Java developers, Dart’s syntax will be rather familiar and easy to learn. It’s object-oriented, including support for classes and interfaces. The language is type-safe, meaning it combines static and runtime types checking.

Dart is supported by its virtual machine, which also provides – amongst others – a garbage collector (if you don’t know what the GC is, check out this post).

Here’s a simple program written in Dart:

	main() {
	var myCar = new Car("Cybertruck", new DateTime(2021, 01, 01));
	myCar.describe();
	}

	class Car {
	String model;
	DateTime productionDate;

	// Ctor: notice the syntactic sugar members' assignment
	Car(this.model, this.productionDate) {
	// Some other ctor init code here
	}

	int get productionYear =>
	productionDate?.year;

	void describe() {
	print('Car: $model, produced in $productionYear');
	}
	}

view raw main.dart hosted with ❤ by GitHub

You can play with the code yourself in the DartPad.

Another interesting feature that is possible thanks to Dart is the hot reload. We’ll explore it later, but it significantly speeds up the development and testing time.

If you want to learn more about Dart, check out the official docs.

Everything as a widget

The main concept in building Flutter apps are widgets. In Flutter, everything is a widget – buttons, texts, menus, colors, themes, spacings and paddings. Even your Flutter app is a widget.

What’s very interesting is that Flutter doesn’t use platform native widgets. Instead, it provides its own set of widgets for each platform, e.g. Material Design for Android and Cupertino widgets for iOS. Additionally, as a programmer, you can create your own widgets. Thanks to that, all Flutter apps look pretty much the same on every Android/iOS version. You don’t need to worry about some UI elements changes between OS releases. At the same time, an app built using these widgets looks like native GUI.

Thanks to the widgets concept, Flutter apps can be easily personalized and branded. Recent researches show that customers are now starting to prefer more specific-looking apps to standard and boring native-designed UIs.

The drawback which I see about widgets is that there’s normally A LOT of source code in Flutter apps. Don’t get confused straightaway 😉

Installation and configuration

Now, let’s get into the real work. It surprised me how easy it is to start working with Flutter. As you’ll see in a moment, you can build quite a nice-looking mobile app with Flutter in less than 30 minutes!

There are several possibilities to work with Flutter. You can easily set up Android Studio or IntelliJ. For example purposes, we’ll focus on running and debugging an Android application on Windows PC using Visual Studio Code. If you’re on Mac or Linux, check out a corresponding official installation guide.

Install Flutter and Android SDK

The installation process is quite easy. Initially I wanted to describe it here for you, but actually the official installation docs do it pretty well 🙂 I’ll just guide you through the steps below with links to the official installation guide.

Install Flutter SDK and Android Studio

First of all, install Flutter SDK and Android Studio (which is required for Android SDK) following this installation guide. The process is fairly easy and should not take more than 15 minutes. Remember about using flutter doctor command to verify if everything is installed correctly – it gives very clear messages. In the end, using VS Code and having Android phone connected in USB Debugging mode, your flutter doctor command should have an output similar to mine:

Flutter App - flutter doctor proper result — The correct output of **flutter doctor** command for VS Code (not Android Studio) development and Android phone connected in USB Debugging mode

Configure Visual Studio Code

The next step is to configure Visual Studio Code to be able to develop, compile, run and debug Flutter apps. You only need to install the Flutter extension, which is very well described here. It should also automatically install the Dart VS Code extension which adds Dart language support to VS Code.

Your first Flutter app

Now let’s finally create this first Flutter Android application 🙂 It’s probably gonna be the quickest part!

Create and run a sample app

First of all, open Visual Studio Code. Use Ctrl+Shift+P to open a Command Palette. Start typing “Flutter” and select Flutter: New Project:

Flutter App - New Project creation in VS Code

In two next steps specify your project’s name (e.g. “hello_flutter”) and choose a location where the template should be generated.

Wait until VS Code generates the whole project and you see main.dart file in lib folder:

Flutter App - files structure of a template project with main.dart file

Open the main.dart file and replace its contents with the following, a bit cleaned-up code:

	import 'package:flutter/material.dart';

	void main() => runApp(HelloFlutterApp());

	class HelloFlutterApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'HelloFlutter',
	theme: ThemeData(
	primarySwatch: Colors.lightGreen,
	),
	home: MyHomePage(title: 'Hello Flutter!'),
	);
	}
	}

	class MyHomePage extends StatefulWidget {
	MyHomePage({Key key, this.title}) : super(key: key);
	final String title;

	@override
	_MyHomePageState createState() => _MyHomePageState();
	}

	class _MyHomePageState extends State<MyHomePage> {
	int _counter = 0;

	void _incrementCounter() {
	setState(() {
	_counter++;
	});
	}

	@override
	Widget build(BuildContext context) {
	return Scaffold(
	appBar: AppBar(
	title: Text(widget.title),
	),
	body: Center(
	child: Column(
	mainAxisAlignment: MainAxisAlignment.center,
	children: <Widget>[
	Text(
	'You have pushed the button this many times: ',
	),
	Text(
	'$_counter',
	style: TextStyle(color: Colors.green, fontSize: 25),
	),
	],
	),
	),
	floatingActionButton: FloatingActionButton(
	onPressed: _incrementCounter,
	tooltip: 'Increment',
	child: Icon(Icons.add),
	),
	);
	}
	}

view raw flutter_demo_main.dart hosted with ❤ by GitHub

We won’t focus on the source code here – I hope to dig more in the coming posts 🙂 Just notice there are quite a few widgets – can you count them all? 😉 I found at least 12 different widgets used in this small template code.

Now the best part – having your Android phone connected (you should see it in the right-bottom corner of VS Code) press F5 to run the application. After a few seconds (usually longer for the first time) you should see this beautiful application on your smartphone’s screen:

Flutter App - first Flutter app (Android)

As soon as you press the “+” button the green counter increments. Yaaaaay! 😁

Debug your Flutter app

Now, try putting a breakpoint in main.dart file at line 30 (beginning of _incrementCounter() function). When you click the “+” button next time, VS Code should stop at the breakpoint:

Try hot reload

The best for the end. As I mentioned before, Flutter lets you use a hot reload. It lets you change the code while running the app and see the changes immediately after saving the source code file. I love it especially because it’s a stateful hot reload, meaning that except UI the state is also reloaded (or rather kept).

With your Flutter app running in debug mode, click the “+” button several times so the counter has value > 0. Then go directly into VS Code and modify line 50 by changing the counter text color from Colors.green to Colors.red. Line 50 should now look as follows:

style: TextStyle(color: Colors.red, fontSize: 25),

view raw flutter_demo_main_line50_color.dart hosted with ❤ by GitHub

Save main.dart file by pressing Ctrl+S. Take a look at your smartphone and see the magic:

Notice how the color of number “7” (counter value) changed to red while its value remains untouched. Quite a nice feature for quick development 😉

I noticed that sometimes it doesn’t work that smoothly and you need to restart the app to see the changes. However, it happens only with some bigger code changes. Flutter quite young SDK and tools are still developing quickly so I hope such drawbacks will be eliminated soon.

Summary

Today we’ve seen how easy it is to start working with Flutter. We got familiar with basic Flutter concepts like widgets. We’ve also created our first Flutter app and debugged it. Finally, we’ve seen the very cool hot reload feature in action 💪

For me, Flutter looks promising. After my adventures with Xamarin, which mostly felt like changing Java to C# and Android Studio to Visual Studio, I’m excited to try something fresh and totally different.

I know this was just a simple introduction to Flutter, but there’s more coming! I hope to publish the next articles about Flutter as I continue playing with it. If you’ve ever used Flutter and have some good sources to recommend – let me know in the comments!

Stay tuned!

What is Flutter?

Dart as a programming language

Everything as a widget

Installation and configuration

Install Flutter and Android SDK

Configure Visual Studio Code

Your first Flutter app

Create and run a sample app

Debug your Flutter app

Try hot reload

Summary

Related Posts

Share This

Share if you liked it:

You may also like

What is Mutation Testing and Why Should You Use It?

5 Reasons To Not Use C# IDE For TypeScript Development

React State Management Basics