In this course, we will learn how to create your first mobile application project using Flutter. Flutter is a UI toolkit developed by Google that enables developers to create native applications for both iOS and Android platforms using a single codebase. Due to its diverse widgets and excellent performance, many developers choose this framework today.
1. Environment Setup
To use Flutter, you need to set up your development environment first. This involves downloading the Flutter SDK and setting up an IDE.
1.1 Download Flutter SDK
- Visit the official Flutter website (flutter.dev) to download the SDK.
- Extract the downloaded zip file and save it in your desired location.
- Add the bin directory of Flutter to the system environment variables to make the commands accessible.
1.2 IDE Installation
Flutter supports various IDEs. I recommend Visual Studio Code and Android Studio, which are among the most commonly used IDEs.
- Visual Studio Code: A lightweight IDE that allows easy project management after installing the Flutter and Dart extensions.
- Android Studio: Comes with all the necessary tools and is optimized for Android development.
2. Creating Your First Project
Now we will create a Flutter project. This will help you understand the basic structure and content of Flutter.
2.1 Starting a New Project
flutter create my_first_appBy entering this command, a new Flutter project named “my_first_app” will be created. This folder will contain the basic structure of a Flutter app.
2.2 Understanding the Project File Structure
Once the project is created, several files and folders will be generated. Let’s take a look at the main contents.
- lib/main.dart: This file is the entry point of the Flutter application. It contains the main sections that define the structure and UI of the app.
- pubspec.yaml: This file manages the metadata and dependencies of the project. Library additions are made here.
- ios and android: These folders contain the build settings and code for the iOS and Android platforms, respectively.
2.3 Running the Project
Run the project by entering the following commands in the terminal:
cd my_first_app
flutter runThis command will launch the basic app. By default, an app with a counter will be displayed, and the count will increase when the button is clicked.
3. Building the UI
Now let’s modify the application’s UI to make it a bit more interesting.
3.1 StatelessWidget vs StatefulWidget
In Flutter, UI components are mainly divided into two types: StatelessWidget and StatefulWidget. It’s important to understand the differences between them.
- StatelessWidget: A widget that does not have a state. It is for static UIs that do not change. Examples include text and icons.
- StatefulWidget: A widget that has a state and can update the UI when the state changes. For example, a UI that reacts to button clicks.
3.2 Modifying the App UI
Now open the main.dart file and modify the basic UI. Try changing it to the following code.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'First App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Project"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Number of button clicks:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
} With the code above, you can create a simple UI that displays text and a counter on the main screen of the app.
4. Adding Animation
One of Flutter’s powerful features is its ease of handling animations. Let’s add animations to the application to create a more attractive UI.
4.1 Adding Fade Transition Animation
Let’s add a fade animation that makes the text disappear and then reappear when the button is pressed.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'First App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State with SingleTickerProviderStateMixin {
int _counter = 0;
bool _visible = true;
void _incrementCounter() {
setState(() {
_counter++;
_visible = !_visible; // fade in/out effect
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Project"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedOpacity(
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Text(
'Number of button clicks: $_counter',
style: Theme.of(context).textTheme.headline4,
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
} With this code, you can add a nice animation where the text gradually disappears and reappears along with the counter when the button is clicked.
5. Final Testing and Deployment
Finally, it’s time to check the final state of the project and prepare for deployment. Flutter allows you to deploy to both iOS and Android. Let’s move on to the next steps.
5.1 Testing on Android Emulator
You can test the app using the Android emulator in Android Studio. Launch the emulator and check if the app works properly.
5.2 Testing on iOS Device
If you are using a Mac, you can test the app on an iOS device through Xcode. You need to confirm the trust settings for your iOS device before running it.
5.3 Deploying the App
Once the app is complete, you need to prepare it for deployment in the next steps. Flutter allows you to build the app using the flutter build command, generating files tailored to each platform.
flutter build apk # Generate APK file for Android
flutter build ios # Build for iOSThis process will allow you to create the final APK or iOS files, which you can then deploy to the Google Play Store and Apple App Store.
Conclusion
In this course, you learned how to create your first project using Flutter. You explored basic elements like UI components and adding animations. Challenge yourself to add more features or designs in the future to create even more excellent applications.
Flutter is a powerful toolkit that allows you to develop various applications using more features and widgets. In the next course, we will cover more advanced topics such as implementing more complex functionalities or API integrations, so stay tuned.
Thank you! If you have any questions or topics for discussion, please leave a comment.