Flutter UI/UX Development

Create beautiful, responsive, and animated Flutter applications with modern design patterns and best practices.

Core Philosophy

"Mobile-first, animation-enhanced, accessible design" - Focus on:

Priority

Area

Purpose

1

Widget Composition

Reusable, maintainable UI components

2

Responsive Design

Adaptive layouts for all screen sizes

3

Animations

Smooth, purposeful transitions and micro-interactions

4

Custom Themes

Consistent, branded visual identity

5

Performance

60fps rendering and optimal resource usage

Development Workflow

Execute phases sequentially. Complete each before proceeding.

Phase 1: Analyze Requirements

• Understand app structure - Identify existing widgets, screens, and navigation

• Design system review - Check existing themes, colors, and typography

• Platform considerations - Note iOS/Android specific requirements

• Performance constraints - Identify animation complexity and rendering needs

Output: UI requirements analysis with component breakdown.

Phase 2: Design Widget Architecture

• Widget hierarchy planning - Design composition tree

• State management strategy - Choose StatefulWidget vs StatelessWidget

• Custom widget identification - Plan reusable components

• Theme integration - Define color schemes and typography

Output: Widget architecture diagram and component specifications.

Phase 3: Implement Core UI

• Create base widgets - Build foundational components

• Implement responsive layouts - Use MediaQuery, LayoutBuilder, Flex/Expanded

• Add custom themes - ThemeData, ColorScheme, TextThemes

• Integrate navigation - Implement routing and transitions

Widget Composition Patterns:

// ✅ DO: Compose small, reusable widgets

class CustomCard extends StatelessWidget {

  final Widget child;

  final EdgeInsets padding;

  const CustomCard({required this.child, this.padding = EdgeInsets.all(16)});

  @override

  Widget build(BuildContext context) {

    return Card(

      elevation: 4,

      child: Padding(padding: padding, child: child),

    );

  }

}

// ✅ DO: Use const constructors where possible

const Icon(Icons.add) // Better than Icon(Icons.add)

Phase 4: Add Animations

• Implicit animations - AnimatedContainer, AnimatedOpacity

• Explicit animations - AnimationController with Tween

• Hero animations - Screen transitions with Hero widgets

• Micro-interactions - Button presses, hover effects, loading states

Animation Performance Rules:

// ✅ DO: Use performance-optimized animations

AnimatedBuilder(

  animation: controller,

  builder: (context, child) => Transform.rotate(

    angle: controller.value * 2 * math.pi,

    child: child, // Pass child to avoid rebuilding

  ),

  child: const Icon(Icons.refresh),

)

// ❌ DON'T: Animate expensive operations

// Avoid animating complex layouts or heavy widgets

Phase 5: Optimize and Test

• Performance profiling - Use Flutter DevTools

• Accessibility testing - Screen readers, contrast ratios

• Responsive testing - Multiple screen sizes and orientations

• Animation smoothness - 60fps validation

Quick Reference

Responsive Design Patterns

Technique

Use Case

Implementation

LayoutBuilder

Responsive layouts

LayoutBuilder(builder: (context, constraints) => ...)

MediaQuery

Screen info

MediaQuery.of(context).size.width

Flexible/Expanded

Flex layouts

Flexible(child: ...) or Expanded(child: ...)

AspectRatio

Fixed ratios

AspectRatio(aspectRatio: 16/9, child: ...)

Animation Types

Type

Widget

Duration

Use Case

Fade

AnimatedOpacity

200-300ms

Show/hide content

Slide

SlideTransition

250-350ms

Screen transitions

Scale

AnimatedScale

150-250ms

Button presses

Rotation

RotationTransition

1000-2000ms

Loading indicators

Custom Widget Examples

Themed Button:

class ThemedButton extends StatelessWidget {

  final String text;

  final VoidCallback onPressed;

  const ThemedButton({required this.text, required this.onPressed});

  @override

  Widget build(BuildContext context) {

    return ElevatedButton(

      onPressed: onPressed,

      style: ElevatedButton.styleFrom(

        backgroundColor: Theme.of(context).colorScheme.primary,

        foregroundColor: Theme.of(context).colorScheme.onPrimary,

        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),

        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),

      ),

      child: Text(text),

    );

  }

}

Responsive Card:

class ResponsiveCard extends StatelessWidget {

  final Widget child;

  const ResponsiveCard({required this.child});

  @override

  Widget build(BuildContext context) {

    return LayoutBuilder(

      builder: (context, constraints) {

        if (constraints.maxWidth > 600) {

          return _buildWideLayout(child);

        } else {

          return _buildNarrowLayout(child);

        }

      },

    );

  }

  Widget _buildWideLayout(Widget child) {

    return Card(

      margin: const EdgeInsets.all(16),

      child: Padding(padding: const EdgeInsets.all(24), child: child),

    );

  }

  Widget _buildNarrowLayout(Widget child) {

    return Card(

      margin: const EdgeInsets.all(8),

      child: Padding(padding: const EdgeInsets.all(16), child: child),

    );

  }

}

Resources

• Widget patterns: See references/widget-patterns.md

• Animation examples: See references/animation-patterns.md

• Theme templates: See references/theme-templates.md

• Performance guide: See references/performance-optimization.md

Technical Stack

• Core Widgets: StatelessWidget, StatefulWidget, InheritedWidget

• Layout: Row, Column, Stack, GridView, ListView

• Animation: AnimationController, Tween, AnimatedWidget

• Themes: ThemeData, ColorScheme, TextTheme

• Navigation: Navigator, MaterialPageRoute, Hero

Accessibility (Required)

Always implement:

// Semantic labels for screen readers

Semantics(

  label: 'Add item to cart',

  button: true,

  child: IconButton(icon: Icon(Icons.add_cart), onPressed: () {}),

)

// High contrast support

Theme.of(context).colorScheme.contrast() == Brightness.dark

// Font scaling

MediaQuery.of(context).accessibleNavigation

Performance Guidelines

• Use const widgets where possible

• Prefer ListView.builder for long lists

• Avoid unnecessary rebuilds with const keys

• Use RepaintBoundary for complex animations

• Profile with Flutter DevTools regularly

This Flutter UI/UX skill transforms mobile app development into a systematic process that ensures beautiful, responsive, and performant applications with exceptional user experiences.