Mobile_app
Flutter Project for Approachable Geeks
Screenshots
Main Profile Screen
Getting Started
To run this app, you must have the following installed. There's alot of good documentation online to download these to Windows, Linux, and iOS.
- Git (in order to clone this repository)
- Visual Studio Code (there are guides for other code editors, but this is the one I used)
- Flutter
Download these as well depending on what platform you are developing for
- XCode (for iOS development)
- Android Studio (for Android Development)
Adding Flutter to Environment Variables
After downloading the Flutter
SDK, it is important that you add it to your PATH
on your machine. You can find the instructions for your machine on the Flutter website, but I will leave instructions here as well.
Windows
-
Navigate from the terminal to the
Flutter
SDK directory and type inpwd
to get the directory path. Copy this path. -
From the search bar, enter
env
and selectEdit environment variables for your account
- Add the copied path to your
Path
variable by pressingNew
and restart your terminal.
- Now you should have access to
Flutter
command line tools
iOS
-
From the terminal, enter the directory where you have the
Flutter
SDK and enterpwd
to get the directory path and copy it. -
Use the command
echo $SHELL
in your terminal to see which shell that you are using. If you are using Bash, create a new text file by using the commandtouch $HOME/.bash_profile
. If using Z shell, create a new text file by using the commandtouch $HOME/.zshrc
. -
Add to the file by using the command
nano $HOME/[your . file]
and paste in the path to theFlutter
SDK. Be sure to save this text file. -
Run the command
source $HOME/.<rc file>
in the terminal to refresh the current window. -
Verify that
flutter/bin
directory is now in yourPATH
by runningecho $PATH
.
Once VS Code is downloaded and have added the Flutter SDK to PATH, be sure to download the Flutter
and Dart
extensions as well to be able to run the applications.
- If theres any trouble adding to your
PATH
in macOS, please refer to this tutorial
Running the project
Running this project is dependent on what device that you are using. However, at any point feel free to run the command flutter doctor
in the terminal to check if you need anything additional for Flutter
.
Please run the command flutter pub get
in order to get the packages in included in this project (image_picker).
Android Simulator
- In order to use the Android Emulator, you must download Android Studio as mentioned in section
Getting Started
. - After open the
Flutter
project in VS Code, you can runFlutter find devices
in thecommand pallete
to select the Android Emulator. You can also runflutter emulators
in the terminal to see which emulators are available. To select an emulator in the terminal, run the commandflutter emulators --launch <emulator id>
- To run the project, enter the command
flutter run
. You can also run debugging mode for the application by pressingF5
.
For reference, I followed this tutorial for flutter on Android
iOS Simulator
- In order to have the iPhone Simulator, make sure to have XCode downloaded on your machine and open it at least once to sign the license agreement. (You must install the latest version of XCode to use Flutter)
- To have access to XCode command line tools, be sure to run the following in the command line
If you have the
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch
XCode-beta.app
, be sure to replaceXcode.app
withXcode-beta.app
. - Open the iOS Simulator by running the command in the terminal
open -a Simulator
. - Enter the project directory and run the command
flutter run
For reference, I followed this tutorial for flutter on iOS
Running on iOS Device
To run the project on an iOS please follow the additional steps stated in the Flutter
guide. Although it isn't stated in this guide, if you want to see your project on iOS version +14, you must run the command flutter run --release
in order to deploy on iOS device.
I followed this answer in order to run on my device.
If you happen to get the message Unable to verify developer
, be sure to enter your System Preferences
> Security & Privacy
> General
. There you should be able to allow your system to trust the files in the Flutter
SDK.
Production Notes
- do not use Expanded around GestureDetector or else child CircleAvatar within GestureDetector will not be shown
Common Errors to fix
- Renderflex overflowed by 5.1 pixels on the bottom Solution
- System UI is not responding (might be a android emulator thing with Studio)
- Incorrect use of Parent Data Widget