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 Widget Flutter Counter with Increment and Decrement Flutter Dark/Light Theme Toggle Flutter Counter with Reset Flutter Simple Stopwatch Flutter Counter with History

Learn FLUTTER with Real Code Examples

Updated Nov 17, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

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 →

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 →

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 →

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 →

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 →

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?

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

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Learn Flutter - 6 Code Examples & CST Typing Practice Test

Code Sample Descriptions

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 →

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 →

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 →

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 →

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 →

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?

What are the primary use cases for Flutter?

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.