Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, has been gaining popularity due to its versatility and ease of use. If you’re just starting with Flutter, this blog post will guide you through creating your first app and storing it on GitHub.
Setting Up Your Flutter Environment
Before you start coding, you need to set up Flutter on your machine. Follow these steps:
- Download Flutter SDK: Visit the Flutter download page and download the Flutter SDK for your operating system.
- Unzip the File: Extract the Flutter SDK to a desired location on your machine.
- Update Your Path: Add Flutter to your PATH environment variable.
- Run Flutter Doctor: Open a terminal or command prompt and run
flutter doctor
. This command checks your environment and displays a report to the terminal window.
Creating Your First Flutter App
-
-
Open a Terminal or Command Prompt:
- Navigate to the directory where you want to store your project.
- Run
flutter create my_first_flutter_app
. This command creates a new Flutter project with a bunch of auto-generated files.
flutter create my_first_flutter_app
-
Navigate to Your Project:
- Run
cd my_first_flutter_app
to move into your project directory.
-
Run Your App:
- Connect a mobile device or open an emulator.
- Run
flutter run
. This command builds and runs your app.
Exploring the Default App
Flutter creates a simple counter app by default. Open the lib/main.dart
file. You’ll see a MyApp
class that creates a material app. This is the entry point of your Flutter application. The MyHomePage
class under it demonstrates a stateful widget that responds to user interaction.
Making Simple Changes
Let’s personalize this app:
-
Change the App Title:
- Find
title: 'Flutter Demo Home Page'
and change it to title: 'My First Flutter App'
.
-
Modify the Primary Color:
- In the
MyApp
class, find theme: ThemeData()
and add primarySwatch: Colors.blue
to change the primary color.
-
Update the Floating Action Button:
- In
MyHomePage
, change Icons.add
to another icon, like Icons.star
.
Committing Your Changes to GitHub
Now that you have a basic app, let’s store it on GitHub.
-
Initialize a Git Repository:
- In your project folder, run
git init
.
- Run
git add .
to add all files to the repository.
- Run
git commit -m "Initial commit"
to commit your files.
-
Create a Repository on GitHub:
- Go to GitHub and create a new repository.
- Name it
my_first_flutter_app
(or any name you prefer).
-
Link and Push to GitHub:
- Copy the remote repository URL.
- Back in your terminal, run
git remote add origin [URL]
.
- Then, run
git push -u origin master
.
Congratulations! You’ve just created your first Flutter app and pushed it to GitHub. This is just the beginning. Flutter offers a world of possibilities to explore, so keep experimenting and learning.
Remember, the Flutter community is vibrant and supportive. If you run into issues or have questions, there are plenty of resources available, including official documentation, forums, and community channels. Happy Fluttering!