When you can’t find the sunshine, be the sunshine!
— Anonymous.
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++;
});
}
@override
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> {
@override
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.
