Skip to main content
CodeSpeedTest
Languages
Start TypingJump into a test — pick any languageAdaptive TrainingUnlock chars as you master themPractice DrillsFocused sessions targeting weak spotsDaily ChallengesNew coding challenges every dayRace ModeCompete against others in real timeAI OpponentRace against an AI at your WPM levelTournamentsLive coding speed tournamentsArcade GamesZType, Overkill Survival, Glyphica & moreGamificationXP, coins, badges & quests
LeaderboardGlobal rankings for every languageCertificatesEarn verifiable Bronze / Silver / Gold certsActivityDaily streaks & historical analyticsProfileYour stats, badges & achievements
Browse Languages500+ languages with real code examplesBlogTips, guides & deep divesFree ToolsWPM calculator, typing speed report & moreFAQCommon questions answeredGetting StartedNew to CodeSpeedTest?AboutOur story & missionSupportGet help — Pro users get priorityContactGet in touch with the team
Pricing
  1. Home
  2. /
  3. Learn
  4. /
  5. Flutter

Learn Flutter - 6 Code Examples & CST Typing Practice Test

Flutter is an open-source UI framework by Google for building cross-platform mobile, web, and desktop applications using a single Dart codebase, featuring a highly performant rendering engine and a rich set of customizable widgets.

View all 6 Flutter code examples →
Flutter Stateless WidgetFlutter Counter with Increment and DecrementFlutter Dark/Light Theme ToggleFlutter Counter with ResetFlutter Simple StopwatchFlutter Counter with History

Learn FLUTTER with Real Code Examples

Updated Nov 17, 2025

Explain

Flutter compiles to native ARM and x86 code for high performance.

It uses its own rendering engine (Skia) to draw every pixel on screen, ensuring consistency across platforms.

Flutter emphasizes widget-based architecture and reactive UI programming.

Core Features

Widget-based UI system

Declarative reactive framework

Compiled native performance

Platform channel integrations

State management extensibility

Open-source package ecosystem

Basic Concepts Overview

Widgets and widget tree

Stateful vs stateless widgets

Layouts and constraints

Navigation and routing

Asynchronous programming with Futures/Streams

Package and plugin system

Project Structure

lib/ -> Dart source files

pubspec.yaml -> Dependencies

android/ & ios/ -> Platform code

assets/ -> Images, fonts

main.dart -> App entry point

Building Workflow

Create project with flutter create

Build UI with widgets

Manage state using Provider/Bloc/etc.

Integrate backend/APIs

Run and debug

Build & deploy to stores

Difficulty Use Cases

Beginner: Simple UI screens

Intermediate: API integration

Advanced: Complex animations

Expert: Custom render objects, platform channels

Comparisons

More performant UI than React Native

More predictable rendering than native hybrids

More flexible than low-code tools

Larger binary size than pure native apps

Versioning Timeline

2017 - Alpha release

2018 - Flutter 1.0 stable

2020 - Web/desktop beta

2021 - Flutter 2.0 (null safety)

2022 - Flutter 3.0 full desktop support

2023-2025 - Performance, rendering & tooling improvements

Glossary

Widget: Immutable UI description

State: Mutable data driving UI changes

Hot Reload: UI refresh without restart

Skia: Flutter’s rendering engine

Installation Setup

Install Flutter SDK

Install Android Studio/Xcode

Set PATH variable to Flutter bin

Install device simulators

Run flutter doctor to validate setup

Environment Setup

Install Flutter SDK

Install IDE (VSCode or Android Studio)

Install mobile platform SDKs

Connect device or emulator

Config Files

pubspec.yaml

analysis_options.yaml

firebase_options.dart

build.gradle and Info.plist for native configs

Cli Commands

flutter create

flutter pub get

flutter run

flutter build apk/ipa

flutter analyze

Internationalization

Flutter intl package

ARB files for translation

Localization delegates

Region-specific formats

Accessibility

Semantics widget support

Screen reader compatibility

Color contrast and scalable fonts

Ui Styling

Material & Cupertino design

Custom themes

Adaptive layouts

Widget composition

State Management

setState for simple

Provider/BLoC for scalable apps

Riverpod for modern reactive state

Redux/MobX for structured architecture

Data Management

Dart collections & models

Firestore, Supabase, local storage

REST/GraphQL data

Streams for real-time updates

Architecture

Widget tree -> Element tree -> RenderObject tree

Skia-powered rendering engine

Dart runtime with AOT/JIT compilation

Platform channels for native communication

Isolates for concurrent work

Rendering Model

Skia draws directly to screen

No reliance on OEM UI components

Pixel-perfect rendering pipeline

Architectural Patterns

MVVM-like widget architecture

State management via Provider/BLoC/GetX

Declarative widget rebuilding

Component-driven layouts

Real World Architectures

Fintech dashboard

E-commerce mobile app

Social media app

Enterprise workflow system

Design Principles

Everything is a widget

Declarative UI design

Fast iterations

Consistent cross-platform behavior

Scalability Guide

Use modular architecture

Split widgets into components

Avoid unnecessary rebuilds

Implement caching and isolates

Migration Guide

Upgrade to null safety

Migrate legacy layouts to modern widgets

Move from setState to structured state mgmt

Adopt new rendering and lifecycle patterns

Performance Notes

Avoid rebuilding large widget trees

Cache expensive operations

Use const constructors when possible

Profile using Flutter DevTools

Security Notes

Secure API keys using environment configs

Use HTTPS for network calls

Validate user input

Follow Firebase security best practices

Monitoring Analytics

Firebase Analytics

Crashlytics

Performance monitoring tools

Custom logging middleware

Code Quality

Follow effective Dart guidelines

Use linters and build runners

Write meaningful tests

Maintain modular folder structure

Practical Examples

Login screen with Firebase Auth

REST API CRUD app

E-commerce UI with carts

Animation-heavy onboarding screens

Real-time chat application

Troubleshooting

Fix layout overflow errors

Resolve pubspec.yaml dependency conflicts

Debug black-screen build failures

Fix iOS code signing issues

Testing Guide

Unit testing with test package

Widget testing with flutter_test

Integration testing with Flutter Driver

Golden tests for UI

Mocking APIs using Mockito

Deployment Options

Android (APK/AAB)

iOS (IPA)

Web build

macOS/Windows/Linux desktop builds

Publishing to Play Store/App Store

Tools Ecosystem

Flutter SDK

Dart DevTools

Android Studio & VSCode

Firebase

Flutter community packages

CI/CD tools like Codemagic

Integrations

Firebase Auth, Firestore, Storage

REST & GraphQL APIs

Stripe payments

Native device APIs via plugins

Platform channels for custom native code

Productivity Tips

Use snippets and templates

Leverage hot reload efficiently

Use DevTools for debugging

Break UI into reusable widgets

Challenges

Build Instagram UI clone

Build weather app with API

Implement Redux/BLoC architecture

Create a custom widget library

Learning Path

Dart language basics

Flutter widgets and layouts

Navigation and state management

Backend/API integration

Animations and rendering

Advanced topics (Isolates, channels)

Skill Improvement Plan

Week 1: Dart & basic widgets

Week 2: Layouts & navigation

Week 3: APIs & state management

Week 4: Animations + deployment

Interview Questions

Explain widget tree vs element tree

What is the difference between hot reload & restart?

How does Flutter achieve cross-platform consistency?

What is an InheritedWidget?

Explain AOT vs JIT in Flutter

Cheat Sheet

Common widget syntax

Navigation patterns

setState vs Provider vs BLoC

pubspec.yaml configuration rules

Books

Flutter Apprentice

Flutter in Action

Beginning App Development with Flutter

Tutorials

Flutter YouTube channel

freeCodeCamp Flutter course

Udemy/CodeWithAndrea/ResoCoder

Official Docs

flutter.dev documentation

Dart.dev language docs

Firebase Flutter docs

Community Links

Flutter Community Reddit

Flutter Discord

StackOverflow Flutter tag

Community Support

Large global community

Google-backed updates

Thousands of packages on pub.dev

Extensive tutorials and courses

Monetization

In-app purchases

Subscriptions

Ads (AdMob, Facebook Ads)

Paid apps and Flutter templates

Future Roadmap

Improved rendering via Impeller

Better web performance

More desktop-targeted optimizations

Expanded native integrations

When Not To Use

Apps needing extremely small binary sizes

Heavy native hardware interactions

Apps requiring platform-specific UI patterns exclusively

Highly specialized native-only frameworks

Final Summary

Flutter is a powerful cross-platform UI framework.

Uses a single codebase for mobile, web, and desktop.

Ideal for fast development with native-like performance.

Backed by Google and thriving community support.

Faq

Why is Flutter so fast?

Flutter is fast because it compiles to native code and uses its own rendering engine to draw widgets directly, eliminating the JavaScript bridge.

Is Flutter good for beginners?

Yes, Flutter is beginner-friendly due to its simple widget system, hot reload, and strong documentation.

Does Flutter work for web?

