Part 1: Introduction to Flutter and Environment Setup

This entry is part 2 of 8 in the series Flutter Development Tutorial (Beginner to Intermediate)

1. What is Flutter?

Flutter is Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase. It is highly efficient, and some major apps like Google Ads and Alibaba are built using it.

2. Setting Up Development Environment

Step 1: Install Flutter SDK
  • Visit the official Flutter website and download the appropriate SDK for your operating system (Windows, macOS, or Linux).
  • Follow the installation instructions.
Step 2: Install an IDE (VSCode or Android Studio)
  • VSCode: Download and install VSCode.
    • Install the Flutter and Dart extensions from the VSCode marketplace.
  • Android Studio: Download and install Android Studio.
    • Set up Flutter and Dart plugins via the plugin manager.
Step 3: Set Up an Android/iOS Emulator
  • Follow this guide to set up an Android or iOS emulator for testing your apps.

3. First Flutter Project: “Hello World”

Let’s build a simple “Hello World” app to understand how Flutter projects are structured.

Step 1: Create a New Flutter Project

Open the terminal or command prompt and run the following command to create a new project:

flutter create hello_world_app
cd hello_world_app
Step 2: Open Project in IDE
  • Open the project in VSCode or Android Studio.
  • Locate the lib/main.dart file.
Step 3: Modify the Code

In the lib/main.dart file, 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('Hello World App'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}
Step 4: Run the App
  • To run the app, use the following command in the terminal:
flutter run

This simple app displays a “Hello, World!” message on the screen. It also helps students understand the basic structure of a Flutter app.

Related posts<< Flutter Development Tutorial (Beginner to Intermediate)Part 2: Dart Basics for Flutter >>