Flutter Skill

This skill provides universal guidelines for Flutter framework app development including UI/UX design, state management, networking, and API integration. It provides essential instructions that must be followed, not optional information.

Table of Contents

• •Workflow
• •Core Principles
• •Reference Documents

Workflow

Follow this workflow based on developer requests:

1. •

   Design/UI/UX requests: See Comic Design

   • •Keywords: design, UI, UX, buttons, cards, layout, animation, Comic
2. •

   Layout requests: See Flutter Layout

   • •Keywords: layout, scroll, CustomScrollView, ListView, widget placement
3. •

   State management requests: See Provider

   • •Keywords: state management, Provider, Selector, ChangeNotifier
4. •

   Routing requests: See Go Route

   • •Keywords: routing, navigation, GoRouter, page navigation
5. •

   Internationalization requests: See i18n

   • •Keywords: i18n, translation, localization, arb

Core Principles

Mandatory Rules

// ❌ NEVER DO THIS
color: Colors.blue              // Hardcoded color
fontSize: 16                    // Hardcoded size
Text('Hello')                   // Hardcoded text
elevation: 4                    // Non-zero elevation

// ✅ ALWAYS DO THIS
color: Theme.of(context).colorScheme.primary  // Theme color
style: Theme.of(context).textTheme.bodyLarge  // Theme text style
Text(T.hello)                                  // i18n translation
elevation: 0                                   // Flat design

Theme-based Styling

All colors, fonts, and styles must use Theme.of(context):

Comic Design Summary

Reference Documents

Required pub.dev Packages

file_cache_flutter

File cache library for Flutter applications with memory + file dual caching and TTL-based auto-expiration.

• •pub.dev: file_cache_flutter

Quick Reference

Imports

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:provider/provider.dart';
import 'package:go_router/go_router.dart';

Animation (using flutter_animate)

Container()
  .animate()
  .fadeIn(duration: 300.ms)
  .slideX(begin: -0.2, end: 0)

Icon Priority

When using Font Awesome Pro icons, priority: Light > Regular > Solid

FaIcon(FontAwesomeIcons.lightCamera)  // Light first