Day Seven of the #60Days of Flutter Challenge
Introducing Flutter, the world of widgets, and creating a first Flutter app
Welcome to Day Seven of the #60Days of Flutter challenge. Today we are moving on from Dart — at least exclusively — and introducing ourselves to Flutter.
Coding in Flutter allows us to write for Android, iOS, Desktop, Web, and more using the Dart language. This means that instead of writing similar programs in multiple languages, we can write once and deploy multiple times.
Side note: The laptop I’m using is terrible, so until I get it fixed, I will use an online Flutter IDE at www.flutlab.io to code. It won’t look as pretty as it would in Android Studio, but it’ll allow me to keep moving forward.
There are three things that you need to have to get started coding in the Flutter IDE. From the main.dart file, you need:
— to import an initial package for Android (material.dart) and/or iOS (cupertino.dart).
— to create a link to the file at the entry point with void main() => runApp(NameofYourApp());
— to create a class of widgets.
The backbone of Flutter is widgets. All of the user-facing components (i.e., the stuff of the screen) are some type of widget. They are built in a hierarchy, one on top of the other, to create a “widget tree.” This idea is similar to stacking different color Lego blocks, one on top of the other.
In the below example, we’ve created an IAmRichApp class that extends StatelessWidget. A stateless widget does not change its state (hence the name). User input cannot change its condition once it’s created.
Tip: In Android Studio, you can type in stless (highlight and hit enter), and the IDE will fill in the rest of the information for you.
Six widgets make up the components of the first application:
MaterialApp — this is the main widget. Consider it like the roots of a tree. Without them, there is no tree trunk and certainly no branches.
Scaffold — a scaffold widget provides the design framework. Using it gives you access to design elements you wouldn’t otherwise have.
AppBar — a widget that sits across the top of the screen. It holds the app title and other predefined elements.
Container — a box that encompasses the screen (regardless of its size).
Center — another box that sits in the center of the screen.
Image — a placeholder widget for a user defined image.
We begin building the app widget hierarchy after the return statement — starting with MaterialApp (we are building for Android). The second widget, “Scaffold,” is the base of the app design used to ensure that its layout design covers the whole screen.
In the above example, we created a version of the “I am Rich!” app. It is essentially nothing more than an app bar with a title and an image of a man with money taken from the web.
The obvious question is what happens if that image gets deleted or a user tries to run the app without access to the Internet. In both cases, you will get an empty space where the image once was.
Moving the image into your application keeps you from having this issue.
The first thing you need to do is creates an images folder. To do this in Android Studio, right-click on your project’s name in the upper left corner and add a folder underneath named images.
Upload your image into the folder by dragging and dropping it. Pay close attention to the name.
Once you’ve done that, open up a file called pubspec.yaml and look for something similar to what’s above (assets: and -images/ will be commented out). Uncomment them and change the file in images/ to reference the image you’ve just added.
Now that the image is in the assets section of the pubscec.yaml file, you can call it using the AssetImage widget.
The above code shows my version of the finished app. It was a pretty basic project but gave me a great starting point for understanding Flutter layouts.
Here’s how the final product turned out:
That’s it for Day Seven. The final output (the ‘I am Rich! app’)of today’s lesson wasn’t complicated, but it covered quite a bit of foundational ground. I learned how to set up Flutter, create an entry point, and use stateless widgets to build an application.
On to day eight (which actually turned into day thirteen):
Day 13 of the Sixty Days of Flutter Challenge
Revisiting OOP: Resuming the journey by returning to classes and constructors
In case you missed it, here is the post for day six: