Project 1: Click Me

Overview

In this project, you will be setting up your environment for programming mobile apps. You will learn about GitHub, write your first code in Flutter and Dart, and extend an app’s functionality.

Learning Goals

Course Learning Goal Learning Goal Career Competency
LG1 See the basics of a mobile application in Flutter Technology
LG3 Implement code in Flutter Technology
LG6 Develop GitHub skills Professionalism

Step 1 – Setting Up GitHub

To start, we will create a new repository on GitHub. GitHub is a great way to collaborate with other programmers and share your code with the world.

1.1 – Creating a Repo

Sign up for an account with GitHub if you do not have one already. This website will help you share and archive versions of your coding projects.

I prefer to use GitKraken as a visual interface to Git. Here’s a Tutorial for GitKraken, with many, many more details than you’ll need for this lab.

Now, follow the steps in this tutorial, naming your repository click-me when prompted.

1.2 – Cloning a Repo

Now, you can clone the repository locally with GitKraken. Find click-me in your linked GitHub.com account, navigate to or create a good directory, and click the “Clone the repo!” button.

Step 2 – Setting up Flutter and IDE

There are three pieces we will need to develop mobile applications this semester. First we need an IDE (Interactive Development Environment), then a language for writing our code, and finally a framework for translating the code into native apps for iOS and Android (and others). Our framework will be Flutter, using the Dart language, and I recommend using Visual Studio Code as your IDE.

To set everything up, follow the Install Flutter of the Get Started tutorial for Flutter. A few important notes:

  • Each OS is different, follow the rules exactly!
  • When given the option, choose Visual Studio Code

The tutorial will ask you to test drive and make the basic Click Me app. Be sure save your project in the Github directory you cloned earlier.

When it finally runs, make a commit to your repository, and push it to GitHub.

Step 3 - Making an Extension

Hooray, you have created your first mobile application in Flutter! Now, you need to add something new. It does not need to be a large change, but it should demonstrate that you understand how the application works, and there must be more Widgets there than what comes with the basic setup. Maybe you will make two buttons? Add more text elements? There are so many options to explore, dive into the Flutter Documentation and have fun!

If you want to try making a different layout, this tutorial is a great example of taking a sketch of a UI and making it a Widget. Scroll down on this page to find some great introductory videos.

Academic Integrity Rules

You must work individually on this lab. You may discuss concepts and ideas with your classmates, but the code you turn in must be your own. Your pattern of commits to your GitHub repository are a record of your work; it will be obvious to me if you do not work on this lab individually. I strongly encourage you to schedule office hours meetings with me if you are struggling with elements of this assignment.

Grading Rubric

To Partially Complete this lab, you must

  • Create and clone a repository called click-me
  • Get Visual Studio running on your computer
  • Get an Emulator running on your computer
  • Demonstrate you can run Flutter project in an Emulator on your computer.

To Complete this lab, you must do the above and

  • Make an extension to the existing skeleton using additional Widgets
  • Consistently make GitHub commits