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

```dart
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

flutter

Flutter

When to Use

Quick Start

More from g1joshi/agent-skills

template

mariadb

claude

javascript

typescript

python