Flutter

Flutter's Layered Architecture:

┌─────────────────────────────────────┐
│            Your Flutter App          │
├─────────────────────────────────────┤
│     Flutter Framework Libraries      │
│  (Material, Cupertino, Widgets...)  │
├─────────────────────────────────────┤
│           Flutter Engine            │
│    (Skia, Dart VM, Text Layout)     │
├─────────────────────────────────────┤
│      Platform-Specific Embedder     │
│      (iOS, Android, Web, etc.)      │
└─────────────────────────────────────┘
        

Technical Implementation of Hot Reload:

// How hot reload works under the hood:
// 1. When you save changes, the Dart code is recompiled
// 2. The new code is sent to the Dart VM
// 3. The VM updates classes with new versions
// 4. Flutter framework rebuilds the widget tree

// This works because Flutter builds UIs with a functional approach:
@override
Widget build(BuildContext context) {
  // This function can be re-executed on hot reload
  // without losing state because StatefulWidgets 
  // separate state from rendering
  return Container(
    color: _calculateColor(), // Function will use updated logic on reload
    child: _buildComplexWidget(), // New widget structure is rendered
  );
}
        

Detailed Architecture Diagram:

┌───────────────────────────────────────────────────────┐
│                   Your Flutter App                     │
└───────────────────────────────────────────────────────┘
                           ↓
┌───────────────────────────────────────────────────────┐
│                    Flutter Framework                   │
├───────────────┬───────────────┬───────────────────────┤
│ Material/      │  Widgets     │  Rendering            │
│ Cupertino      │  (Stateless, │  (RenderObject,       │
│ Design         │   Stateful,  │   Layout Protocol,    │
│                │   Inherited) │   Painting)           │
├───────────────┴───────────────┼───────────────────────┤
│ Animation / Gestures          │  Foundation           │
│ (Tween, Controller, GestureDetector)│ (Basic Types, Utilities)   │
└───────────────────────────────┴───────────────────────┘
                           ↓
┌───────────────────────────────────────────────────────┐
│                     Flutter Engine                     │
├───────────────┬───────────────┬───────────────────────┤
│ Skia          │ Dart Runtime  │ Text Layout           │
│ (Graphics)    │ (AOT/JIT)     │ (libtxt)              │
├───────────────┴───────────────┼───────────────────────┤
│ Platform Channels            │ Service Extensions     │
└───────────────────────────────┴───────────────────────┘
                           ↓
┌───────────────────────────────────────────────────────┐
│                  Platform Embedders                    │
├───────────────┬───────────────┬───────────────────────┤
│ Android       │ iOS           │ Web / Desktop / Etc.  │
└───────────────┴───────────────┴───────────────────────┘
        

Flutter's Rendering Pipeline in Action:

// This example demonstrates how Flutter handles UI updates:

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    // When setState is called:
    setState(() {
      _counter++;
    });
    // 1. Flutter marks this Element as dirty
    // 2. Next frame, Flutter rebuilds only dirty Elements
    // 3. RenderObjects linked to changed Elements are updated
    // 4. Only modified screen areas are repainted via Skia
  }

  @override
  Widget build(BuildContext context) {
    // This function creates a new immutable Widget tree
    // Flutter's diffing algorithm efficiently updates only what changed
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Architecture')),
        body: Center(
          child: Text(
            'Counter: $_counter',
            style: TextStyle(fontSize: 24),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}
        

Flutter's Compositing and Rasterization Process:

Widget Tree → Element Tree → RenderObject Tree → Layer Tree → Skia GPU Commands

                                                              ┌─────────────┐
                                                              │ GPU Thread  │
┌────────────┐     ┌────────────┐     ┌─────────────┐        │ (Compositor)│
│ Dart Code  │     │ UI Thread  │     │ Raster     │        └───────┬─────┘
│ (Business  │ →   │ (Layout)   │ →   │ Thread     │ →              │
│  Logic)    │     │            │     │            │                ▼
└────────────┘     └────────────┘     └─────────────┘       GPU Rendering
        

Widget Instantiation and Lifecycle:

import 'package:flutter/material.dart';

class CustomWidget extends StatelessWidget {
  final String data;
  
  const CustomWidget({Key? key, required this.data}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    // The build method is called when:
    // 1. The widget is inserted into the tree
    // 2. The widget's parent changes its configuration
    // 3. The widget's InheritedWidget dependencies change
    return Container(
      padding: const EdgeInsets.all(16.0),
      child: Text(data),
    );
  }
}
        

Custom RenderObject Implementation:

class CustomRenderWidget extends LeafRenderObjectWidget {
  const CustomRenderWidget({Key? key}) : super(key: key);

  @override
  RenderObject createRenderObject(BuildContext context) {
    return CustomRenderObject();
  }

  @override
  void updateRenderObject(BuildContext context, CustomRenderObject renderObject) {
    // Update properties if needed
  }
}

class CustomRenderObject extends RenderBox {
  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    final canvas = context.canvas;
    // Custom painting logic
  }
}
        

Advanced StatelessWidget Implementation with const constructor:

class ProfileHeader extends StatelessWidget {
  final String username;
  final String avatarUrl;
  final VoidCallback onSettingsTap;

  // Using const constructor enables widget reuse and memory optimization
  const ProfileHeader({
    Key? key, 
    required this.username,
    required this.avatarUrl,
    required this.onSettingsTap,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24.0,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12.0),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                username,
                style: Theme.of(context).textTheme.headline6,
                overflow: TextOverflow.ellipsis,
              ),
              Text(
                'Online',
                style: Theme.of(context).textTheme.caption,
              ),
            ],
          ),
        ),
        IconButton(
          icon: const Icon(Icons.settings),
          onPressed: onSettingsTap,
        ),
      ],
    );
  }
}
        

Advanced StatefulWidget with Lifecycle Management:

class DataFeedWidget extends StatefulWidget {
  final String endpoint;
  final Duration refreshInterval;
  final bool autoRefresh;

  const DataFeedWidget({
    Key? key,
    required this.endpoint,
    this.refreshInterval = const Duration(minutes: 1),
    this.autoRefresh = true,
  }) : super(key: key);

  @override
  _DataFeedWidgetState createState() => _DataFeedWidgetState();
}

class _DataFeedWidgetState extends State<DataFeedWidget> with AutomaticKeepAliveClientMixin {
  List<dynamic> _data = [];
  bool _isLoading = true;
  Timer? _refreshTimer;
  StreamSubscription? _networkStatusSubscription;
  bool _isOffline = false;

  @override
  bool get wantKeepAlive => true; // Preserves state when scrolled offscreen

  @override
  void initState() {
    super.initState();
    _fetchData();
    _setupRefreshTimer();
    _monitorNetworkStatus();
  }

