Day 1: Setting up the Environment - Getting Started with Dart Console Applications
Install Flutter on Mac ( M1/ M2) | Android Studio | Xcode Simulator
Background
As a web developer, I wanted to dive into the mobile app development world. So, finding the #30DaysMasterFlutter by appwriters.dev/30days/flutter is very helpful - it provides a structured and engaging way to learn Flutter and kickstart the mobile app development journey including hands-on projects.
Welcome to Day 1 of our Dart journey! Today, we'll dive into setting up the environment for Dart programming and creating our very first Dart console application. "But first, let's understand the relationship between Dart and Flutter."
Dart is the language of choice for Flutter, a popular framework for building cross-platform mobile apps. Flutter apps are written in Dart, and they can be run on both Android and iOS devices. This makes Dart a good language to learn if you are interested in developing mobile apps. As Dart language forms the foundation of Flutter, it is essential to learn Dart first before proceeding to the Flutter framework. Understanding Dart will provide the solid groundwork, enabling you to develop robust and efficient Flutter applications with ease.
Let's get started on this exciting adventure!
Introduction
Dart is a powerful object-oriented programming language developed by Google that is primarily used for building web, server, and mobile applications. Flutter, on the other hand, is a UI toolkit developed by Google, built with Dart, and used to create natively compiled applications for mobile, web, and desktop from a single codebase.
In this blog, I will guide you through the steps to set up your development environment for Dart and Flutter, from installing the necessary SDKs to running a default Dart console application.
"Please understand that although we will set up our environment to build Flutter apps readily, we will start our Dart programming journey first by creating a Dart console application. This is because, without a good understanding of the Dart environment, we cannot build good Flutter apps in the long run."
Prerequisites:
Before we begin, make sure you have the following prerequisites in place:
A computer running Windows, macOS, or Linux.
Git is installed on your system.
An internet connection for downloading necessary files.
Basic knowledge of programming concepts.
Today, I will be sharing the process of installation on macOS.
Important: If you’re installing on an Apple Silicon Mac, you must have the Rosetta translation environment available for some ancillary tools. You can install this manually by running:
sudo softwareupdate --install-rosetta --agree-to-license
Step 1: Install Flutter SDK
To get started with Flutter, follow these steps to install the Flutter SDK:
Visit the official Flutter website at flutter.dev and select a Flutter SDK based on your system requirements.
Extract the downloaded SDK archive to a location on your computer, and add the Flutter
bindirectory to your system's PATH variable. This allows you to run Flutter commands from any directory in the terminal or command prompt.
Note: The Dart SDK comes bundled with Flutter, so if you installed Flutter, it is not required to install Dart separately.
Now, copy the flutter bin path name:
- Go to the "Flutter" folder, then navigate to the "bin" directory. (Long press the "Option" key on your keyboard and select the "bin" folder to see an option to "Copy bin as Pathname".)
Open your terminal and type "nano .zprofile" to edit the .zprofile file. Replace "pwd/flutter/bin" in the $PATH value with the copied Flutter bin pathname: "export PATH="$PATH:copied_flutter_bin_pathname".
To save the changes, press Control + O, then press Enter. To exit, press Control + X.
To check if the path variable was added successfully, type "cat .zprofile" to display the exported paths, including the Flutter path. To refresh the environment, type "source .zprofile".
Step 2: Run "flutter doctor"
After installing Flutter, run "flutter doctor" in your terminal to check for missing dependencies or configurations. This ensures your environment is set up correctly for Flutter projects.
Open your terminal and run:
flutter doctor
You will be able to see the following in the terminal:
As you can see, there are 3 errors: missing Xcode installation, Android Studio installation, and CocoaPods installation.
To develop Flutter apps for iOS, you need a Mac with Xcode installed and similarly, for Android you need Android Studio installed. We will be installing both in this article.
Let's proceed to Step 3 to install these missing dependencies.
Step 3: Download Xcode
To download Xcode, you have two options: web download or the Mac App Store. Once downloaded, extract the zip files and drag Xcode into the Applications folder and complete the installation process.
Next, visit the documentation at docs.flutter.dev/get-started/install/macos and follow the instructions provided in the iOS Setup step. Alternatively, you can copy and run the following two commands directly in your terminal. This process remains the same regardless of the method chosen.
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
This should now install all the necessary things required for running the simulator. Now, type the following command in your terminal.
open -a Simulator
Make sure to first launch and open the XCode application before trying to launch the simulator. You will see something like this:
Step 4: Set up Cocapods
Install and set up Cocapods.
sudo gem install cocoapods
CocoaPods is not compulsory for all Flutter projects. CocoaPods is a dependency manager for iOS projects, and it is primarily required when you need to use third-party native libraries or plugins that are written in Swift or Objective-C in your Flutter app.
If your Flutter project does not require any iOS-specific native libraries or plugins, you may not need to set up CocoaPods. Many Flutter packages and plugins are Flutter-specific and do not rely on native code for functionality.
In summary, while CocoaPods can be essential for certain Flutter projects that utilize iOS native dependencies, it is not a compulsory requirement for all Flutter apps.
Regardless, we will be installing it today.
Step 5: Download Android Studio
To download Android Studio, visit the official link: developer.android.com/studio. After downloading, drag and drop Android Studio into the Applications folder. Open Android Studio from Launch Pad and complete the installation with default settings.
Now, just run "flutter doctor" in your terminal again to make sure all the dependencies are installed correctly.
Fantastic! We are all set and ready to go!
Now, open the Android Studi, go to Plugins, and install Flutter from the Marketplace. This will automatically install the Dart language plugin too. Restart your IDE.
Note that I'll be using Android Studio as my IDE. If you prefer VS Code or another IDE, follow the same process in your chosen IDE.
You'll find the option for "New Flutter Project" in Android Studio. Select it to create a new Flutter project.
Edit the Project Details as you like.
After clicking "Create", you will see the following:
The main.dart file is the main entry point where we start writing our code.
To run our app on the iOS simulator, open the built-in terminal of Android Studio and type "flutter run."
For the Android simulator, click "Device Manager" in the top right corner, and you'll see the default Pixel Android device available.
In the Actions tab, click the play button (Launch this AVD in the emulator).
Select the device and run the app using "flutter run" in the terminal.
Our Android Flutter app is up and running:
To avoid tedious manual runs, use the "hot reload" feature. Click "Run 'main.dart'" at the top right corner to automatically run the app on save.
This is how you can run your first Flutter application in both iOS and Android simulators at the same time using the Android Studio IDE. You can also do the same using your favourite IDE.
Create and Run a Default Dart Console Application
The setup we have done is for creating Flutter apps using Dart as the programming language. Similar to web development where we must be familiar with JavaScript before learning React, we need to be familiar with Dart programming for building Flutter apps. Let's now create and run a default Dart console application to get started.
Feel free to explore my blog on creating a simple "Hello World App" using pure JavaScript and then using "React".
With your environment set up, you are now ready to create and run a simple Dart console application.
Open your terminal and create a new project folder where you want to run your Dart application.
Change to the project directory and run the command "dart create app_name". This will create a new Dart console application with the app name you provided.
Write the command "dart run" to run your Dart console application.
Conclusion:
Congratulations! You have successfully set up your development environment for Dart and Flutter and also created a simple Dart console application. You are now ready to dive deeper into Dart and Flutter development and build amazing cross-platform applications. Happy coding!
We will learn more about writing different programs using the project we just created in a next-day challenge. I will also share my daily updates and progress on #30daysflutterchallenge through my blogs. I encourage anyone looking to learn Dart-Flutter to participate in this self-paced learning challenge as well. Let's embark on this exciting journey of learning and creating innovative mobile applications!
30 Days Flutter Challenge: https://www.appwriters.dev/30days/flutter
Thanks for Reading! 🙌
See you in the next blog! Until then, keep learning and sharing.
Let’s connect: