Skip to main content

TIL: Flutter Series - Creating Your First Hello World

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

Hi guys, have you ever dream of building your own app, but think its too hard. Why don’t you try flutter…​

Flutter is a new way to build multi-platform app which is currently backed and develop by Google. Its often compared to react native, but the difference is performance. React Native runs on JavaScript bridge while Flutter on dart bridge. What dart bridge does best is AOT (ahead of time) compiling to native ARM code.

Prerequisites

First of all you need flutter, just follow the steps below in order to run install it.

  • Flutter 1.0

Building Hello World

First we will install flutter, depending on your operating system you could find the details on how to install flutter here. On arch Linux you could find it on AUR repository.

After installing the flutter package. Run flutter doctor to check for any dependency error.

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 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++;
		});
	}

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

Clean up the unused functions and variable like _counter and _incrementCounter. If your editor has integrated linter and dart analyzer it would complain regarding unused variable. Once cleanup’s done, implement now a centered hello world text by adding body to the scaffold.

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

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.

So what’s next?

Now after everything’s done, we will continue building our stocks monitor app on the next chapter. Stay tuned. Hit like if you like, subs if you love and as always live life.

Popular posts from this blog

TIL: Disable mDNS and SSDP Discovery in Google Chrome

We're born alone, we live alone, we die alone. Only through our love and friendship can we create the illusion for the moment that we're not alone. — Orson Welles.

TIL: Flutter Series - Custom Icons

Everyone thinks of changing the world, but no one thinks of changing himself. — Leo Tolstoy.

TIL: Gimp Automating Image Processing with Python Fu

What a large volume of adventures may be grasped within the span of his little life by him who interests his heart in everything. — Laurence Sterne.

TIL: Editor Series - Configuring Emacs To Fit The Needs Part 2

The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking. — Albert Einstein.