Yes, Flutter supports web with the same codebase, though performance varies depending on complexity.

Is Flutter better than React Native?

Flutter is generally more consistent and performant due to its rendering engine, while React Native relies on native components and bridges.

Code Sample Descriptions

1

Flutter Stateless Widget

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: CounterScreen(),
        );
    }
}

class CounterScreen extends StatefulWidget {
    @override
    _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
    int _counter = 0;
    List<String> _history = [];

    void _incrementCounter() {
        setState(() {
            _counter++;
            _history.add('Incremented to $_counter');
        });
    }

    void _decrementCounter() {
        setState(() {
            _counter--;
            _history.add('Decremented to $_counter');
        });
    }

    void _resetCounter() {
        setState(() {
            _counter = 0;
            _history.clear();
            _history.add('Counter reset');
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Flutter Counter'),
                backgroundColor: Theme.of(context).primaryColor,
            ),
            body: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                    Text(
                        'Current Count:',
                        style: Theme.of(context).textTheme.headlineSmall,
                    ),
                    Text(
                        '$_counter',
                        style: Theme.of(context).textTheme.headlineLarge?.copyWith(
                            color: Theme.of(context).primaryColor,
                            fontWeight: FontWeight.bold,
                        ),
                    ),
                    SizedBox(height: 20),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                            FloatingActionButton(
                                onPressed: _decrementCounter,
                                tooltip: 'Decrement',
                                child: Icon(Icons.remove),
                                heroTag: 'decrement',
                            ),
                            FloatingActionButton(
                                onPressed: _resetCounter,
                                tooltip: 'Reset',
                                child: Icon(Icons.refresh),
                                heroTag: 'reset',
                            ),
                            FloatingActionButton(
                                onPressed: _incrementCounter,
                                tooltip: 'Increment',
                                child: Icon(Icons.add),
                                heroTag: 'increment',
                            ),
                        ],
                    ),
                    SizedBox(height: 30),
                    Expanded(
                        child: Container(
                            padding: EdgeInsets.all(16),
                            child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                    Text(
                                        'History:',
                                        style: Theme.of(context).textTheme.titleMedium,
                                    ),
                                    Expanded(
                                        child: ListView.builder(
                                            itemCount: _history.length,
                                            itemBuilder: (context, index) {
                                                return ListTile(
                                                    leading: Icon(Icons.history),
                                                    title: Text(_history[index]),
                                                    subtitle: Text('Action ${index + 1}'),
                                                );
                                            },
                                        ),
                                    ),
                                ],
                            ),
                        ),
                    ),
                ],
            ),
        );
    }
}

Demonstrates Flutter widget lifecycle, state management, and UI composition.

Let’s Try →
2

Flutter Counter with Increment and Decrement

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(home: CounterScreen());
    }
}

class CounterScreen extends StatefulWidget {
    @override
    _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
    int _count = 0;

    void _increment() => setState(() => _count++);
    void _decrement() => setState(() => _count--);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Counter')),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Text('Count: $_count', style: TextStyle(fontSize: 32)),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                                ElevatedButton(onPressed: _decrement, child: Text('-')),
                                SizedBox(width: 20),
                                ElevatedButton(onPressed: _increment, child: Text('+')),
                            ],
                        )
                    ],
                ),
            ),
        );
    }
}

Simple counter using StatefulWidget with increment and decrement buttons.

Let’s Try →
3

Flutter Dark/Light Theme Toggle

import 'package:flutter/material.dart';

void main() => runApp(ThemeToggleApp());

class ThemeToggleApp extends StatefulWidget {
    @override
    _ThemeToggleAppState createState() => _ThemeToggleAppState();
}

class _ThemeToggleAppState extends State<ThemeToggleApp> {
    bool _isDark = false;

    void _toggleTheme() => setState(() => _isDark = !_isDark);

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            theme: _isDark ? ThemeData.dark() : ThemeData.light(),
            home: Scaffold(
                appBar: AppBar(title: Text('Theme Toggle')),
                body: Center(
                    child: ElevatedButton(
                        onPressed: _toggleTheme,
                        child: Text(_isDark ? 'Switch to Light' : 'Switch to Dark'),
                    ),
                ),
            ),
        );
    }
}

Toggles between light and dark themes using StatefulWidget.

Let’s Try →
4

Flutter Counter with Reset

import 'package:flutter/material.dart';

void main() => runApp(CounterResetApp());

class CounterResetApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) => MaterialApp(home: CounterScreen());
}

class CounterScreen extends StatefulWidget {
    @override
    _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
    int _count = 0;

