How to write your first flutter app and store in github repo

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:

1. Download Flutter SDK: Visit the Flutter download page and download the Flutter SDK for your operating system.
2. Unzip the File: Extract the Flutter SDK to a desired location on your machine.
3. Update Your Path: Add Flutter to your PATH environment variable.
4. 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

1. 1. 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

1. Navigate to Your Project:

   • Run cd my_first_flutter_app to move into your project directory.

2. 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:

1. Change the App Title:

   • Find title: 'Flutter Demo Home Page' and change it to title: 'My First Flutter App'.

2. Modify the Primary Color:

   • In the MyApp class, find theme: ThemeData() and add primarySwatch: Colors.blue to change the primary color.

3. 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.

1. 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.

2. Create a Repository on GitHub:

   • Go to GitHub and create a new repository.
   • Name it my_first_flutter_app (or any name you prefer).

3. 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!