Flutter

Google's open-source UI toolkit for building natively compiled applications for mobile, web, and desktop from a single Dart codebase.

Category: Mobile Development (also: Front End)

Author: Atomic Glue Editorial Team

## Definition

Flutter is Google's open-source UI framework that compiles to native code for iOS, Android, web, Windows, macOS, and Linux from a single Dart codebase. Unlike frameworks that rely on platform OEM widgets or WebViews, Flutter draws its own widgets using the Skia rendering engine (or Impeller on iOS/Android). This gives Flutter pixel-perfect control over every rendered element and guarantees consistent UIs across platforms. Flutter is used by Google (Google Pay, Google Home), Alibaba, BMW, and thousands of apps.

## Architecture

Flutter's architecture has three layers. The **Framework layer** (Dart) provides widgets, layouts, animations, gestures, and material/cupertino design libraries. The **Engine layer** (C/C++) handles rendering, text layout, and platform channels. The **Embedder layer** is the platform-specific shell that hosts the Flutter engine. Flutter compiles Dart ahead of time (AOT) to native ARM/x86 code, so there is no JavaScript bridge overhead. This compilation approach gives Flutter a performance advantage over React Native in rendering and startup time.

## Widgets: The Core Concept

Everything in Flutter is a widget. Buttons, padding, text, rows, columns, and even the app itself are widgets. Flutter widgets are composed hierarchically. There are two types. **StatelessWidget**: Immutable, renders based on configuration alone. **StatefulWidget**: Mutable, re-renders when internal state changes. Flutter provides two design language widget sets: Material (Google's Material Design) and Cupertino (Apple's iOS design). You can mix both or build fully custom widgets.

## Dart Language

Flutter uses Dart, a language developed by Google. Dart is garbage-collected, object-oriented, and supports both JIT (hot reload) and AOT compilation. The hot reload feature compiles changes in under a second without losing app state, making Flutter's development loop exceptionally fast. Dart's syntax is familiar to developers from Java, JavaScript, C#, or Kotlin. Learning Dart is not the barrier people think it is. Anyone with OOP experience can be productive in Dart within a week.

## In code

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('Flutter Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('Hello, Flutter!', style: TextStyle(fontSize: 24)),
              const SizedBox(height: 16),
              FilledButton(
                onPressed: () {},
                child: const Text('Tap Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

## Common questions

Q: Is Flutter only for mobile?

A: No. Flutter targets iOS, Android, web, Windows, macOS, and Linux from one codebase. The web target uses CanvasKit rendering, while desktop targets compile to native executables.

Q: How does Flutter compare to React Native in 2025?

A: Flutter generally has better performance (no bridge) and more consistent cross-platform rendering. React Native has a larger ecosystem and more native-feeling results if you need platform-specific UI. Both are production-ready. The choice usually comes down to your team's language preference (Dart vs JavaScript).

## Key takeaways

• Flutter compiles directly to native code from a single Dart codebase.
• Everything is a widget, composed hierarchically.
• Skia/Impeller rendering engine gives pixel-perfect control across platforms.
• Hot reload enables near-instant iteration during development.
• Targets mobile, web, and desktop from one project.

## Related entries

• [Cross-Platform Development](atomicglue.co/glossary/cross-platform-development)
• [React Native](atomicglue.co/glossary/react-native)
• [Hybrid App](atomicglue.co/glossary/hybrid-app)

Last updated June 2025. Permalink: atomicglue.co/glossary/flutter