    void _increment() => setState(() => _count++);
    void _decrement() => setState(() => _count--);
    void _reset() => setState(() => _count = 0);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Counter Reset')),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Text('Count: $_count', style: TextStyle(fontSize: 32)),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                                ElevatedButton(onPressed: _decrement, child: Text('-')),
                                SizedBox(width: 10),
                                ElevatedButton(onPressed: _reset, child: Text('Reset')),
                                SizedBox(width: 10),
                                ElevatedButton(onPressed: _increment, child: Text('+')),
                            ],
                        )
                    ],
                ),
            ),
        );
    }
}

Counter widget with increment, decrement, and reset functionality.

Let’s Try →
5

Flutter Simple Stopwatch

import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(StopwatchApp());

class StopwatchApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) => MaterialApp(home: StopwatchScreen());
}

class StopwatchScreen extends StatefulWidget {
    @override
    _StopwatchScreenState createState() => _StopwatchScreenState();
}

class _StopwatchScreenState extends State<StopwatchScreen> {
    int _seconds = 0;
    Timer? _timer;

    void _start() => _timer = Timer.periodic(Duration(seconds: 1), (_) => setState(() => _seconds++));
    void _stop() => _timer?.cancel();
    void _reset() => setState(() => _seconds = 0);

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Stopwatch')),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Text('$_seconds s', style: TextStyle(fontSize: 48)),
                        Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                                ElevatedButton(onPressed: _start, child: Text('Start')),
                                SizedBox(width: 10),
                                ElevatedButton(onPressed: _stop, child: Text('Stop')),
                                SizedBox(width: 10),
                                ElevatedButton(onPressed: _reset, child: Text('Reset')),
                            ],
                        )
                    ],
                ),
            ),
        );
    }
}

Basic stopwatch that counts seconds using StatefulWidget and Timer.

Let’s Try →
6

Flutter Counter with History

import 'package:flutter/material.dart';

void main() => runApp(CounterHistoryApp());

class CounterHistoryApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) => MaterialApp(home: CounterScreen());
}

class CounterScreen extends StatefulWidget {
    @override
    _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
    int _count = 0;
    List<String> _history = [];

    void _increment() {
        setState(() {
            _count++;
            _history.add('Incremented to $_count');
        });
    }

    void _decrement() {
        setState(() {
            _count--;
            _history.add('Decremented to $_count');
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text('Counter with History')),
            body: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                    Text('Count: $_count', style: TextStyle(fontSize: 32)),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                            ElevatedButton(onPressed: _decrement, child: Text('-')),
                            SizedBox(width: 10),
                            ElevatedButton(onPressed: _increment, child: Text('+')),
                        ],
                    ),
                    Expanded(
                        child: ListView.builder(
                            itemCount: _history.length,
                            itemBuilder: (context, index) => ListTile(title: Text(_history[index])),
                        ),
                    )
                ],
            ),
        );
    }
}

Counter that logs all increment and decrement actions in a history list.

Let’s Try →

Frequently Asked Questions about Flutter

What is Flutter?

Flutter is an open-source UI framework by Google for building cross-platform mobile, web, and desktop applications using a single Dart codebase, featuring a highly performant rendering engine and a rich set of customizable widgets.

What are the primary use cases for Flutter?

Cross-platform mobile apps (iOS & Android). Web applications. Desktop apps (macOS, Windows, Linux). Startup MVP development. Enterprise internal tools. Apps requiring advanced UI/animations. Real-time dashboards and admin apps

What are the strengths of Flutter?

Visually consistent UI across platforms. Fast development with hot reload. Performance close to native apps. Massive widget and package ecosystem. Clean architecture with widgets and states

What are the limitations of Flutter?

App sizes can be slightly larger. Newer ecosystem compared to native. Heavy custom rendering requires optimization. Some platform APIs require channel coding

How can I practice Flutter typing speed?

CodeSpeedTest offers 6+ real Flutter code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

CReactPythonC++RustTypeScriptKotlinPHPJavaC#RubyMqlCqlN1qlCypherGremlinPartiqlHaskellElixirFsharpView all languages →
CodeSpeedTest

Improve your coding speed, code accuracy, and programming syntax WPM with practice sessions across 500+ programming languages.

Quick Links

HomeAboutFeaturesGetting StartedLanguages

Legal & Support

Pro ⚡ PricingContactPrivacy PolicyTerms of Service

Connect

CodeSpeedTest on GitHubCodeSpeedTest on TwitterEmail CodeSpeedTest

© 2026 CodeSpeedTest. All rights reserved.