  @override
  void didUpdateWidget(DataFeedWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    
    // Handle configuration changes
    if (oldWidget.endpoint != widget.endpoint) {
      _fetchData();
    }
    
    if (oldWidget.refreshInterval != widget.refreshInterval ||
        oldWidget.autoRefresh != widget.autoRefresh) {
      _setupRefreshTimer();
    }
  }

  void _setupRefreshTimer() {
    _refreshTimer?.cancel();
    if (widget.autoRefresh) {
      _refreshTimer = Timer.periodic(widget.refreshInterval, (_) {
        if (!_isOffline) _fetchData();
      });
    }
  }

  void _monitorNetworkStatus() {
    // Example network monitoring
    _networkStatusSubscription = Connectivity().onConnectivityChanged.listen((result) {
      setState(() {
        _isOffline = result == ConnectivityResult.none;
      });
      
      if (!_isOffline) {
        _fetchData(); // Refresh when coming back online
      }
    });
  }

  Future<void> _fetchData() async {
    if (!mounted) return;
    
    setState(() {
      _isLoading = true;
    });
    
    try {
      final response = await http.get(Uri.parse(widget.endpoint));
      
      if (!mounted) return; // Check if still mounted before updating state
      
      if (response.statusCode == 200) {
        setState(() {
          _data = jsonDecode(response.body);
          _isLoading = false;
        });
      } else {
        _handleError('Server error: ${response.statusCode}');
      }
    } catch (e) {
      if (mounted) _handleError(e.toString());
    }
  }

  void _handleError(String message) {
    setState(() {
      _isLoading = false;
    });
    
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Failed to load data: $message')),
    );
  }

  @override
  void dispose() {
    _refreshTimer?.cancel();
    _networkStatusSubscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context); // Required for AutomaticKeepAliveClientMixin
    
    if (_isLoading) {
      return const Center(child: CircularProgressIndicator());
    }
    
    if (_data.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('No data available'),
            if (_isOffline)
              const Chip(
                avatar: Icon(Icons.wifi_off),
                label: Text('Offline'),
              ),
            ElevatedButton(
              onPressed: _fetchData,
              child: const Text('Retry'),
            ),
          ],
        ),
      );
    }
    
    return ListView.builder(
      itemCount: _data.length,
      itemBuilder: (context, index) {
        final item = _data[index];
        return ListTile(
          title: Text(item['title']),
          subtitle: Text(item['description']),
        );
      },
    );
  }
}
        

Constraint Propagation Example:

// This produces a 100x100 blue container centered in the available space
LayoutBuilder(
  builder: (context, constraints) {
    print('Max width: ${constraints.maxWidth}');
    print('Max height: ${constraints.maxHeight}');
    return Center(
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  },
)
        

Advanced Container Usage:

Container(
  transform: Matrix4.rotationZ(0.1),
  foregroundDecoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.transparent, Colors.black.withOpacity(0.7)],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ),
  ),
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage('https://example.com/image.jpg'),
      fit: BoxFit.cover,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10.0,
        offset: Offset(0, 4),
      ),
    ],
  ),
  clipBehavior: Clip.hardEdge,
  child: SizedBox(width: double.infinity, height: 200),
)
        

Advanced Row Implementation:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  textDirection: TextDirection.ltr,
  verticalDirection: VerticalDirection.down,
  mainAxisSize: MainAxisSize.max,
  children: [
    Text('Start', style: TextStyle(fontSize: 14)),
    Expanded(
      flex: 2,
      child: Container(color: Colors.blue, height: 20),
    ),
    Flexible(
      flex: 1,
      fit: FlexFit.loose,
      child: Container(color: Colors.red, height: 30, width: 40),
    ),
    Text('End', style: TextStyle(fontSize: 24)),
  ],
)
        

Complex Stack with Overlays:

Stack(
  clipBehavior: Clip.none,  // Allow children to overflow
  fit: StackFit.passthrough,
  alignment: AlignmentDirectional.center,
  children: [
    // Base layer
    Container(width: 300, height: 200, color: Colors.grey[300]),
    
    // Content layer
    Positioned.fill(
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [Text('Title'), Spacer(), Text('Details')],
        ),
      ),
    ),
    
    // Overlay effects
    Positioned(
      top: -20,
      right: -20,
      child: CircleAvatar(radius: 30, backgroundColor: Colors.red),
    ),
    
    // Interactive foreground element
    Positioned(
      bottom: 10,
      right: 10,
      child: ElevatedButton(onPressed: () {}, child: Text('Action')),
    ),
  ],
)
        

Advanced setState with Performance Optimization:

class OptimizedCounter extends StatefulWidget {
  @override
  _OptimizedCounterState createState() => _OptimizedCounterState();
}

class _OptimizedCounterState extends State<OptimizedCounter> {
  int counter = 0;
  
  // Using ValueNotifier to avoid unnecessary rebuilds
  final ValueNotifier<bool> _isEven = ValueNotifier<bool>(true);
  
  @override
  void initState() {
    super.initState();
    // Setup work, subscriptions, etc.
  }
  
  void incrementCounter() {
    setState(() {
      counter++;
      _isEven.value = counter % 2 == 0;
    });
  }
  
  @override
  void dispose() {
    _isEven.dispose(); // Prevent memory leaks
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    print('Main widget rebuilding');
    return Column(
      children: [
        Text('Count: $counter'),
        // Child widget only rebuilds when _isEven changes
        ValueListenableBuilder<bool>(
          valueListenable: _isEven,
          builder: (context, isEven, _) {
            print('Child widget rebuilding');
            return Text(
              'Counter is ${isEven ? "even" : "odd"}'
            );
          }
        ),
        ElevatedButton(
          onPressed: incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}
        

BLoC Implementation:

// Event definitions
abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}

// BLoC implementation
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<IncrementEvent>((event, emit) => emit(state + 1));
    on<DecrementEvent>((event, emit) => emit(state - 1));
  }
}

// Usage in UI
class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => CounterBloc(),
      child: CounterView(),
    );
  }
}

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlocBuilder<CounterBloc, int>(
          builder: (context, count) => Text('Count: $count'),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: () => context.read<CounterBloc>().add(IncrementEvent()),
          ),
          SizedBox(height: 8),
          FloatingActionButton(
            child: Icon(Icons.remove),
            onPressed: () => context.read<CounterBloc>().add(DecrementEvent()),
          ),
        ],
      ),
    );
  }
}
        

RxDart Integration:

class UserRepository {
  final BehaviorSubject<User> _userSubject = BehaviorSubject<User>();
  
  Stream<User> get user => _userSubject.stream;
  
