Create your first Flutter project
See-Docs & Thenavigo

See-Docs & Thenavigo

Jan 28, 2024

Create your first Flutter project

What you will learn

In this tutorial you learn:

1- How to create new Flutter applications from the command line.

2- Basic structure of a Flutter app

3- How to start a Fluter app

How-to-Create-a-New-Project-In-Flutter.jpg

Prerequisites:

Before we begin, make sure you have Flutter installed on your system. You can follow the installation guide on the official Flutter website.

Step 1: Creating a New Flutter Project

Open your terminal and use the following command to create a new Flutter project:

flutter create my_first_app

This command generates a new Flutter project named my_first_app.

stepOne.PNG

Step 2: Understanding the Project Structure

Navigate to the lib folder within your project. This is where you'll find the main code for your Flutter app. Open the main.dart file. Here's a breakdown of the contents:

cd my_first_app\

StepTwo.PNG

Let’s dive into the code and understand each part:

We import the material.dart library, which contains the widgets for Material Design components.

In the main function, we use runApp to start our Flutter app. We pass in an instance of MyApp.

The MyApp class is a StatelessWidget, which means its content won't change once it's built. It returns a MaterialApp widget, the root of our app's widget tree.

Inside MaterialApp, we specify the app's title and the home property, which defines the app's main screen.

The Scaffold widget provides a basic app structure, including an app bar and a body.

The AppBar widget creates a top app bar with a title.

Inside the Scaffold's body, we use the Center widget to center its child, which is a simple Text widget displaying "Hello, Flutter!".

Step 3: Running the App

Open your terminal again and navigate to your project’s root directory. Run the following command to launch your app on an emulator or connected device:

flutter run

stepThree.PNG

Feel free to experiment and modify the code to see how different changes affect your app. Stay curious, and happy Fluttering!

See-Docs & Thenavigo

See-Docs & Thenavigo

Thenavigo: We share relevant learning content for People.

CommentsForm

Comments

Related Posts

Categories