Skip to main content

Getting Started with Flutter

Getting Started with Flutter

Getting Started with Flutter

Flutter is a powerful framework for building natively compiled applications for mobile, web, and desktop from a single codebase. In this tutorial, you'll learn how to set up Flutter and create your first app!

Step 1: Install Flutter

To get started, you need to install Flutter on your machine. Follow these steps:

  • Download Flutter from the official Flutter website.
  • Extract the downloaded file to a desired location.
  • Add the Flutter tool to your system's path:
# For macOS and Linux
export PATH="$PATH:[flutter-installation-path]/flutter/bin"

# For Windows
set PATH=%PATH%;[flutter-installation-path]\flutter\bin

Check the installation by running:

flutter doctor

This command checks your environment and reports any issues.

Step 2: Set Up an Editor

Install a code editor for Flutter development. Popular choices include:

Step 3: Create Your First Flutter App

Follow these steps to create your first Flutter app:

  1. Open a terminal or command prompt.
  2. Run the following command to create a new Flutter project:
flutter create my_first_app

This generates a new Flutter project with a default structure.

Navigate into the project directory:

cd my_first_app

Run the app on an emulator or connected device:

flutter run

Step 4: Understand the Flutter Project Structure

A Flutter project consists of:

  • lib/: Contains the Dart code for your app. The main file is main.dart.
  • android/ and ios/: Native platform-specific code.
  • pubspec.yaml: Manages project dependencies and configurations.

Step 5: Modify the Starter App

Open lib/main.dart in your editor. Modify the default app to display your own message:

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, Flutter!')),
      ),
    );
  }
}

Conclusion: You’ve successfully set up Flutter, created your first app, and explored the project structure. Keep experimenting and explore more Flutter features to build amazing applications!

Comments