  Future<void> fetchUser(String id) async {
    try {
      final response = await apiClient.getUser(id);
      _userSubject.add(User.fromJson(response));
    } catch (e) {
      _userSubject.addError(e);
    }
  }
  
  void dispose() {
    _userSubject.close();
  }
}
        

setState Internal Execution Flow:

void setState(VoidCallback fn) {
  // 1. Assert we're mounted to prevent updates on disposed widgets
  assert(() {
    if (!mounted) {
      throw FlutterError('setState() called after dispose()');
    }
    return true;
  }());
  
  // 2. Execute the callback to update state variables
  fn();
  
  // 3. Mark element as dirty and schedule rebuild
  _element.markNeedsBuild();
}
        

Optimized StatefulWidget Implementation:

class OptimizedCounter extends StatefulWidget {
  const OptimizedCounter({Key? key}) : super(key: key);
  
  @override
  _OptimizedCounterState createState() => _OptimizedCounterState();
}

class _OptimizedCounterState extends State<OptimizedCounter> {
  int _counter = 0;
  
  // Memoized expensive computation result
  late String _formattedValue;
  
  @override
  void initState() {
    super.initState();
    _updateFormattedValue();
  }
  
  // Only recalculate when counter changes
  void _updateFormattedValue() {
    // Simulate expensive calculation
    _formattedValue = 'Formatted: ${_counter.toString().padLeft(5, '0')}!';
  }
  
  void _incrementCounter() {
    setState(() {
      _counter++;
      _updateFormattedValue();
    });
  }
  
  @override
  Widget build(BuildContext context) {
    print('Building CounterState: $_counter');
    
    // Extract widgets to minimize rebuild scope
    return Column(
      children: [
        // This doesn't need to be extracted since it depends on state
        Text(_formattedValue, style: Theme.of(context).textTheme.headline4),
        
        // Extract stateless parts to const widgets
        const SizedBox(height: 16),
        
        // This button UI is state-independent and can be const
        ElevatedButton(
          onPressed: _incrementCounter,
          child: const Text('Increment'),
        ),
      ],
    );
  }
}
        

Advanced InheritedWidget with Change Notification:

// A more advanced InheritedWidget with mutable state management
class AppStateWidget extends StatefulWidget {
  final Widget child;
  
  const AppStateWidget({Key? key, required this.child}) : super(key: key);
  
  // Convenience method for state access
  static AppStateWidgetState of(BuildContext context) {
    final AppStateInherited? inherited = 
        context.dependOnInheritedWidgetOfExactType<AppStateInherited>();
    return inherited!.data;
  }
  
  @override
  AppStateWidgetState createState() => AppStateWidgetState();
}

class AppStateWidgetState extends State<AppStateWidget> {
  int counter = 0;
  String message = '';
  
  void incrementCounter() {
    setState(() {
      counter++;
      message = 'Counter updated: $counter';
    });
  }
  
  void resetCounter() {
    setState(() {
      counter = 0;
      message = 'Counter reset';
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return AppStateInherited(
      data: this,
      child: widget.child,
    );
  }
}

class AppStateInherited extends InheritedWidget {
  final AppStateWidgetState data;
  
  const AppStateInherited({
    Key? key,
    required this.data,
    required Widget child,
  }) : super(key: key, child: child);
  
  @override
  bool updateShouldNotify(AppStateInherited oldWidget) {
    // Fine-grained update control
    return data.counter != oldWidget.data.counter || 
           data.message != oldWidget.data.message;
  }
}

// Deep widget in the tree that consumes the state
class CounterConsumer extends StatelessWidget {
  const CounterConsumer({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    // This creates a dependency on AppStateInherited
    final state = AppStateWidget.of(context);
    
    return Column(
      children: [
        Text('Counter: ${state.counter}'),
        Text('Message: ${state.message}'),
        ElevatedButton(
          onPressed: state.incrementCounter,
          child: const Text('Increment'),
        ),
        ElevatedButton(
          onPressed: state.resetCounter,
          child: const Text('Reset'),
        ),
      ],
    );
  }
}
        

Layered State Architecture:

// 1. Domain Layer - Business Logic and State
class AuthenticationService {
  final _authStateController = StreamController<AuthState>.broadcast();
  Stream<AuthState> get authStateChanges => _authStateController.stream;
  
  AuthState _currentState = AuthState.unauthenticated();
  
  Future<void> signIn(String username, String password) async {
    try {
      _authStateController.add(AuthState.loading());
      
      // API authentication logic
      final user = await _apiClient.authenticate(username, password);
      
      _currentState = AuthState.authenticated(user);
      _authStateController.add(_currentState);
    } catch (e) {
      _currentState = AuthState.error(e.toString());
      _authStateController.add(_currentState);
    }
  }
  
  void signOut() {
    _currentState = AuthState.unauthenticated();
    _authStateController.add(_currentState);
  }
  
  void dispose() {
    _authStateController.close();
  }
}

// 2. Application Layer - InheritedWidget for Service Provision
class AppServices extends InheritedWidget {
  final AuthenticationService authService;
  
  const AppServices({
    Key? key,
    required this.authService, 
    required Widget child,
  }) : super(key: key, child: child);
  
  static AppServices of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<AppServices>()!;
  }
  
  @override
  bool updateShouldNotify(AppServices oldWidget) {
    return false; // Services are stable references
  }
}

// 3. Presentation Layer - Stateful Widgets with Local UI State
class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isPasswordVisible = false;
  
  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
  
  void _togglePasswordVisibility() {
    setState(() {
      _isPasswordVisible = !_isPasswordVisible;
    });
  }
  
  Future<void> _attemptLogin() async {
    final authService = AppServices.of(context).authService;
    await authService.signIn(
      _usernameController.text, 
      _passwordController.text
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<AuthState>(
        stream: AppServices.of(context).authService.authStateChanges,
        builder: (context, snapshot) {
          final authState = snapshot.data ?? AuthState.unauthenticated();
          
          if (authState.isLoading) {
            return const CircularProgressIndicator();
          }
          
          return Column(
            children: [
              TextField(
                controller: _usernameController,
                decoration: const InputDecoration(labelText: 'Username'),
              ),
              TextField(
                controller: _passwordController,
                obscureText: !_isPasswordVisible,
                decoration: InputDecoration(
                  labelText: 'Password',
                  suffixIcon: IconButton(
                    icon: Icon(_isPasswordVisible 
                      ? Icons.visibility_off 
                      : Icons.visibility),
                    onPressed: _togglePasswordVisibility,
                  ),
                ),
              ),
              if (authState.errorMessage != null)
                Text(
                  authState.errorMessage!,
                  style: const TextStyle(color: Colors.red),
                ),
              ElevatedButton(
                onPressed: _attemptLogin,
                child: const Text('Sign In'),
              ),
            ],
          );
        },
      ),
    );
  }
}
        

Advanced Theme Implementation:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Advanced Material Theming',
      theme: ThemeData(
        useMaterial3: true, // Using Material 3 specification
        colorScheme: ColorScheme.fromSeed(
          seedColor: Color(0xFF1976D2),
          brightness: Brightness.light,
        ),
        textTheme: TextTheme(
          displayLarge: TextStyle(
            fontSize: 32,
            fontWeight: FontWeight.bold,
            letterSpacing: -1.5,
          ),
          bodyLarge: TextStyle(
            fontSize: 16,
            height: 1.5,
            letterSpacing: 0.5,
          ),
        ),
        // Elevation configurations
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            elevation: 4,
            shadowColor: Colors.black.withOpacity(0.3),
          ),
        ),
      ),
      darkTheme: ThemeData.dark().copyWith(
        // Dark theme configurations
        colorScheme: ColorScheme.fromSeed(
          seedColor: Color(0xFF1976D2),
          brightness: Brightness.dark,
        ),
      ),
      // System preference based theme selection
      themeMode: ThemeMode.system,
      home: MyHomePage(),
    );
  }
}
        

