Learn FLUTTER with Real Code Examples

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.

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.

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.

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.

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.

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.