watchable 4.1.0

watchable: ^4.1.0 copied to clipboard

example/lib/main.dart

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

void main() {
  runApp(MaterialApp(
    home: MainPage(),
  ));
}

class MainPage extends StatelessWidget {
  // =======================================================================
  // TRADITIONAL API (Verbose but Explicit)
  // =======================================================================
  final _counterWatchable = MutableStateWatchable<int>(0);
  StateWatchable<int> get counterWatchable => _counterWatchable;

  final _textWatchable = MutableStateWatchable<String>('');
  StateWatchable<String> get textWatchable => _textWatchable;

  final _eventWatchable = MutableWatchable<String>();
  Watchable<String> get eventWatchable => _eventWatchable;

  // =======================================================================
  // NEW EXTENSION API (Concise and Developer-Friendly)
  // =======================================================================
  final counter = 0.watch; // WInt - 70% less code
  final name = 'John'.watch; // WString
  final isLoading = false.watch; // WBool
  final price = 99.99.watch; // WDouble
  final items = <String>[].watch; // WList<String>
  final notifications = WEvent<String>(); // Event stream

  MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Watchable API Comparison')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'NEW EXTENSION API',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),

            // New API - Counter
            counter.build((value) => Text(
                  'Counter: $value',
                  style: const TextStyle(fontSize: 24, color: Colors.blue),
                )),
            ElevatedButton(
              onPressed: () => counter.emit(counter.value + 1),
              child: const Text('Increment (New API)'),
            ),
            const SizedBox(height: 16),

            // New API - Name
            name.build((value) => Text(
                  'Name: $value',
                  style: const TextStyle(fontSize: 20, color: Colors.blue),
                )),
            TextField(
              onChanged: (value) => name.emit(value),
              decoration: const InputDecoration(
                labelText: 'Enter name (New API)',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),

            // New API - Loading State
            isLoading.build((loading) => loading
                ? const CircularProgressIndicator()
                : const Text('Ready!', style: TextStyle(color: Colors.green))),
            ElevatedButton(
              onPressed: () => isLoading.emit(!isLoading.value),
              child: const Text('Toggle Loading'),
            ),
            const SizedBox(height: 16),

            // New API - Price
            price.build((value) => Text(
                  'Price: \$${value.toStringAsFixed(2)}',
                  style: const TextStyle(fontSize: 18, color: Colors.green),
                )),
            ElevatedButton(
              onPressed: () => price.emit(price.value - 10),
              child: const Text('Discount \$10'),
            ),

            const Divider(height: 40),
            const Text(
              'NEW .value SETTER SYNTAX',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.purple),
            ),
            const SizedBox(height: 16),

            // Demonstrate the CounterState pattern
            _CounterStateDemo(),