Advanced Scaffold Implementation:

Scaffold(
  appBar: AppBar(
    title: Text('Advanced Scaffold'),
    elevation: 0,
    systemOverlayStyle: SystemUiOverlayStyle.dark,
  ),
  body: CustomScrollView(
    slivers: [
      SliverPadding(
        padding: EdgeInsets.all(16),
        sliver: SliverList(
          delegate: SliverChildListDelegate([
            // Content
          ]),
        ),
      ),
    ],
  ),
  floatingActionButton: FloatingActionButton.extended(
    onPressed: () {},
    label: Text('Action'),
    icon: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 8.0,
    child: Row(/* ... */),
  ),
  drawer: Drawer(),
  endDrawer: Drawer(),
  drawerScrimColor: Colors.black54,
  drawerEdgeDragWidth: 20.0,
  drawerEnableOpenDragGesture: true,
  endDrawerEnableOpenDragGesture: true,
  resizeToAvoidBottomInset: true,
  primary: true,
  extendBody: true,
  extendBodyBehindAppBar: false,
  drawerDragStartBehavior: DragStartBehavior.start,
)
        

SliverAppBar Implementation:

CustomScrollView(
  slivers: [
    SliverAppBar(
      expandedHeight: 200.0,
      pinned: true,
      stretch: true,
      onStretchTrigger: () async {
        // Function called when user overscrolls the SliverAppBar
      },
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Collapsing AppBar'),
        background: Image.network(
          'https://example.com/image.jpg',
          fit: BoxFit.cover,
        ),
        stretchModes: [
          StretchMode.zoomBackground,
          StretchMode.blurBackground,
          StretchMode.fadeTitle,
        ],
      ),
      actions: [
        IconButton(
          icon: Icon(Icons.share),
          onPressed: () {},
        ),
      ],
      bottom: PreferredSize(
        preferredSize: Size.fromHeight(48.0),
        child: TabBar(
          tabs: [
            Tab(text: 'Tab 1'),
            Tab(text: 'Tab 2'),
          ],
        ),
      ),
    ),
    // Other slivers...
  ],
)
        

Advanced FAB Implementation:

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  elevation: 6.0,
  highlightElevation: 12.0,
  backgroundColor: Theme.of(context).colorScheme.secondary,
  foregroundColor: Theme.of(context).colorScheme.onSecondary,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16.0),
  ),
  mini: false,
  isExtended: false,
  materialTapTargetSize: MaterialTapTargetSize.padded,
  heroTag: 'uniqueHeroTag',
  tooltip: 'Add Item',
  enableFeedback: true,
  mouseCursor: SystemMouseCursors.click,
  focusColor: Colors.redAccent.withOpacity(0.3),
  hoverColor: Colors.redAccent.withOpacity(0.2),
  focusElevation: 8.0,
  hoverElevation: 10.0,
)
        

// Named route navigation
Navigator.pushNamed(context, '/details', arguments: {'id': 1});
Navigator.popUntil(context, ModalRoute.withName('/home'));

// Push with replacement (replaces current route)
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => ReplacementScreen()),
);

// Push and remove until (useful for login flows)
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => HomeScreen()),
  (Route<dynamic> route) => false, // Removes all previous routes
);
        

// In MaterialApp
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/details': (context) => DetailsScreen(),
  },
  // Dynamic route generation
  onGenerateRoute: (settings) {
    if (settings.name == '/product') {
      final args = settings.arguments as Map;
      return MaterialPageRoute(
        builder: (context) => ProductScreen(id: args['id']),
      );
    }
    return null;
  },
  // Fallback for unhandled routes
  onUnknownRoute: (settings) {
    return MaterialPageRoute(builder: (context) => NotFoundScreen());
  },
);
        

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => DetailsPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.ease;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      var offsetAnimation = animation.drive(tween);
      
      return SlideTransition(position: offsetAnimation, child: child);
    },
    transitionDuration: Duration(milliseconds: 300),
  ),
);
        

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        initialRoute: 'tab/home',
        onGenerateRoute: (settings) {
          // This navigator handles only routes within this tab
          if (settings.name == 'tab/home') {
            return MaterialPageRoute(builder: (_) => TabHomeContent());
          } else if (settings.name == 'tab/home/details') {
            return MaterialPageRoute(builder: (_) => TabDetailsContent());
          }
          return null;
        },
      ),
    );
  }
}
        

1. Static Route Map:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/details': (context) => DetailsScreen(),
    '/settings': (context) => SettingsScreen(),
  },
)
        

2. Dynamic Route Generation:

MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (settings) {
    // Parse route and arguments
    if (settings.name == '/product') {
      final args = settings.arguments as Map?;
      final productId = args?['id'] as int? ?? 0;
      
      return MaterialPageRoute(
        settings: settings, // Important to preserve route settings
        builder: (context) => ProductScreen(productId: productId),
      );
    }
    
    // Handle other routes or fallback
    return MaterialPageRoute(
      builder: (context) => HomeScreen(),
    );
  },
  onUnknownRoute: (settings) {
    return MaterialPageRoute(
      builder: (context) => NotFoundScreen(),
    );
  },
)
        

// Basic navigation
Navigator.push(context, route)             // Add route to top of stack
Navigator.pop(context, [result])           // Remove top route and optionally return data

// Named routes
Navigator.pushNamed(context, routeName, {arguments})
Navigator.popAndPushNamed(context, routeName, {arguments})

