Welcome to Workshop 1 of Mobile Systems and Interaction.
Within this workshop, you'll learn how to install Flutter on your system and run your first Flutter application on your system. We will be using VSCode - https://code.visualstudio.com/download throughout these workshops so please make sure you have this installed on your system.
Windows users will only be able to build there app for Android systems but Mac users will be able to build for both iOS and Android. While you are starting out in Flutter you should choose just one system to build for so that you get used to the language and after reading week try building your application for the other system. We have a limited number of devices in the lab for you to test your apps out but we will be using these after reading week.
In this workshop, you'll create a simple mobile Flutter app. You don't need previous experience with Dart, mobile, or web programming.
Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. FLutter is really useful for building mobile applications is that the same codebase can be used to build a native application for both Android, iOS and even a Web application.
This workshop is split into 2 - Instructions for Mac and Instructions for Windows systems. Please click either based on the system you have.
You can also use the Flutter instructions on this page - https://docs.flutter.dev/get-started/install
To aid our development workflow we will now install some VSCode Extensions to make Flutter easier to run from within VSCode.
Install the Flutter Extension for VSCode
The Dart extension should be installed when you install the Flutter extension however, if it isn't then install the Dart Extension for VSCode
You should now be able to run Flutter projects from within VSCode
In VSCode:
You can use the Flutter install instructions to install Flutter but I prefer using a tool called Homebrew to install packages on the Mac which makes life a bit easier.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Homebrew will explains what it will do and then pauses before it does it. Answer any question it may have and when finished you'll be ready to continue.
Xcode is Apple's integrated development environment (IDE) that is comprised of software development tools for macOS. You will need Xcode to build your iOS Apps, and also some of the software and components you'll want to install will rely on Xcode's Command Line Tools package.
Install the latest stable version of Xcode (using web download or the Mac App Store). This is a 12.6Gb download so may take a while to fetch.
After this is finished installing, run these three commands one after the other.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license
sudo gem install cocoapods
When that's all completed you can check that you can open the iOS Simulator by running in the Terminal:
open -a Simulator
In the Terminal run the following command to install Android Studio, the Android SDK and the Android NDK (Native Development Kit)
brew install --cask android-studio temurin
Open Android Studio and follow the setup guide to setup the Android Tools and SDK. Select Custom install and step through the default settings. Make a note on where the Android SDK is installed, in my system it was installed at
/Users/USERNAME/Library/Android/sdk
Once Android Studio has downloaded and setup up, click Finish and move onto the next step.
On the Android Studio Start Screen, select "More Actions" -> SDK Manager and Select SDK Tools. Click the tick box for "Android SDK Command Line Tools (latest)" and click Apply to start the install.
Follow these instructions to setup the Android Simulator
https://docs.flutter.dev/get-started/install/macos#set-up-the-android-emulator
Once you've set up a Simulated Device (any Android device is fine) make sure the Simulator in running and the device is displayed on the screen
In the Terminal run the following command to Install the Flutter Software Development Kit (SDK)
brew install --cask flutter
# If you've installed the Android SDK
flutter config --android-sdk "/Users/USERNAME/Library/Android/sdk"
flutter doctor --android-licenses
Press the y key to accept all the licences.
We must now add Flutter to the executable path of your system by adding it into an environment variable. This allows you just to type Flutter when you want to run a flutter command.
In the Terminal run
nano ~/.zshrc
source ~/.zshrc
and copy the following code into your profile
## ## ## ## ## ## ## ## ##
## Flutter
## ## ## ## ## ## ## ## ##
export PATH="`pwd`/flutter/bin:$PATH"
Save and exit nano. Close your Terminal Window and open it again to make the changes stick. Every time you open a Terminal you'll have flutter available to run at your finger tips.
When finished you can check that Flutter has been installed properly by running and look to see if you have ticks for all the settings Flutter needs to run on your system.
flutter doctor
If everything has worked correctly you should see this output on your screen
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 2.1.0-11.0.pre.227, on macOS 11.1 20C69 darwin-arm, locale en-SA)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.54.1)
[✓] Connected device (2 available)
• No issues found!
No issues found indicates that everything is installed and working correctly.
To install Flutter for Windows follow the instructions on this page
https://docs.flutter.dev/get-started/install/windows
You should follow the tutorial up to and including the ‘Agree to Android Licenses' section - there is no need to go further.
When finished you can check that Flutter has been installed properly by running the following command and if correct you will see that all sections will have ticks for the settings Flutter needs to run on your system.
flutter doctor
If you see a message ‘cmdline-tools component is missing' you can fix that by launching Android Studio and selecting SDK Manager -> SDK Tools and then checking the box marked ‘Android SDK Command-line Tools (latest)' and finally selecting the ‘OK' button.
Flutter is in the middle of adding support for Apple Silicon (M1) hardware and you can see the status of efforts here https://github.com/flutter/flutter/wiki/Developing-with-Flutter-on-Apple-Silicon
There is also a Pub Tool that claims to fix all the issues for M1 Mac and Dart - https://github.com/Rexios80/flutter_m1_patcher.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
Homebrew will explains what it will do and then pauses before it does it. Answer any question it may have and when finished you'll be ready to continue.
Xcode is Apple's integrated development environment (IDE) that is comprised of software development tools for macOS. You will need Xcode to build your iOS Apps, and also some of the software and components you'll want to install will rely on Xcode's Command Line Tools package.
Install the latest stable version of Xcode (using web download or the Mac App Store). This is a 12.6Gb download so may take a while to fetch.
After this is finished installing, run these three commands one after the other.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license
sudo gem install cocoapods
When that's all completed you can check that you can open the iOS Simulator by running in the Terminal:
open -a Simulator
In the Terminal run the following command to install Android Studio, the Android SDK and the Android NDK (Native Development Kit)
brew install --cask android-studio temurin
Open Android Studio and follow the setup guide to setup the Android Tools and SDK. Select Custom install and step through the default settings. Make a note on where the Android SDK is installed, in my system it was installed at
/Users/USERNAME/Library/Android/sdk
Once Android Studio has downloaded and setup up, click Finish and move onto the next step.
On the Android Studio Start Screen, select "More Actions" -> SDK Manager and Select SDK Tools. Click the tick box for "Android SDK Command Line Tools (latest)" and click Apply to start the install.
Follow these instructions to setup the Android Simulator
https://docs.flutter.dev/get-started/install/macos#set-up-the-android-emulator
Once you've set up a Simulated Device (any Android device is fine) make sure the Simulator in running and the device is displayed on the screen
In the Terminal run the following command to Install the Flutter Software Development Kit (SDK)
brew install --cask flutter
# If you've installed the Android SDK
flutter config --android-sdk "/Users/USERNAME/Library/Android/sdk"
flutter doctor --android-licenses
Press the y key to accept all the licences.
We must now add Flutter to the executable path of your system by adding it into an environment variable. This allows you just to type Flutter when you want to run a flutter command.
In the Terminal run
nano ~/.zshrc
source ~/.zshrc
and copy the following code into your profile
## ## ## ## ## ## ## ## ##
## Flutter
## ## ## ## ## ## ## ## ##
export PATH="`pwd`/flutter/bin:$PATH"
Save and exit nano. Close your Terminal Window and open it again to make the changes stick. Every time you open a Terminal you'll have flutter available to run at your finger tips.
After researching many ways to get Flutter working on M1 macs the solution seems to be to:
flutter-sdk-root/bin/cache/opt/homebrew/Caskroom/flutter/[VERSION]/bin/cacheopen /opt/homebrew/Caskroom/flutter/ to open the folderdart-sdk folder with the one you downloaded in the first step.flutter/bin/cache/dart-sdk/bin/snapshots/frontend_server.dart.snapshotflutter/bin/cache/artifacts/engine/darwin-x64dart --version and flutter --version to check that Flutter is using the macos_arm64 version of Dart.$ dart --version
Dart SDK version: 2.15.0-116.0.dev (dev) (Thu Sep 16 09:47:01 2021 -0700) on "macos_arm64"
$ flutter --version
Flutter 2.6.0-11.0.pre • channel dev • https://github.com/flutter/flutter.git
Framework • revision 4b330ddbed (5 weeks ago) • 2021-09-16 17:29:58 -0700
Engine • revision 5b81c6d615
Tools • Dart 2.15.0 (build 2.15.0-116.0.dev)
These steps have to be carried out everytime you update dart with flutter update
See Steve in the Lab if this effects or you having difficulties with these steps.
Lovingly stolen from https://stackoverflow.com/questions/69274086/how-to-replace-the-bundled-dart-sdk-in-flutter-to-run-natively-on-apple-silicon
We're now going to build our first Flutter application to test that everything works, build an app for our simulator and that we can start development of our App. Flutter has a set of tools which will help setup a project for you quickly for both Android and iOS.
Create a folder on your file system called Flutter Apps. In the Terminal type cd and drag that folder into a terminal window.
In the Terminal run:
cd PATH_TO_MY_FOLDER
Now let's create an app by running:
flutter create myfirstapp
code myfirstapp
cd myfirstapp
ls
Great you should now have a folder full of files which is your Android and iOS source code as well as your default Flutter application.
Let's make sure our simulator is running and available to deploy to. If you've closed the Simulator in previous steps then open it back up so it's available to deploy to.
flutter devices
If you can see the Simulator in the list then everything is ready to go.
Finally run
flutter run
The app will build and deploy onto your running Simulator and you'll see your first Mobile app running.
Flutter offers the ability to reload the code of a live running app without restarting or rebuilding the app from scratch. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.
Open lib/main.dart. in VSCode and Change the string
'You have pushed the button this many times'
to
'You have clicked the button this many times'
Save your changes.
Type r in the terminal window.
You'll see the updated string in the running app almost immediately.
Well that was a lot of information for one workshop. Well done for getting to the end. In the next session we will be looking at constructing a design for our app on paper and thinking about what kind of app we want to make.
See you all at the next session.