            const Divider(height: 40),
            const Text(
              'TRADITIONAL API (DEPRECATED)',
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.orange),
            ),
            const Text(
              'These APIs show deprecation warnings and will be removed in v5.0.0',
              style: TextStyle(
                  fontSize: 12, color: Colors.red, fontStyle: FontStyle.italic),
            ),
            const SizedBox(height: 16),

            // Traditional API - Counter
            WatchableBuilder<int>(
              watchable: counterWatchable,
              builder: (context, value, child) {
                return Text('Traditional Counter: $value',
                    style: const TextStyle(fontSize: 18, color: Colors.orange));
              },
            ),
            ElevatedButton(
              onPressed: () =>
                  _counterWatchable.emit(counterWatchable.value + 1),
              child: const Text('Increment (Traditional)'),
            ),
            const SizedBox(height: 16),

            // Traditional API - Text
            WatchableBuilder<String>(
              watchable: textWatchable,
              builder: (context, value, child) {
                return Text('Traditional Text: $value',
                    style: const TextStyle(fontSize: 16, color: Colors.orange));
              },
            ),
            TextField(
              onChanged: (value) => _textWatchable.emit(value),
              decoration: const InputDecoration(
                labelText: 'Enter text (Traditional)',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),

            // Event Consumer (Traditional)
            WatchableConsumer<String>(
              watchable: eventWatchable,
              onEvent: (value) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Event: $value')),
                );
              },
              child: ElevatedButton(
                onPressed: () => _eventWatchable.emit('Traditional event!'),
                child: const Text('Trigger Event (Traditional)'),
              ),
            ),
            const SizedBox(height: 16),

            // Event Consumer (New API)
            notifications.consume(
              onEvent: (value) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('New API Event: $value')),
                );
              },
              child: ElevatedButton(
                onPressed: () => notifications.emit('New API event!'),
                child: const Text('Trigger Event (New API)'),
              ),
            ),

            const Divider(height: 40),
            const Text(
              'COMBINING STATES',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),

            // Traditional combiner (shows deprecation warning)
            const Text(
                'DEPRECATED: WatchableBuilder.from2 - See console for warnings',
                style: TextStyle(fontSize: 12, color: Colors.red)),
            WatchableBuilder.from2<int, String, String>(
              watchable1: counterWatchable,
              watchable2: textWatchable,
              combiner: (count, text) =>
                  'Traditional: Count=$count, Text="$text"',
              builder: (context, value, child) {
                return Text(value, style: const TextStyle(fontSize: 14));
              },
            ),

            const SizedBox(height: 16),

            const Divider(height: 40),
            const Text(
              'NEW COMBINER API',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),

            // Tuple combiner demo
            (name, isLoading).build((n, loading) => loading
                ? const Text('Loading...',
                    style: TextStyle(color: Colors.orange))
                : Text('Hello $n!',
                    style: const TextStyle(fontSize: 18, color: Colors.green))),

            const SizedBox(height: 16),

            // Watch.build2 demo
            Watch.build2(
                counter,
                price,
                (c, p) =>
                    Text('Items: $c, Total: \$${(c * p).toStringAsFixed(2)}')),

            const SizedBox(height: 16),
            const Text('Form Validation Example'),
            Watch.build2(name, counter, (n, c) {
              final isValid = n.isNotEmpty && c > 0;
              return ElevatedButton(
                onPressed: isValid
                    ? () {
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(
                              content: Text('Form valid! Name: $n, Count: $c')),
                        );
                      }
                    : null,
                child: Text(isValid ? 'Valid Form' : 'Invalid Form'),
              );
            }),

            const SizedBox(height: 16),
            const Text(
              'CODE COMPARISON',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            Container(
              padding: const EdgeInsets.all(12),
              decoration: BoxDecoration(
                color: Colors.grey[100],
                borderRadius: BorderRadius.circular(8),
              ),
              child: const Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    'DEPRECATED: WatchableBuilder.from2(...)',
                    style: TextStyle(
                        fontFamily: 'monospace',
                        fontSize: 12,
                        color: Colors.red),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'NEW API: (a, b).build(...) or Watch.build2(...)',
                    style: TextStyle(
                      fontFamily: 'monospace',
                      fontSize: 12,
                      fontWeight: FontWeight.bold,
                      color: Colors.green,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text('70% less code, 10x performance improvement!'),
                  SizedBox(height: 4),
                  Text('See MIGRATION_GUIDE.md for complete migration steps',
                      style:
                          TextStyle(fontSize: 11, fontStyle: FontStyle.italic)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// Demo widget showing the new .value setter syntax
class _CounterStateDemo extends StatelessWidget {
  // This is the pattern the user requested
  final counterState = _CounterState();

  _CounterStateDemo();

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.purple.withOpacity(0.1),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'CounterState Pattern with .value setter:',
            style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 8),
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(4),
            ),
            child: const Text(
              '''class CounterState {
  final counter = 0.watch;
  
  void increment() {
    counter.value += 1;  // Direct modification!
  }
}''',
              style: TextStyle(fontFamily: 'monospace', fontSize: 12),
            ),
          ),
          const SizedBox(height: 16),

          // Display current value
          counterState.counter.build((value) => Text(
                'Count: $value',
                style: const TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.purple),
              )),

          const SizedBox(height: 16),

          // Control buttons
          Wrap(
            spacing: 8,
            children: [
              ElevatedButton(
                onPressed: counterState.increment,
                style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                child: const Text('++ Increment'),
              ),
              ElevatedButton(
                onPressed: counterState.decrement,
                style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                child: const Text('-- Decrement'),
              ),
              ElevatedButton(
                onPressed: counterState.reset,
                style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
                child: const Text('Reset'),
              ),
            ],
          ),

          const SizedBox(height: 8),
          const Text(
            'Notice: No .emit() calls needed! Direct value modification with +=, -=, etc.',
            style: TextStyle(
                fontSize: 12, fontStyle: FontStyle.italic, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}

/// Example state class showing the new .value setter pattern
class _CounterState {
  final counter = 0.watch;

  void increment() {
    counter.value +=
        1; // Direct modification instead of emit(counter.value + 1)
  }

  void decrement() {
    counter.value -= 1; // Works with all arithmetic operators
  }

  void reset() {
    counter.value = 0; // Direct assignment
  }
}