// Stack manipulation
Navigator.pushReplacement(context, route)  // Replace current route
Navigator.pushAndRemoveUntil(context, route, predicate)  // Push and remove routes until predicate is true
Navigator.popUntil(context, predicate)     // Pop routes until predicate is true

// Return to specific route
Navigator.pushNamedAndRemoveUntil(context, routeName, predicate)

// Special cases
Navigator.maybePop(context)                // Pop only if it's safe to do so
Navigator.canPop(context)                  // Check if popping is possible
        

1. Constructor Parameters (Statically Typed):

class ProductDetailScreen extends StatelessWidget {
  final int productId;
  final String title;
  final bool isEditable;
  
  const ProductDetailScreen({
    Key? key,
    required this.productId,
    required this.title,
    this.isEditable = false,
  }) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    // Use productId, title, isEditable here
    return Scaffold(/* ... */);
  }
}

// Navigation with constructor parameters
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => ProductDetailScreen(
      productId: 123,
      title: "Wireless Headphones",
      isEditable: true,
    ),
  ),
);
        

2. Route Arguments (Dynamic):

// Navigation with arguments
Navigator.pushNamed(
  context,
  '/product/detail',
  arguments: {
    'id': 123,
    'title': 'Wireless Headphones',
    'isEditable': true,
  },
);

// Destination screen
class ProductDetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    final productId = args['id'] as int;
    final title = args['title'] as String;
    final isEditable = args['isEditable'] as bool? ?? false;
    
    return Scaffold(/* Use extracted data */);
  }
}
        

3. Returning Results with Future API:

// First screen - await result from second screen
Future _selectProduct() async {
  final Product? selectedProduct = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => ProductSelectionScreen()),
  );
  
  if (selectedProduct != null) {
    setState(() {
      _product = selectedProduct;
    });
  }
}

// Second screen - return data when popping
class ProductSelectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) {
          final product = productList[index];
          return ListTile(
            title: Text(product.name),
            onTap: () {
              Navigator.pop(context, product); // Return selected product
            },
          );
        },
      ),
    );
  }
}
        

4. Creating Custom Route Transitions with Data:

class ProductRouteArguments {
  final int id;
  final String title;
  
  ProductRouteArguments(this.id, this.title);
}

class FadePageRoute extends PageRoute {
  final WidgetBuilder builder;
  final ProductRouteArguments args;
  
  FadePageRoute({
    required this.builder,
    required this.args,
  }) : super(
    settings: RouteSettings(
      name: '/product/${args.id}',
      arguments: args,
    ),
  );
  
  @override
  Widget buildPage(BuildContext context, Animation animation, Animation secondaryAnimation) {
    return builder(context);
  }
  
  @override
  Widget buildTransitions(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) {
    return FadeTransition(opacity: animation, child: child);
  }
  
  // Other required overrides...
  @override
  bool get opaque => true;
  
  @override
  bool get barrierDismissible => false;
  
  @override
  Color? get barrierColor => null;
  
  @override
  String? get barrierLabel => null;
  
  @override
  bool get maintainState => true;
  
  @override
  Duration get transitionDuration => Duration(milliseconds: 300);
}

// Usage
Navigator.push(
  context,
  FadePageRoute(
    args: ProductRouteArguments(123, "Headphones"),
    builder: (context) => ProductScreen(),
  ),
);
        

class NavigationLogger extends NavigatorObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    print('Pushed: ${route.settings.name} from ${previousRoute?.settings.name}');
  }
  
  @override
  void didPop(Route route, Route? previousRoute) {
    print('Popped: ${route.settings.name} to ${previousRoute?.settings.name}');
  }
  
  // Other methods: didRemove, didReplace, didStartUserGesture, etc.
}

// Registration
MaterialApp(
  navigatorObservers: [NavigationLogger()],
  // ...
)
        

Complete Form Implementation with Validation:

import 'package:flutter/material.dart';

class CompleteFormExample extends StatefulWidget {
  @override
  _CompleteFormExampleState createState() => _CompleteFormExampleState();
}

class _CompleteFormExampleState extends State<CompleteFormExample> {
  // Step 1: Create a GlobalKey for the form
  final _formKey = GlobalKey<FormState>();
  
  // Step 2: Create controllers to retrieve the values
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  
  // Step 3: Define form field state variables
  bool _autoValidate = false;
  String? _email;
  String? _password;
  
  // Step 4: Define validation methods
  String? _validateEmail(String? value) {
    final emailRegExp = RegExp(r'^[^@]+@[^@]+\.[^@]+$');
    if (value == null || value.isEmpty) {
      return 'Email is required';
    }
    if (!emailRegExp.hasMatch(value)) {
      return 'Enter a valid email address';
    }
    return null;
  }
  
  String? _validatePassword(String? value) {
    if (value == null || value.isEmpty) {
      return 'Password is required';
    }
    if (value.length < 8) {
      return 'Password must be at least 8 characters';
    }
    // Check for uppercase, lowercase, number and special character
    if (!RegExp(r'(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9])').hasMatch(value)) {
      return 'Password must include uppercase, lowercase, number and special character';
    }
    return null;
  }
  
  // Step 5: Form submission handler
  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // Save the current state of form fields
      _formKey.currentState!.save();
      
      // Now use the saved values (_email and _password)
      print('Email: $_email, Password: $_password');
      
