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.
To learn about why we chose Flutter for our Mobile App Development, click on the link below:
Table of Contents:
- Prerequisites
- Setting up the Flutter Environment
- Creating a Flutter Application: Android
a. Creating an App in the Mobile device
b. Creating an APK file - Creating a Flutter APplication: iOS
- What are you waiting for?
- How to reach FIO Labs
- References
Prerequisites
- We need to install Flutter SDK. Download Flutter SDK from https://flutter.dev/docs/get-started/install.
- There are two code editors for Flutter development — Visual Studio and Android Studio. We are going to use the Visual Studio Code Editor for this project. You can download it from https://code.visualstudio.com/.
Setting up the Flutter Environment
- After installing the Flutter, copy the path of 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.
- After installing the Visual Studio Code, open the Code Editor and install Flutter and Dart extensions.
- Dart is a programming language for the Flutter.
Follow these steps to install Flutter and Dart extensions:
From the picture:
1 → Click on the Extension symbol.
2 → Search for the Flutter extension.
3 → Click on the Flutter version.
4 → Click on the install button.
The same thing applies to install Dart or any extension. Now you’re ready to create a Flutter project.
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 ProjectName
From the picture:
1 → In our case, type
flutter create loginappand press Enter to create an App.
2 → Flutter provides you with all the dependencies you need.
- You can check the Flutter project here https://dev.azure.com/fiolabs/CAPTAIN/_git/captainUI.
- After creating the Flutter project we are ready to build the App and APK file.
Creating an App in the Mobile device
- Connect your Mobile to the Laptop with a USB cable.
- If your Mobile is an Andriod Device then go to Settings → Developer options → Turn on the USB debugging mode.
- If you are unable to see Developer options then goto Setting → About phone → Build Number.
- 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 runFlutter 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.
1 → Go to the build folder in your project folder where you can see the app.apk file. It is used for testing purposes.
2 → In the Release folder, you can see the releaseapp.apk file which is a full version of the app where we can push that releaseapp.apk to the play store or the app store.
Creating a Flutter Application: iOS
To create your first Flutter app and test your setup, follow these steps:
- 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 run13. 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.
What are you waiting for?
We believe FIO Labs never fails to keep their promise when it comes to providing quality services. Our enterprise expertise and industry leadership mean you’re in safe hands.
If you are interested in learning more about what we do at FIO Labs or have some questions about this page, feel free to send us a message to contact@fiolabs.ai — we’d love to hear from you.
How to reach FIO Labs:
Leave a comment below | Book a FREE 30-min session for our on-going Pro Bono Services or Fill in our LinkedIn Form| Contact Us | About FIO Labs | Blog
References
- Build and release an Android app. (n.d.). Retrieved from https://flutter.dev/docs/deployment/android#signing-the-app
- Visual Studio Code. (n.d.). Retrieved from https://flutter.dev/docs/development/tools/vs-code
