How to create your first iOS Flutter app on MacOS
Flutter 1.0 was released by Google on December 4, 2018 and it is a powerful tool allowing you to create beautiful apps on both iOS and Android. Along with other platforms such as Firebase, mobile app development is now easier than ever.
In this tutorial I am going to show you how to create your first Hello World app with Flutter on a Mac computer, which we will test on the Xcode iOS simulator.
1. Installing Flutter
To install Flutter onto our computer, first we will need to download the Flutter SDK. We should also create and relocate ourselves to a custom working directory and move the downloaded flutter_macos_v1.0.0-stable.zip file into the directory.
After that we can unzip the flutter tool and setup the environment with the following code typed in our console.
unzip flutter_macos_v1.0.0-stable.zip
export PATH="$PATH:`pwd`/flutter/bin"If everything goes right, we should be able to check the dependencies by entering the following code into our console.
flutter doctor
Before we move onto the next step we also need to configure our bash profile. The bash profile can be found in the home directory named as .bash_profile, open the file with a text editor and add the following line.
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"Where [PATH_TO_FLUTTER_GIT_DIRECTORY] should be replaced by the name of the working directory we have just created for Flutter. After we configured the profile we can run the following command at our home directory to update the path.
source ~/.bash_profileIn the case where .profile is not found, simply create an empty file with the name of .profile and save it to the root directory then try again.
To verify that the path is successfully updated, we can type the following command in the console.
echo $PATHAnd we should see something containing the following in the return argument. Where [PATH_TO_FLUTTER_GIT_DIRECTORY] is our working directory.
[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin2. Setting up the iOS Simulator
In order to setup the iOS simulator first we have to install Xcode onto our computer, which can both be downloaded online or in the app store. After that we can configure the Xcode command-line tools to use our newly installed version with the following command typed into our console.
sudo xcode-select --switch /Applications/Xcode.app/Contents/DeveloperWe can then open up the iOS simulator with the following command.
open -a Simulator
This may take some time to load but once that is done we can move onto deploying our first Flutter application.
There are other two things to note:
1. Make sure your simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator’s Hardware > Device menu.
2. Depending on your development machine’s screen size, simulated high-screen-density iOS devices may overflow your screen. Set the device scale under the Window > Scale menu in the simulator.
3. Creating a Hello World app in Flutter
Creating an app in flutter is fairly straight forward, simply type in the following command. You are free to change the hello_world into any other names you like. Flutter will print “All done!” in the console once the process is completed.
flutter create hello_world
Now we can go to the app directory with:
cd hello_worldThen run the app with:
flutter run
Flutter will generate a default application like the one shown in the demo, which allows us to click on a button while tracking the number of our clicks. The main component of the application is defined by the main.dart file inside the lib folder. Try replacing the contents inside the main.dart file with the following code.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}Once done, we can update the simulator by typing “r” inside the console. And we should see the simulator updated into displaying the “Hello World” text as shown below.
Congratulations! Now you have just created your first Flutter app, for more info related to Flutter you can find them on the official website. Flutter primarily utilizes dart and you can find more on its official website too.
Have fun building mobile apps!
In the future I may write more tutorials on Flutter. I believe this tool has a promising future in the field of mobile app development. Below are the guides I wrote related to Flutter and iOS development, I will continue updating the list.