      // Perform login, registration, etc.
      // For example: authService.login(_email, _password);
    } else {
      // Enable autoValidate to show errors as the user types
      setState(() {
        _autoValidate = true;
      });
    }
  }
  
  @override
  void dispose() {
    // Clean up controllers when the widget is disposed
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Form Validation Example')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          autovalidateMode: _autoValidate 
              ? AutovalidateMode.onUserInteraction 
              : AutovalidateMode.disabled,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(
                  labelText: 'Email',
                  hintText: 'Enter your email',
                  prefixIcon: Icon(Icons.email),
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.emailAddress,
                textInputAction: TextInputAction.next,
                validator: _validateEmail,
                onSaved: (value) => _email = value,
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _passwordController,
                decoration: InputDecoration(
                  labelText: 'Password',
                  hintText: 'Enter your password',
                  prefixIcon: Icon(Icons.lock),
                  border: OutlineInputBorder(),
                  // Add a suffix icon to toggle password visibility
                  suffixIcon: IconButton(
                    icon: Icon(
                      Icons.visibility,
                      color: Theme.of(context).primaryColorDark,
                    ),
                    onPressed: () {
                      // Toggle password visibility logic would go here
                    },
                  ),
                ),
                obscureText: true,
                textInputAction: TextInputAction.done,
                validator: _validatePassword,
                onSaved: (value) => _password = value,
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: _submitForm,
                child: Padding(
                  padding: EdgeInsets.symmetric(vertical: 16.0),
                  child: Text(
                    'Submit',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
        

Asynchronous Validation Example:

class AsyncFormFieldValidator extends StatefulWidget {
  @override
  _AsyncFormFieldValidatorState createState() => _AsyncFormFieldValidatorState();
}

class _AsyncFormFieldValidatorState extends State<AsyncFormFieldValidator> {
  final _controller = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  bool _isValidating = false;
  String? _cachedValue;
  String? _validationResult;

  // Simulate an API call to check username availability
  Future<String?> _checkUsernameAvailability(String username) async {
    // Simulate network delay
    await Future.delayed(Duration(seconds: 1));
    
    // Simulate checking against a database
    if (['admin', 'user', 'test'].contains(username)) {
      return 'Username is already taken';
    }
    return null;
  }

  Future<String?> _asyncValidator(String? value) async {
    // Basic validation first
    if (value == null || value.isEmpty) {
      return 'Username is required';
    }
    
    if (value.length < 3) {
      return 'Username must be at least 3 characters';
    }
    
    // If we're already validating for this value, return cached result
    if (_isValidating && _cachedValue == value) {
      return _validationResult;
    }
    
    // Start async validation
    setState(() {
      _isValidating = true;
      _cachedValue = value;
    });
    
    // Check availability
    final result = await _checkUsernameAvailability(value);
    
    setState(() {
      _validationResult = result;
      _isValidating = false;
    });
    
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: 'Username',
              suffixIcon: _isValidating 
                  ? Container(
                      width: 20,
                      height: 20,
                      padding: EdgeInsets.all(8),
                      child: CircularProgressIndicator(strokeWidth: 2),
                    )
                  : Icon(Icons.person),
            ),
            validator: (value) {
              // Run basic validation immediately
              if (value == null || value.isEmpty) {
                return 'Username is required';
              }
              
              if (value.length < 3) {
                return 'Username must be at least 3 characters';
              }
              
              // Return cached async result if available
              if (_cachedValue == value) {
                return _validationResult;
              }
              
              // Start async validation on the side but don't wait for it
              _asyncValidator(value).then((_) {
                // This forces the form to revalidate once we have a result
                if (mounted) {
                  _formKey.currentState?.validate();
                }
              });
              
              // Return null for now if we don't have an async result yet
              return _isValidating ? 'Checking availability...' : null;
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Form Submitted Successfully')),
                );
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}
        

Form Architecture Implementation:

class FormArchitectureExample extends StatefulWidget {
  @override
  _FormArchitectureExampleState createState() => _FormArchitectureExampleState();
}

class _FormArchitectureExampleState extends State<FormArchitectureExample> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  String? _name;
  String? _email;
  bool _formWasEdited = false;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  Future<bool> _onWillPop() async {
    if (!_formWasEdited) return true;
    
    // Show confirmation dialog if form has unsaved changes
    return (await showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Discard changes?'),
          content: Text('You have unsaved changes. Discard them?'),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.of(context).pop(false),
              child: Text('Cancel'),
            ),
            TextButton(
              onPressed: () => Navigator.of(context).pop(true),
              child: Text('Discard'),
            ),
          ],
        );
      },
    )) ?? false;
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onWillPop,
      child: Scaffold(
        appBar: AppBar(title: Text('Form Architecture Example')),
        body: Form(
          key: _formKey,
          onChanged: () {
            setState(() {
              _formWasEdited = true;
            });
          },
          onWillPop: _onWillPop,
          child: ListView(
            padding: EdgeInsets.all(16.0),
            children: [
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(
                  labelText: 'Name',
                  border: OutlineInputBorder(),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Name is required';
                  }
                  return null;
                },
                onSaved: (value) => _name = value,
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(
                  labelText: 'Email',
                  border: OutlineInputBorder(),
                ),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Email is required';
                  }
                  // RFC 5322 compliant email regex pattern
                  final emailPattern = RegExp(r'^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?)*$');
                  if (!emailPattern.hasMatch(value)) {
                    return 'Enter a valid email address';
                  }
                  return null;
                },
                onSaved: (value) => _email = value,
              ),
              SizedBox(height: 24),
              Row(
                children: [
                  Expanded(
                    child: ElevatedButton(
                      onPressed: () {
                        _formKey.currentState!.reset();
                        setState(() {
                          _formWasEdited = false;
                        });
                      },
                      child: Text('Reset'),
                    ),
                  ),
                  SizedBox(width: 16),
                  Expanded(
                    child: ElevatedButton(
                      onPressed: () {
                        if (_formKey.currentState!.validate()) {
                          _formKey.currentState!.save();
                          // Process form data
                          print('Name: $_name, Email: $_email');
                          setState(() {
                            _formWasEdited = false;
                          });
                        }
                      },
                      child: Text('Submit'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}
        

1. Provider Pattern

Based on InheritedWidget, Provider is a DI system and state management solution that offers:

• Composition-based approach using ChangeNotifier or ValueNotifier
• Memory efficiency through selective rebuilds via Consumer and Selector widgets
• O(1) lookup complexity for state access

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

// Usage
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(),
      child: MyApp(),
    ),
  );
}
        

2. Riverpod

An evolution of Provider that solves compile-time safety and provider dependency issues:

• Provider references are fully typed and checked at compile time
• Supports family modifiers for parameterized providers
• Providers can be overridden and tested in isolation
• Auto-disposal mechanism for improved memory management

final counterProvider = StateNotifierProvider((ref) {
  return CounterNotifier();
});

class CounterNotifier extends StateNotifier {
  CounterNotifier() : super(0);
  
  void increment() => state++;
}

// Usage with hooks
class CounterWidget extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('$count');
  }
}
        

3. BLoC Pattern / flutter_bloc

Leverages Reactive Programming with Streams and follows a unidirectional data flow:

• Enforces separation between UI, business logic, and data layers
• Event-driven architecture with events, states, and BLoC mediators
• Built-in support for state transitions and debugging
• RxDart integration for advanced stream operations

// Events
abstract class CounterEvent {}
class IncrementPressed extends CounterEvent {}

// BLoC
class CounterBloc extends Bloc {
  CounterBloc() : super(0) {
    on((event, emit) => emit(state + 1));
  }
}

// Usage
BlocProvider(
  create: (context) => CounterBloc(),
  child: BlocBuilder(
    builder: (context, count) => Text('$count'),
  ),
)
        

4. Redux / flutter_redux

Implements the Redux pattern with a single store, reducers, and middleware:

• Predictable state changes through pure reducers
• Time-travel debugging and state persistence
• Centralized state management with a single source of truth
• Middleware for side effects and async operations

5. GetX

A lightweight all-in-one solution that includes:

• Reactive state management with observable variables
• Dependency injection and service location
• Route management with minimal boilerplate
• Utilities for internationalization, validation, and more

6. MobX

Implements the Observer pattern with a focus on simplicity:

• Transparent reactivity through observables, actions, and reactions
• Code generation for boilerplate reduction
• Minimal learning curve for developers from React backgrounds

Provider

Provider is built on Flutter's InheritedWidget as a dependency injection system that simplifies widget tree state access.

• Core Mechanics: Uses InheritedWidget's element tree traversal with O(1) lookup performance
• State Propagation: Relies on ChangeNotifier for state change notification
• Widget Rebuilding: Widget rebuilds triggered through context.watch(), context.read(), or Consumer widgets

// The core Provider pattern
final counterProvider = ChangeNotifierProvider((ref) => CounterModel());

// Implementation
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();  // Triggers widget rebuilds
  }
}

// Three ways to consume
// 1. context.watch() - Rebuilds when value changes
final counter = context.watch();

// 2. Consumer - More granular rebuilds
Consumer(
  builder: (context, model, child) => Text('${model.count}'),
)

// 3. Selector - Even more targeted rebuilds
Selector(
  selector: (_, model) => model.count,
  builder: (_, count, __) => Text('$count'),
)
        

Riverpod

Riverpod evolved from Provider, addressing compile-time safety and global access limitations.

• Architecture: Provider reference system decoupled from widget tree
• Key Innovation: Global provider definitions with compile-time checking
• Provider Types: Rich ecosystem including StateProvider, StateNotifierProvider, FutureProvider, StreamProvider, etc.
• Scoping: Provider overrides at any level through ProviderScope

// Global provider definition with type safety
final counterProvider = StateNotifierProvider((ref) {
  // Dependency injection example
  final repository = ref.watch(repositoryProvider);
  return CounterNotifier(repository);
});

class CounterNotifier extends StateNotifier {
  final Repository repository;
  CounterNotifier(this.repository) : super(0);
  
  Future increment() async {
    // Side effects handled cleanly
    await repository.saveCount(state + 1);
    state = state + 1;  // Immutable state update
  }
}

// Consumption patterns
class CounterView extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Auto-dispose feature
    final counter = ref.watch(counterProvider);
    
    // Advanced pattern: combining providers
    final isEven = ref.watch(
      counterProvider.select((count) => count % 2 == 0)
    );
    
    return Text('Count: $counter (${isEven ? 'even' : 'odd'})');
  }
}
        

Advanced Features:

• Provider families for parameterized providers
• ref.listen() for side effects based on state changes
• Auto-disposal of providers when no longer needed
• Atomic state updates for consistent UI rendering

BLoC Pattern

BLoC implements a unidirectional data flow architecture using reactive streams.

• Core Principle: Clear separation of UI, business logic, and data layers
• Reactive Foundation: Built on Dart streams for asynchronous event processing
• Implementation: Events in → BLoC processing → States out
• Debugging: Transparent state transitions and developer tools

// Events - Commands to the BLoC
abstract class CounterEvent {}
class IncrementPressed extends CounterEvent {}
class DecrementPressed extends CounterEvent {}
class ResetPressed extends CounterEvent {
  final int resetValue;
  ResetPressed(this.resetValue);
}

// States - UI representation
abstract class CounterState {
  final int count;
  const CounterState(this.count);
}
class CounterInitial extends CounterState {
  const CounterInitial() : super(0);
}
class CounterUpdated extends CounterState {
  const CounterUpdated(int count) : super(count);
}
class CounterError extends CounterState {
  final String message;
  const CounterError(int count, this.message) : super(count);
}

// BLoC - Business Logic Component
class CounterBloc extends Bloc {
  final CounterRepository repository;
  
  CounterBloc({required this.repository}) : super(const CounterInitial()) {
    on(_handleIncrement);
    on(_handleDecrement);
    on(_handleReset);
  }
  
  Future _handleIncrement(
    IncrementPressed event, 
    Emitter emit
  ) async {
    try {
      final newCount = state.count + 1;
      await repository.saveCount(newCount);
      emit(CounterUpdated(newCount));
    } catch (e) {
      emit(CounterError(state.count, e.toString()));
    }
  }
  
  // Other event handlers...
}

// Consumption in UI
BlocBuilder(
  buildWhen: (previous, current) => previous.count != current.count,
  builder: (context, state) {
    return Column(
      children: [
        Text('Count: ${state.count}'),
        if (state is CounterError)
          Text('Error: ${state.message}', style: TextStyle(color: Colors.red)),
      ],
    );
  },
)
        

Choose Provider when:

• Building small to medium applications
• Rapid prototyping is required
• Team has limited Flutter experience
• Simple state sharing between widgets is the primary need

Choose Riverpod when:

• Provider's runtime errors are causing issues
• Global state access is needed without context
• Complex state dependencies exist between different parts of the app
• You need robust testing with provider overrides
• Caching, deduplication of requests, and optimized rebuilds are important

Choose BLoC when:

• Building enterprise-scale applications
• Clear separation of UI and business logic is a priority
• Complex event processing with side effects is required
• Team is familiar with reactive programming concepts
• Rigorous event tracking and logging is needed
• Application state transitions need to be highly predictable

import 'package:http/http.dart' as http;
import 'dart:convert';

class ApiService {
  final String baseUrl = 'https://api.example.com';
  
  Future<Map<String, dynamic>> fetchData() async {
    try {
      final response = await http.get(
        Uri.parse('$baseUrl/data'),
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer $token',
        },
      ).timeout(const Duration(seconds: 10));
      
      return _processResponse(response);
    } on SocketException {
      throw NetworkException('No internet connection');
    } on TimeoutException {
      throw NetworkException('Request timeout');
    } catch (e) {
      throw NetworkException('Failed to fetch data: $e');
    }
  }
  
  Map<String, dynamic> _processResponse(http.Response response) {
    switch (response.statusCode) {
      case 200:
        return jsonDecode(response.body);
      case 400:
        throw BadRequestException('${response.reasonPhrase}: ${response.body}');
      case 401:
      case 403:
        throw UnauthorizedException('${response.reasonPhrase}: ${response.body}');
      case 404:
        throw NotFoundException('Resource not found: ${response.body}');
      case 500:
      default:
        throw ServerException('Server error: ${response.statusCode} ${response.reasonPhrase}');
    }
  }
}
        

import 'package:dio/dio.dart';

class ApiClient {
  late Dio _dio;
  
