Become Full Stack Mobile developer (Vapor + Flutter) — Part 1
Motivation
One of the best ways for me to learn something is to write about it, so I’m making this series with the notes that I take as I go through App Brewery’s Flutter Bootcamp. Publishing my notes and code also forces me to maintain a high standard and allows me to easily go back to review or update them.
I’m keeping the Rick Grimes theme alive for as long as I can, because I’m really enjoying having Rick on my phone’s home screen and looking at his pretty face every day. 😄 Don’t worry, App Brewery’s bootcamp doesn’t have Rick in it, but I still highly recommend it if you want to learn Flutter.
If you’re loving Rick though, check out I Am Rick (the first episode), or if you’re having trouble installing Flutter on macOS Catalina, check out Setting up Flutter on macOS Catalina.
I also added a Github repo for the series.
Rick’s business card
Since Rick left the show (inside a helicopter!), we need to get him a new job. For this, he will need a new business card.
To maximise his chances of making it back on screen, we’ll make him a cool Flutter app to show off his brand new business card to both iOS and Android users.
Hot reload
To make our life easier, we’ll first upgrade our app from the previous episode, to make full use of one of Flutter’s coolest features, hot reload.
What is hot reload?
If you’ve done any native Android/iOS development before, you know how long it takes from making a change to actually seeing it on a phone/simulator screen. If you haven’t, well, it’s essentially a lot of wasted time and a disruption of focus, especially if you open other websites to kill your time while you wait…
With Flutter, you make a change, save your project (since hot reload is hardwired with save) and see it appear almost instantaneously on screen! 🤯
This allows you to massively minimise the step from change to test, so you can develop faster and with fewer errors.
Since this change-test cycle is so fast, you can practically design your app on the fly, while you’re writing the code. It’s almost as fast as using a dedicated designer tool like Sketch. (don’t worry Sketch, I still love you and won’t replace you anytime soon)
So you could say that with Flutter you can play the role of an iOS/Android/web/desktop developer AND designer. And if you couple Flutter with Firebase, you can even play backend developer. One-man teams have never been that easy. (or lonely?)
Anyway, let’s get a bit more technical.
Not all changes will work with hot reload. In order for hot reload to work, you need to have the code that you modify wrapped inside a Flutter stateless or stateful widget.
This is the code we had from the first episode:
import ‘package:flutter/material.dart’;
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.lightGreen[200],
appBar: AppBar(
title: Text(“I Am Rick”),
backgroundColor: Colors.red[800],
),
body: Center(
child: Image(
image: AssetImage(‘images/rick_gun.jpg’),
),
),
),
),
);
}
To have all our changes work with hot reload, we need to wrap our MaterialApp inside a StatelessWidget.
To bring up the autocomplete for StatelessWidget we type stless and hit enter. We’ll name our new class IAmRick. This class now extends StatelessWidget.
Now we’ll cut all the MaterialApp code and paste it over the Container() code after the return statement of the build method inside the IAmRick class. Delete the extra comma after the closing parenthesis of MaterialApp and hit save to get everything nicely formatted again.
If you haven’t done so already, you can also hardwire the code formatting with the save action by going to Android Studio ➝ Preferences ➝ Languages & Frameworks ➝ Flutter, and ticking ‘Format code on save’ under the Editor section.
Finally, we need to call IAmRick() inside runApp().
import ‘package:flutter/material.dart’;
void main() {
runApp(IAmRick());
}
class IAmRick extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.lightGreen[200],
appBar: AppBar(
title: Text(“I Am Rick”),
backgroundColor: Colors.red[800],
),
body: Center(
child: Image(
image: AssetImage(‘images/rick_gun.jpg’),
),
),
),
);
}
}
Now if we wanted to, say, change the AppBar colour to a darker shade of red, we could type Colors.red[900], hit save and the new colour would show up immediately!
This applies to any changes that we make inside the build method of IAmRick, or any other class that extends StatelessWidget.
Note: If you were already running the app while you wrapped your code in a StatelessWidget, you need to stop it and run it again in order for hot reload to work.
Finally, another big advantage of hot reload that is worth mentioning, is that it doesn’t lose the state of the app. For example, if you’re editing a form and have entered some data and suddenly want to change the UI, you don’t have to enter that data again every time you reload the app! I’m sure many people can relate to the pain of creating a login screen and having to login every time you want to make a small UI change and test it.
#flutter #developer #mobile
