Flutter Series - Creating Your First Hello World

When you can’t find the sunshine, be the sunshine!
~ Anonymous.

Have you ever dreamt of building your own app but think it’s too hard? That dream is a lot closer than you think, and the tool that made me believe it is called Flutter. I remember my first time staring at the blank project screen, convinced that mobile development required years of platform specific knowledge. Flutter exists precisely to make that belief outdated.

Flutter is a new way to build multi-platform apps which is currently backed and developed by Google. It’s often compared to React Native, but the difference is performance. React Native runs on a JavaScript bridge, while Flutter runs on a Dart bridge. What the Dart bridge does best is AOT (ahead of time) compiling to native ARM code. That means your Dart code becomes real native machine code before it ever touches the device, which is why Flutter apps feel so smooth compared to their interpreted rivals.

✅ Prerequisites

First, you need Flutter, just follow the steps below to install it.

• Flutter 1.0

One package, and with it comes the whole ecosystem: the SDK, the Dart language, and the widget library that makes UI building feel like playing with digital Lego.

🏗️ Building Hello World

First, we will install Flutter. Depending on your operating system you can find the details on how to install Flutter here. On Arch Linux you can find it on the AUR repository, which means one yay -S flutter away from a working setup.

After installing the Flutter package, run flutter doctor to check for any dependency error. Doctor is Flutter’s health check: it inspects your machine for the Android SDK, connected devices, and every other piece the toolchain needs, and it tells you exactly what is missing. Treat it as your first and most honest friend in this journey.

And now we begin: to start a Flutter project you need to type in flutter create <project-name>. For example, I’m building a Hello World project named stocks:

flutter create stocks

The command will create a directory named stocks which contains a minimal running app template. What we do first is open the file lib/main.dart using your favorite text editor and rename the app title Flutter Demo to Hello World. Then remove the whole Scaffold block as we will create our own scaffold. After the changes your _MyHomePageState class would look like this:

// ....
class _MyHomePageState extends State<MyHomePage> {
	int _counter = 0;
	
	void _incrementCounter() {
		setState(() {
			_counter++;
		});
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold();
	}
}
// ....

Clean up the unused functions and variables like _counter and _incrementCounter. If your editor has an integrated linter and Dart analyzer, it would complain regarding unused variables with a friendly yellow squiggle, so follow the warnings and strip them out. Once the cleanup’s done, implement now a centered hello world text by adding a body to the scaffold:

class _MyHomePageState extends State<MyHomePage> {
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			body: Center(
				child: Text('Hello World!'),
			),
		);
	}
}

That is the whole UI: a scaffold, a center, and a text widget. No XML layouts, no storyboards, just Dart code describing what you want on screen.

Now run your code using the command flutter run. If a device’s connected it will show an app displaying a centered hello world. You could also use an emulator by running flutter launch before running flutter run. The first build takes a moment while the toolchain warms up, but every build after it is fast.

🚀 So, what’s next?

Now after everything’s done, we will continue building our stocks monitor app in the next chapter. The counter skeleton is gone, the hello world is on screen, and the foundation is laid: from here on, every chapter adds one real feature to a real app, the way every app you have ever used was actually built.

Stay tuned.