  ApiClient() {
    _dio = Dio(BaseOptions(
      baseUrl: 'https://api.example.com',
      connectTimeout: const Duration(milliseconds: 5000),
      receiveTimeout: const Duration(milliseconds: 3000),
      responseType: ResponseType.json,
      contentType: 'application/json',
      headers: {
        'Accept': 'application/json',
      },
    ));
    
    // Setup interceptors
    _dio.interceptors.add(LogInterceptor(
      requestBody: true,
      responseBody: true,
      error: true,
    ));
    
    _dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) {
        // Add auth token if available
        final token = getToken();
        if (token != null) {
          options.headers['Authorization'] = 'Bearer $token';
        }
        return handler.next(options);
      },
      onResponse: (response, handler) {
        // Global response handling
        return handler.next(response);
      },
      onError: (DioException error, handler) {
        // Global error handling
        if (error.response?.statusCode == 401) {
          // Refresh token or logout
        }
        return handler.next(error);
      },
    ));
    
    // Add retry interceptor for transient failures
    _dio.interceptors.add(RetryInterceptor(
      dio: _dio,
      logPrint: print,
      retries: 3,
      retryDelays: const [
        Duration(seconds: 1),
        Duration(seconds: 2),
        Duration(seconds: 3),
      ],
    ));
  }
  
  Future<T> get<T>(
    String path, {
    Map<String, dynamic>? queryParameters,
    Options? options,
    CancelToken? cancelToken,
  }) async {
    try {
      final response = await _dio.get<T>(
        path,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
      );
      return response.data as T;
    } on DioException catch (e) {
      return _handleDioError(e);
    }
  }
  
  Future<T> post<T>(
    String path, {
    dynamic data,
    Map<String, dynamic>? queryParameters,
    Options? options,
    CancelToken? cancelToken,
  }) async {
    try {
      final response = await _dio.post<T>(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
      );
      return response.data as T;
    } on DioException catch (e) {
      return _handleDioError(e);
    }
  }
  
  T _handleDioError<T>(DioException e) {
    switch (e.type) {
      case DioExceptionType.connectionTimeout:
      case DioExceptionType.sendTimeout:
      case DioExceptionType.receiveTimeout:
        throw TimeoutException('Connection timeout');
        
      case DioExceptionType.badResponse:
        final statusCode = e.response?.statusCode;
        final data = e.response?.data;
        
        if (statusCode == 400) throw BadRequestException(data);
        if (statusCode == 401) throw UnauthorizedException(data);
        if (statusCode == 403) throw ForbiddenException(data);
        if (statusCode == 404) throw NotFoundException(data);
        if (statusCode == 409) throw ConflictException(data);
        if (statusCode == 422) throw ValidationException(data);
        if (statusCode! >= 500) throw ServerException(data);
        throw ApiException('Unexpected error: $statusCode', data);
        
      case DioExceptionType.cancel:
        throw RequestCancelledException();
        
      case DioExceptionType.connectionError:
        throw NetworkException('No internet connection');
        
      default:
        throw ApiException('Unexpected error: ${e.message}', e.response?.data);
    }
  }
}
        

Response Models with Freezed:

// Using freezed for immutable models
@freezed
class ApiResponse<T> with _$ApiResponse<T> {
  const factory ApiResponse.success({
    required T data,
    String? message,
  }) = ApiSuccess<T>;

  const factory ApiResponse.error({
    required String message,
    String? code,
    dynamic details,
  }) = ApiError<T>;
  
  static ApiResponse<T> fromJson<T>(
    Map<String, dynamic> json,
    T Function(Map<String, dynamic> json) fromJsonT,
  ) {
    if (json.containsKey('error')) {
      return ApiResponse.error(
        message: json['error']['message'] ?? 'Unknown error',
        code: json['error']['code'],
        details: json['error']['details'],
      );
    }
    return ApiResponse.success(
      data: fromJsonT(json['data']),
      message: json['message'],
    );
  }
}

// Repository implementation
class UserRepository {
  final ApiClient _apiClient;
  
  Future<ApiResponse<User>> getUser(int id) async {
    try {
      final response = await _apiClient.get<Map<String, dynamic>>('/users/$id');
      return ApiResponse.fromJson(
        response,
        (json) => User.fromJson(json),
      );
    } on NetworkException catch (e) {
      return ApiResponse.error(message: e.message);
    } on ServerException catch (e) {
      return ApiResponse.error(message: 'Server error: ${e.message}');
    } catch (e) {
      return ApiResponse.error(message: 'Unexpected error: $e');
    }
  }
}
        

Performance Benchmarking Example:

Future<void> benchmarkStorage() async {
  final Stopwatch stopwatch = Stopwatch()..start();
  
  // Hive operation
  final hiveBox = await Hive.openBox('benchmarkBox');
  stopwatch.reset();
  await hiveBox.put('testKey', 'testValue');
  final hiveWriteTime = stopwatch.elapsedMicroseconds;
  
  // SQLite operation
  final db = await openDatabase(path, version: 1);
  stopwatch.reset();
  await db.insert('table', {'key': 'testKey', 'value': 'testValue'});
  final sqliteWriteTime = stopwatch.elapsedMicroseconds;
  
  print('Write time - Hive: ${hiveWriteTime}μs, SQLite: ${sqliteWriteTime}μs');
}

Operation: Insert 10,000 records
- SQLite: ~1,200ms
- Hive: ~250ms
- ObjectBox: ~120ms
- Isar: ~110ms

Operation: Read 10,000 records by ID
- SQLite: ~800ms
- Hive: ~150ms
- ObjectBox: ~70ms
- Isar: ~65ms

Operation: Query with filter (in-memory)
- SQLite: ~50ms (with index)
- Hive: ~120ms (no index)
- ObjectBox: ~30ms (with index)
- Isar: ~25ms (with index)

Memory Footprint (idle)
- SQLite: ~2MB
- Hive: ~1.5MB
- ObjectBox: ~3MB
- Isar: ~2MB

Repository Pattern Implementation:

abstract class UserRepository {
  Future<User?> getUserById(String id);
  Future<List<User>> getAllUsers();
  Future<void> saveUser(User user);
  Future<void> deleteUser(String id);
}

// SQLite implementation
class SQLiteUserRepository implements UserRepository {
  final Database _db;
  
  SQLiteUserRepository(this._db);
  
  @override
  Future<User?> getUserById(String id) async {
    final maps = await _db.query(
      'users',
      where: 'id = ?',
      whereArgs: [id],
    );
    
    if (maps.isEmpty) return null;
    return User.fromMap(maps.first);
  }
  
  // Other methods implemented...
}

// Hive implementation
class HiveUserRepository implements UserRepository {
  final Box<User> _box;
  
  HiveUserRepository(this._box);
  
  @override
  Future<User?> getUserById(String id) async {
    return _box.get(id);
  }
  
  // Other methods implemented...
}