Introduction to Flutter

What is Flutter?

Flutter is an open-source UI toolkit from Google for building apps from a single codebase. With one project written in the Dart language, you can ship to Android, iOS, web, Windows, macOS and Linux. It launched in 2018 and has become one of the most popular cross-platform frameworks.

What makes Flutter different

Most cross-platform tools (like React Native) translate your code into the platform’s native widgets. Flutter takes a different approach: it draws every pixel itself using its own high-performance rendering engine (Skia/Impeller). This means your app looks exactly the same on every device and version, and you get smooth 60/120fps animations and complete control over the design.

The big idea: everything is a widget

In Flutter, every part of the UI is a widget — text, a button, padding, even the whole screen and the app itself. You build interfaces by nesting widgets inside widgets, like building blocks. Once this clicks, Flutter becomes very intuitive.

Declarative UI

Like SwiftUI and Jetpack Compose, Flutter is declarative: you describe what the UI should look like for the current data, and Flutter rebuilds it when the data changes. You don’t manually update individual widgets.

Setting up

flutter create my_app
cd my_app
flutter run
flutter doctor      # checks your setup is complete

Flutter works with Android Studio or VS Code. flutter doctor tells you if anything (like an Android SDK or Xcode) is missing.

Your first app

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(
      home: Scaffold(
        appBar: AppBar(title: const Text('Home')),
        body: const Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

runApp starts the app, MaterialApp sets up Material Design, and Scaffold provides the basic screen structure (app bar + body).

Why developers love Flutter

• One codebase for mobile, web and desktop.
• Hot reload — see code changes in under a second without losing app state.
• Beautiful, consistent UI on every device.
• Great performance from compiled, GPU-accelerated rendering.

Common beginner misconceptions

• “Flutter uses native widgets” — no, it draws its own (which is its strength).
• “I need to learn Java/Swift too” — not for most apps; Dart is enough.
• “It’s only for mobile” — it also targets web and desktop.

Summary: Flutter builds apps for many platforms from one Dart codebase by drawing its own pixels for a consistent, fast UI. Everything is a widget, the UI is declarative, and hot reload makes development delightful.