How to create a Flutter App on both iOS and Android.
In this article, we are going to go over the steps to be followed while creating a Flutter Application on both iOS and Android platforms.
Camera: A Flutter plugin for iOS and Android allowing access to the device cameras. Pathprovider: A Flutter plugin for finding commonly used locations on the filesystem. Supports both iOS and Android. Path: A comprehensive, cross-platform path manipulation library for Dart. Esysfluttershare: A Flutter plugin for sharing files and text with. The reason for this error is that after installing Flutter and being able to run the flutter commands, we still need to have some kind of device running. That could be either a physical device or an emulator like an iOS simulator or an Android emulator. Open the iOS simulator.
To learn about why we chose Flutter for our Mobile App Development, click here.
SETTING UP THE FLUTTER ENVIRONMENT
After installing the Flutter, copy the path of the bin folder which is inside the flutter folder, and add a new path to the environment variables as shown in the picture. This is because you could access flutter from anywhere easily.
CREATING A FLUTTER APPLICATION: ANDROID
- Create a folder and open Terminal in the VS code editor.
- To create a project, type this command in the terminal:
Flutter create project name
- If you are unable to see Developer options then go to
- If you are unable to see Developer options then go to After reaching the Build Number tap 7 times on it, now you will be able to see the Developer Options and follow the above steps.
- Your mobile is ready in Developing Mode. Open your project in the VS Code Editor. Now, open the terminal and type.
Flutter run
Flutter will automatically search for the external device which you have connected through the USB cable. You can see that in action in the below figure:
Remove the USB cable and you can see the created app in an external device.
CREATING AN APK FILE
- Open the directory of the project in terminal and type:
flutter build apk
- Flutter will create the APK file in the build folder as shown in the fig.
CREATING A FLUTTER APPLICATION: IOS
- Create a new Flutter app by running the following from the command line:
$ flutter create demo_app
2. A demo_app directory is created that contains all the files and dependencies needed for the app to run.
3. Ensure that an iOS simulator is running to launch the app. Open the simulator by running the following:
$ open -a Simulator
4. Now that the setup is ready to launch the app, run the following commands to change the directory to demo_app and run the app:
$ cd demo_app $ flutter run
5. To launch the app on an iOS device you need the third-party CocoaPods dependency manager. Run the following to install and setup CocoaPods:
$ sudo gem install cocoapods $ pod setup
6. When the app is created in step 1, flutter creates a folder called ios. This folder all relevant file structures to build and run an iOS app. Ensure that you are still in demo_app folder and run the following command to open the workspace project in XCode:
$ open ios/Runner.xcworkspace
7. The runner project opens up in your XCode editor, which might look similar to the screenshot below. Click on the Runner folder to go to the project settings page. Click on the Runner from TARGETS and go to Signing & Capabilities section as shown in the image:
8. You also need an Apple Developer account to deploy the app on your iOS device. So, choose your account from Team dropdown. Alternatively, you can also create a new account from the same dropdown by selecting Add an Account… option.
9. The next step is to specify a unique name for your app bundle. Replace the default bundle identifier com.example.demoApp to your own name (should be unique). In our case, we have replaced it with ai.fiolabs.demoApp
10. Ensure that Status message disappears and a new Signing Certificate is created for the app.
11. Ensure that your device is connected to your Mac via USB and run the following to launch the app.
12. Now type the following command:
flutter run
13. Run the following command to build a deployment package for your app on iOS.
$ flutter build ios
Please note that you might run into version conflicts particularly if you are using XCode version 11.4. If you notice one of the following errors while running flutter run command, please refer to this article on flutter.dev:
Building for iOS, but the linked and embedded framework ‘App.framework'
was built for iOS Simulator. Building for iOS Simulator, but the linked
and embedded framework ‘App.framework' was built for iOS.
Running an Android app in Flutter requires Android SDK and an emulator or a connected Android device and running an iOS App requires Xcode and a simulator or a connected iOS device
Use following command to check if required dependencies are installed
This command checks environment and displays a report to the terminal window Vocal cords voice changer.
If flutter is not installed check Installing Flutter
Running in Linux/Ubuntu
Flutter requires Android Sdk
Check Installation in Linux
Use Java 8 instead of Java 14, which might lead to gradle issues
Switching Java
Install java 8 (if not already) with
Check there's other version(s) of java installed
Switch to java 8 using its path (or name)
Check version
Create app
If not created already, create app using flutter command
where nc_app is name of the application
By convention, Flutter apps and packages are named in lower case and words are separated by underscore (_
)
Change current working directory (here nc_app)
Set up Android device
Skip this step to set up an emulator instead
An Android device running Android 4.1 (API level 16) or higher is required to run Flutter application
Enable Developer options and USB debugging on your device (check Android documentation)
Connect phone to computer using a USB cable
If prompted on device, authorize computer to access device
In the terminal, run the
flutter devices
command to verify that Flutter recognizes your connected Android device
Starting emulator
This step can be skipped if a real device is connected
Emulator can be started using emulator
command or using Android Studio
For systems with low memory, use emulator command to avoid waiting for applications to open up or (probably) freezing the system
To use emulator command, a device has to be created first using Android Studio → Avd Manager
Creating emulator using Android Studio
Open Avd Manager using Configuration dropdown when Android Studio is started or
Android Studio → Tools → AVD Manager
or Android Studio → Tools → Android → AVD Manager
Create Virtual Device
Select Pixel 2 and press Next
Download an image shown under Recommended Tab
Select an Image
Click Next and Select Advanced Settings
Select Hardware Gles
Click Finish and then start the device
Start emulator using cli
Flutter Run On Ios Device List
Open Terminal and enter
If it doesn't show a device, create a Virtual Device by following above steps
Start emulator using emulator -avd
command
Running the app
Use following command to run a Flutter application
Modifying an app
Xcode set ios version. Open lib/main.dart in a text editor and edit some lines
Press r on terminal to Hot reload
Press Shift + r for hot restart
Re run flutter run
command when editing pubspec.yaml
or adding, removing files used in application, in case
Run issues
Check Flutter run issues
Flutter Ios On Windows
Running Flutter iOS application in MacOS
Start an iOS simulator
To prepare to run and test Flutter app on iOS simulator, follow these steps:
On Mac, find Simulator via Spotlight or by using the following command:
Start a simulator of a 64-bit device (iPhone 5s or later) by navigating to Hardware → Device menu
To check connected devices, run
Create app
If not created already, create app using flutter command
where nc_app is name of the application
By convention, Flutter apps and packages are named in lower case and words are separated by underscore (_
)
Change current working directory (here nc_app)
Run app
Use flutter run command to run flutter application
This command internally runs flutter pub get
and pod install
to install required dependencies and runs the application on a connected device
Open application in Xcode
Open Xcode
Navigate to File → Open
Navigate to and select (flutter project directory) → ios → Runner.xcodeproj and click Open