Building layouts; Adding Interactivity

Questions? We have answers.

If you run into problems while doing this codelab, please post to the #codelab-questions channel in Discord.

Task

This task involves going through two tutorials in sequence: Building Layouts followed by Adding Interactivity.

At the conclusion, you will have built an app called “Campground” that looks like this:

Note that this looks just like the tutorial page, except that the title has been changed to “Campground” and there is a new Text widget at the bottom to indicate authorship (i.e. “Developed by: Philip Johnson”). You will substitute your own name when you build this widget.

Part 1: Building Layouts

For this experience, start with the following steps to initialize your development environment:

Create a private GitHub repository called “flutter_campground”.
Make me a collaborator so I can view your work.
Clone it to your laptop.
In the parent directory of that directory, run flutter create --no-overwrite flutter_campground. This will produce the Flutter app skeleton at the top level of your GitHub repo.
Open that directory in IntelliJ.
Open the iOS or Android Simulator, then run the template code and see it in the simulator.

Now that you’ve established a working codebase and development environment, proceed with the Building Layouts tutorial.

Notes

Step 0:

The default app created by “flutter create” is no longer exactly like the one in the tutorial. Just work around it.

Step 1:

This is a good illustration of how to decompose a page mockup into its component rows and columns.

Step 2:

At the conclusion of this step, you can now delete the StatefulWidget (MyHomePage) from main.dart.
If you haven’t figured it out already, command-option-L (reformat code) is a very useful key binding.

Step 5:

Useful info on how to add an Image.

When you’ve finished this part, commit your code to GitHub.

Part 2: Adding Interactivity

Now move on to the second tutorial, Adding interactivity.

After updating the app to include a StatefulWidget, there are some sections about “Managing State”. These sections are well worth reading, but you do not have to implement that code.

At the conclusion of this step, commit your changes to GitHub.

Submission Instructions

By the date and time listed in the Schedule page, please submit the URL to your GitHub repo in Laulima.

Don’t forget to make me (philipmjohnson) a collaborator so I can view your work!