← Back to Blog

flutter-dart-getting-started

Fapskom IT

Published

3 min read

Getting Started with Flutter & Dart: Build Your First App

Flutter has rapidly become one of the most popular cross-platform UI frameworks, allowing developers to ship apps to mobile, web, and desktop from a single Dart codebase. In this tutorial, we'll go from zero to a working Flutter app in under 30 minutes.

Prerequisites

Before we start, make sure you have:

  • Flutter SDK installed (see flutter.dev)
  • Dart (bundled with Flutter — no separate install needed)
  • An IDE — VS Code with the Flutter extension, or Android Studio

Setting Up Your Environment

After installing Flutter, verify your installation by running:

flutter doctor

This command checks your environment and displays a report of any missing dependencies. A healthy output looks like:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.0)
[✓] Android toolchain - develop for Android devices
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.90.0)

Creating a New Flutter Project

flutter create my_first_app
cd my_first_app

This scaffolds the standard Flutter project structure:

my_first_app/
├── android/
├── ios/
├── lib/
│   └── main.dart       ← Your app's entry point
├── test/
└── pubspec.yaml        ← Dependency management

Understanding main.dart

Open lib/main.dart. You'll see the default counter app. Let's break it down:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Key Dart Concepts

1. Everything is a Widget

Flutter's UI is built from composable widgets. StatelessWidget is for immutable UI; StatefulWidget is for UI that can change.

2. The build Method

Every widget implements a build method that returns a widget tree. Flutter calls this whenever the UI needs to re-render.

3. Null Safety

Dart has sound null safety. Notice const constructors — they're evaluated at compile time, improving performance.

Building a Custom Counter Widget

Let's refactor the counter into a cleaner, reusable widget:

class CounterWidget extends StatefulWidget {
  const CounterWidget({super.key});

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          '$_count',
          style: Theme.of(context).textTheme.displayLarge,
        ),
        const SizedBox(height: 24),
        FilledButton.icon(
          onPressed: _increment,
          icon: const Icon(Icons.add),
          label: const Text('Increment'),
        ),
      ],
    );
  }
}

The setState() call is crucial — it tells Flutter to re-run the build method with the updated state.

Running the App

# Run on a connected device or emulator
flutter run

# Run on Chrome (web)
flutter run -d chrome

Hot Reload & Hot Restart

Flutter's killer feature is hot reload — press r in the terminal (or save in VS Code) and your changes appear instantly without losing state.

  • Hot Reload (r) — Injects updated code; preserves state.
  • Hot Restart (R) — Rebuilds the app from scratch; resets state.

Working with pubspec.yaml

Dependencies in Flutter are managed in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0          # HTTP requests
  provider: ^6.1.2      # State management

After editing, run:

flutter pub get

Next Steps

You've built your first Flutter app! Here's where to go next:

  1. State Management — Explore provider, riverpod, or bloc
  2. Navigation — Use go_router for declarative routing
  3. Networking — Fetch data with the http or dio packages
  4. Platform Channels — Call native iOS/Android APIs from Dart

Flutter's rich ecosystem and hot reload make it an exceptional choice for cross-platform development. Happy coding! 🚀

← More Articles