Create a new Flutter project Skill

When to use this skill

Use this skill whenever the user wants to:

Build cross-platform mobile, web, or desktop applications with Flutter
Create and compose Flutter widgets (StatelessWidget, StatefulWidget)
Implement state management (setState, Provider, Riverpod, Bloc)
Set up navigation and routing in Flutter apps
Configure themes, assets, and platform-specific settings
Use platform channels for native interop
Optimize Flutter app performance (const widgets, keys, build methods)
Debug and hot-reload Flutter applications

How to use this skill

Workflow

Identify the request area (widget creation, state management, navigation, platform integration, etc.)
Apply Flutter/Dart best practices following official guidelines
Generate Dart code using Flutter widget conventions
Verify the widget tree is correct and state management is properly scoped

1. Project Setup

# Create a new Flutter project
flutter create my_app --org com.example --platforms android,ios

# Run the app with hot reload
flutter run

2. StatelessWidget Example

import 'package:flutter/material.dart';

class UserCard extends StatelessWidget {
  final String name;
  final String email;

  const UserCard({super.key, required this.name, required this.email});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: const Icon(Icons.person),
        title: Text(name),
        subtitle: Text(email),
      ),
    );
  }
}

3. StatefulWidget with State Management

import 'package:flutter/material.dart';

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

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() => _count++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(child: Text('Count: $_count', style: Theme.of(context).textTheme.headlineMedium)),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

4. Navigation

// Named routes
MaterialApp(
  routes: {
    '/': (context) => const HomePage(),
    '/details': (context) => const DetailsPage(),
  },
);

// Programmatic navigation
Navigator.pushNamed(context, '/details');

Best Practices

Use const constructors wherever possible to optimize rebuilds
Split large widgets into smaller, reusable components
Use Key on list items for correct reconciliation
Choose a consistent state management approach (Provider/Riverpod for most apps)
Test on both Android and iOS; handle platform differences explicitly
Follow the Flutter performance best practices (avoid expensive builds in build())

Resources

Official documentation: https://docs.flutter.dev/
Widget catalog: https://docs.flutter.dev/ui/widgets
Pub.dev packages: https://pub.dev/

Keywords

flutter, Dart, cross-platform, Widget, StatelessWidget, StatefulWidget, Provider, Riverpod, navigation, hot reload, mobile development, Material Design, Cupertino

Agent Skills: Create a new Flutter project

Install this agent skill to your local

Skill Files