Flutter

Cross-platform UI framework for mobile, web, and desktop.

When to Use

• Cross-platform mobile apps
• Single codebase for iOS/Android
• Custom UI with animations
• Rapid prototyping

Quick Start

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('My App')),
        body: const Center(child: Text('Hello Flutter!')),
      ),
    );
  }
}

Core Concepts

Widgets & State

class Counter extends StatefulWidget {
  const Counter({super.key});

  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Riverpod State Management

import 'package:flutter_riverpod/flutter_riverpod.dart';

final counterProvider = StateNotifierProvider<CounterNotifier, int>(
  (ref) => CounterNotifier(),
);

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
}

// Usage
class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return Text('Count: $count');
  }
}

Common Patterns

Navigation with GoRouter

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'user/:id',
          builder: (context, state) => UserScreen(
            id: state.pathParameters['id']!,
          ),
        ),
      ],
    ),
  ],
);

// Navigate
context.go('/user/123');
context.push('/user/123');

Async Data

final userProvider = FutureProvider.autoDispose.family<User, String>(
  (ref, userId) async {
    return ref.read(apiProvider).fetchUser(userId);
  },
);

// In widget
ref.watch(userProvider(userId)).when(
  data: (user) => UserCard(user: user),
  loading: () => const CircularProgressIndicator(),
  error: (error, stack) => Text('Error: $error'),
);

Best Practices

Do:

• Use const constructors
• Prefer StatelessWidget
• Use Riverpod for state
• Follow widget composition

Don’t:

• Put logic in build methods
• Use setState for global state
• Create deep widget trees
• Ignore key parameters

Troubleshooting

References

• Flutter Documentation
• Riverpod Documentation