How to create first demo app using Flutter step by step guide

Creating your first demo app using Flutter is an exciting journey! I’ll walk you through the steps to create a basic Flutter app from scratch. This guide assumes you have a basic understanding of programming concepts and you want to get started with Flutter development.

Step 1: Set Up Your Development Environment

1. Install Flutter SDK

• Windows: Download the Flutter SDK from the official Flutter website.
• macOS: Download it from Flutter macOS installation page.
• Linux: Instructions available here.

After downloading, extract the SDK to a folder and add the flutter/bin directory to your system’s PATH.

2. Install Dart SDK (Included in Flutter)

Dart is the language Flutter uses. The Flutter SDK comes bundled with Dart, so you don’t need to install it separately.

3. Install Android Studio / VS Code (Optional, but Recommended)

• Android Studio: Recommended for an IDE with full Flutter support, including an emulator for testing.
  • Download from the Android Studio website.
• VS Code: A lightweight editor with Flutter plugins.
  • Download from Visual Studio Code’s website.

For both IDEs, install the Flutter and Dart plugins from their respective marketplace.

4. Set up an Emulator or Physical Device

• Emulator: You can set up an Android Emulator in Android Studio by opening the AVD Manager.
• Physical Device: You can also connect a physical device and use it for testing.

Step 2: Create a New Flutter Project

1. Open Your IDE (Android Studio/VS Code).
2. Create a New Flutter Project:
   • In Android Studio:
     • Open Android Studio → Select Start a new Flutter project.
   • In VS Code:
     • Open the Command Palette (Cmd + Shift + P on macOS or Ctrl + Shift + P on Windows) → Type Flutter: New Project.
   Follow the prompts to name your project and choose the location. Flutter will create a new project with a default template.

Step 3: Understand the Default Project Structure

In the newly created project, you’ll see these important files:

• lib/main.dart: The entry point for the app, where the app’s UI is defined.
• pubspec.yaml: Defines the dependencies and assets (such as images) for your Flutter project.

Step 4: Modify the main.dart File

Let’s write a simple “Hello, World!” app.

1. Open main.dart inside the lib folder.
2. Replace the content with the following code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First Flutter App'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Code Explanation:

• MyApp: This is the root widget of your app.
• MaterialApp: A widget that provides basic material design visual structure.
• Scaffold: A basic structure with an AppBar, Body, and FloatingActionButton.
• Text: Displays a simple text string on the screen.

Step 5: Run Your App

1. Ensure you have a device/emulator running.
   • In Android Studio, click on the green “play” button.
   • In VS Code, use the command Flutter: Launch Emulator from the command palette.
2. Click on Run or Start Debugging in your IDE to run your app.

If everything is set up correctly, your app should launch and display “Hello, World!” on the screen.

Step 6: Customize Your App

Now that you have your first app running, you can start modifying it! For example, change the text color or layout:

body: Center(
  child: Text(
    'Hello, Flutter!',
    style: TextStyle(
      fontSize: 30,
      fontWeight: FontWeight.bold,
      color: Colors.blue,
    ),
  ),
),

You can also add buttons, images, and other widgets to make your app more interactive.

Step 7: Debug and Hot Reload

One of Flutter’s great features is Hot Reload, which allows you to instantly see changes without rebuilding the entire app.

1. Make a change to your code (e.g., modify the text).
2. Save the file (Ctrl+S or Cmd+S).
3. Flutter will immediately reflect the changes on the running app.

Step 8: Build and Publish (Optional)

If you want to test the app on a real device or publish it:

1. Build the APK (Android):

flutter build apk

2. Build for iOS (if on macOS):

flutter build ios

Step 9: Learn More

You can start learning more advanced Flutter concepts such as:

• State Management: Handling app state using providers, Riverpod, or other state management solutions.
• Navigation: Moving between screens in your app using Flutter’s Navigator widget.
• Networking: Fetching data from APIs using packages like http.

Check the Flutter documentation and the Flutter Codelabs for more advanced topics.