### Minimal Sketchy Flutter App Setup

Source: https://github.com/csells/sketchy_design_lang/blob/main/README.md

This example demonstrates how to set up a minimal Flutter application using the Sketchy design language. It initializes SketchyApp with a theme, theme mode, and a basic scaffold containing a button. The app uses Sketchy's theming system, typography, and primitives.

```dart
import 'package:flutter/widgets.dart' hide Text;
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return SketchyApp(
      title: 'Sketchy Demo',
      theme: SketchyThemeData.fromTheme(
        SketchyThemes.blue,
        roughness: 0.7,
      ),
      themeMode: SketchyThemeMode.system,
      home: SketchyScaffold(
        appBar: SketchyAppBar(title: SketchyText('Wireframe Vibes')),
        body: Center(child: SketchyOutlinedButton(onPressed: () {}, child: SketchyText('Do the thing'))),
      ),
    );
  }
}

```

--------------------------------

### Dart Usage Example with GoRouter

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/sketchy_app_spec.md

Demonstrates how to use the SketchyApp.router constructor with go_router for declarative routing in a Flutter application. This example highlights type-safe route parameters and integration with Navigator 2.0.

```dart
// With go_router
final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) => DetailsPage(
        id: state.pathParameters['id']!,
      ),
    ),
  ],
);

// Use the new constructor
SketchyApp.router(
  title: 'My App',
  theme: SketchyThemeData.fromTheme(SketchyThemes.blue),
  darkTheme: SketchyThemeData.fromTheme(SketchyThemes.indigo),
  themeMode: SketchyThemeMode.system,
  routerConfig: router,
)
```

--------------------------------

### Sketchy Slider Example

Source: https://github.com/csells/sketchy_design_lang/blob/main/README.md

Shows how to implement a SketchySlider for selecting a value within a range. The example demonstrates setting the minimum and maximum values and handling the onChanged callback to update the state.

```dart
SketchySlider(
  value: roughness,
  onChanged: (value) => setState(() => roughness = value),
  min: 0,
  max: 1,
);
```

--------------------------------

### Dart Theme Configuration Example for Sketchy Widgets

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Demonstrates how to create and apply a custom theme using `SketchyThemeData` in a Flutter application. It allows dynamic adjustment of roughness, stroke width, border radius, text casing, and selection of predefined themes. The example uses `SketchyApp`, `SketchyScaffold`, `SketchyAppBar`, `SketchyText`, `SketchySlider`, `SketchyDropdownButton`, `SketchyTheme.consumer`, and `SketchyCard` widgets to showcase theme customization and preview.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  State<ThemeExampleApp> createState() => _ThemeExampleAppState();
}

class _ThemeExampleAppState extends State<ThemeExampleApp> {
  double _roughness = 0.5;
  SketchyThemes _selectedTheme = SketchyThemes.blue;

  @override
  Widget build(BuildContext context) {
    return SketchyApp(
      title: 'Theme Demo',
      theme: SketchyThemeData.fromTheme(
        _selectedTheme,
        roughness: _roughness,
        strokeWidth: 2.0,
        borderRadius: 8.0,
        textCase: TextCase.none,
      ),
      home: SketchyScaffold(
        appBar: SketchyAppBar(title: const SketchyText('Theme Customization')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SketchyText('Roughness'),
              SketchySlider(
                value: _roughness,
                onChanged: (value) => setState(() => _roughness = value),
                min: 0.0,
                max: 1.0,
              ),
              const SizedBox(height: 20),
              const SketchyText('Theme'),
              SketchyDropdownButton<SketchyThemes>(
                value: _selectedTheme,
                items: SketchyThemes.values,
                itemBuilder: (theme) => SketchyText(theme.name),
                onChanged: (theme) => setState(() => _selectedTheme = theme!),
              ),
              const SizedBox(height: 40),
              SketchyTheme.consumer(
                builder: (context, theme) => SketchyCard(
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SketchyText(
                          'Theme Preview',
                          style: theme.typography.title,
                        ),
                        const SizedBox(height: 8),
                        SketchyText(
                          'Ink: ${theme.inkColor}',
                          style: TextStyle(color: theme.inkColor),
                        ),
                        SketchyText(
                          'Primary: ${theme.primaryColor}',
                          style: TextStyle(color: theme.primaryColor),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Sketchy Button and CheckboxListTile Examples

Source: https://github.com/csells/sketchy_design_lang/blob/main/README.md

Demonstrates the usage of SketchyOutlinedButton, SketchyCheckboxListTile, and SketchyText widgets. SketchyCheckboxListTile synchronizes the control and its label, making the entire row tappable. These examples highlight basic button actions and list item selection.

```dart
SketchyOutlinedButton(
  onPressed: saveNote,
  child: SketchyText('Save', style: SketchyTheme.of(context).typography.label),
);

SketchyCheckboxListTile(
  value: wantsEmails,
  onChanged: (checked) =>
      setState(() => wantsEmails = checked ?? wantsEmails),
  title: SketchyText('Email me weekly',
      style: SketchyTheme.of(context).typography.body),
  subtitle: const SketchyText('Includes product updates + comics.'),
);
```

--------------------------------

### SketchyButton Widget Example - Dart

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Demonstrates the usage of SketchyButton, SketchyOutlinedButton, SketchyCheckbox, and SketchyIconButton widgets from the sketchy_design_lang package. This example showcases how to manage button states (enabled/disabled) and interactive elements like counters and checkboxes within a Flutter application.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  State<ButtonExampleWidget> createState() => _ButtonExampleWidgetState();
}

class _ButtonExampleWidgetState extends State<ButtonExampleWidget> {
  int _counter = 0;
  bool _enabled = true;

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Button Examples')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SketchyText('Count: $_counter'),
            const SizedBox(height: 20),
            SketchyButton(
              onPressed: _enabled ? () => setState(() => _counter++) : null,
              tooltip: 'Increment counter',
              child: const SketchyText('Increment'),
            ),
            const SizedBox(height: 16),
            SketchyOutlinedButton(
              onPressed: _enabled ? () => setState(() => _counter = 0) : null,
              child: const SketchyText('Reset'),
            ),
            const SizedBox(height: 16),
            SketchyCheckbox(
              value: _enabled,
              onChanged: (value) => setState(() => _enabled = value ?? true),
            ),
            const SizedBox(width: 8),
            const SketchyText('Buttons Enabled'),
            const SizedBox(height: 20),
            SketchyIconButton(
              onPressed: _enabled ? () => setState(() => _counter--) : null,
              tooltip: 'Decrement',
              icon: const SketchySymbol(symbol: SketchySymbols.minus),
            ),
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Flutter SketchyTextField Example

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Demonstrates the usage of SketchyTextField in a Flutter application. This example showcases how to integrate multiple text fields for name, email, password, and bio, along with a submit button and displaying submitted text within a SketchyCard. It utilizes standard Flutter TextEditingController for managing text input and StatefulWidget for state management.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  State<TextFieldExampleWidget> createState() => _TextFieldExampleWidgetState();
}

class _TextFieldExampleWidgetState extends State<TextFieldExampleWidget> {
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _bioController = TextEditingController();
  String _submittedText = '';

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _passwordController.dispose();
    _bioController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Form Example')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SketchyTextField(
              controller: _nameController,
              decoration: const InputDecoration(
                labelText: 'Name',
                hintText: 'Enter your name',
              ),
              textInputAction: TextInputAction.next,
            ),
            const SizedBox(height: 16),
            SketchyTextField(
              controller: _emailController,
              decoration: const InputDecoration(
                labelText: 'Email',
                hintText: 'user@example.com',
              ),
              keyboardType: TextInputType.emailAddress,
              textInputAction: TextInputAction.next,
            ),
            const SizedBox(height: 16),
            SketchyTextField(
              controller: _passwordController,
              decoration: const InputDecoration(
                labelText: 'Password',
                hintText: 'Enter password',
              ),
              obscureText: true,
              textInputAction: TextInputAction.next,
            ),
            const SizedBox(height: 16),
            SketchyTextField(
              controller: _bioController,
              decoration: const InputDecoration(
                labelText: 'Bio',
                hintText: 'Tell us about yourself',
              ),
              maxLines: 4,
              textInputAction: TextInputAction.done,
            ),
            const SizedBox(height: 24),
            SketchyOutlinedButton(
              onPressed: () {
                setState(() {
                  _submittedText = 'Name: ${_nameController.text}\n'
                      'Email: ${_emailController.text}\n'
                      'Bio: ${_bioController.text}';
                });
              },
              child: const SketchyText('Submit'),
            ),
            if (_submittedText.isNotEmpty) ...[
              const SizedBox(height: 24),
              SketchyCard(
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: SketchyText(_submittedText),
                ),
              ),
            ],
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Flutter Sketchy Progress Indicator Example

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Demonstrates the implementation of various SketchyProgressIndicators including linear and circular types, in both determinate and indeterminate modes. This example utilizes Flutter's animation controller for indeterminate states and state management for determinate progress updates. Dependencies include 'flutter/widgets.dart' and 'sketchy_design_lang/sketchy_design_lang.dart'.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  State<ProgressExampleWidget> createState() => _ProgressExampleWidgetState();
}

class _ProgressExampleWidgetState extends State<ProgressExampleWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  double _progress = 0.0;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    )..repeat();
    _startProgressSimulation();
  }

  void _startProgressSimulation() {
    Future.delayed(const Duration(milliseconds: 100), () {
      if (mounted && _progress < 1.0) {
        setState(() => _progress += 0.01);
        _startProgressSimulation();
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Progress Indicators')),
      body: SketchyTheme.consumer(
        builder: (context, theme) => Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SketchyText('Linear - Determinate'),
              const SizedBox(height: 8),
              SketchyLinearProgressIndicator(
                value: _progress,
                color: theme.primaryColor,
                backgroundColor: theme.secondaryColor,
                minHeight: 20,
              ),
              SketchyText('Progress: ${(_progress * 100).toStringAsFixed(0)}%'),
              const SizedBox(height: 32),
              const SketchyText('Linear - Indeterminate'),
              const SizedBox(height: 8),
              SketchyLinearProgressIndicator(
                controller: _controller,
                color: theme.primaryColor,
                minHeight: 16,
              ),
              const SizedBox(height: 32),
              const SketchyText('Circular - Determinate'),
              const SizedBox(height: 8),
              SketchyCircularProgressIndicator(
                value: _progress,
                size: 64,
                strokeWidth: 6.0,
                color: theme.primaryColor,
              ),
              const SizedBox(height: 32),
              const SketchyText('Circular - Indeterminate'),
              const SizedBox(height: 8),
              SketchyCircularProgressIndicator(
                size: 48,
                strokeWidth: 4.0,
                color: theme.secondaryColor,
              ),
              const SizedBox(height: 32),
              SketchyOutlinedButton(
                onPressed: () => setState(() => _progress = 0.0),
                child: const SketchyText('Reset'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Basic Indeterminate Sketchy Circular Progress Indicator (Dart)

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/sketchy_circular_progress_indicator_spec.md

A basic example demonstrating how to use the SketchyCircularProgressIndicator without specifying a value, resulting in an indeterminate progress animation.

```dart
const SketchyCircularProgressIndicator()
```

--------------------------------

### Sketchy Dialog Example

Source: https://github.com/csells/sketchy_design_lang/blob/main/README.md

Presents a basic implementation of a SketchyDialog. The dialog contains a title, text, and an action button, demonstrating how to structure content within a modal dialog. It uses `Column` for layout and `Align` for button placement.

```dart
SketchyDialog(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: [
      SketchyText('Plan review', style: SketchyTheme.of(context).typography.title),
      const SizedBox(height: 16),
      const SketchyText('Update palette + capture perf traces.'),
      Align(
        alignment: Alignment.centerRight,
        child: SketchyOutlinedButton(
          onPressed: Navigator.of(context).pop,
          child: const SketchyText('Close'),
        ),
      ),
    ],
  ),
);
```

--------------------------------

### Sketchy Linear Progress Indicator Examples

Source: https://github.com/csells/sketchy_design_lang/blob/main/README.md

Provides examples for SketchyLinearProgressIndicator in both determinate and indeterminate modes. The determinate mode uses a `value` property, while the indeterminate mode utilizes a `controller` for animation. It also shows customization of `color`, `backgroundColor`, and `minHeight`.

```dart
// Linear progress indicator (determinate mode)
SketchyLinearProgressIndicator(
  value: 0.65,
  color: Colors.blue,
  backgroundColor: Colors.grey.shade200,
  minHeight: 20,
);

// Linear progress indicator (indeterminate mode)
SketchyLinearProgressIndicator(
  controller: animationController,
  color: theme.primaryColor,
);
```

--------------------------------

### SketchySurface Widget Examples in Dart

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Demonstrates how to use SketchySurface to render custom primitive shapes like rectangles and circles. It manages theme integration and primitive caching. This widget requires the 'sketchy_design_lang' package.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Surface Examples')),
      body: SketchyTheme.consumer(
        builder: (context, theme) => Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              SketchySurface(
                width: 200,
                height: 100,
                padding: const EdgeInsets.all(16),
                strokeColor: theme.inkColor,
                fillColor: theme.primaryColor,
                strokeWidth: theme.strokeWidth,
                alignment: Alignment.center,
                createPrimitive: () => SketchyPrimitive.rectangle(
                  fill: SketchyFill.solid,
                ),
                child: const SketchyText('Solid Rectangle'),
              ),
              const SizedBox(height: 20),
              SketchySurface(
                width: 150,
                height: 150,
                padding: const EdgeInsets.all(16),
                strokeColor: theme.inkColor,
                fillColor: theme.secondaryColor,
                strokeWidth: theme.strokeWidth,
                alignment: Alignment.center,
                createPrimitive: () => SketchyPrimitive.circle(
                  fill: SketchyFill.hachure,
                ),
                child: const SketchyText('Hachure Circle'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### SketchySlider Examples in Dart

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Demonstrates the usage of SketchySlider for continuous and discrete numeric value selection. It supports setting minimum and maximum values, and defining discrete divisions for stepped control. The slider features hand-drawn track and thumb rendering.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  State<SliderExampleWidget> createState() => _SliderExampleWidgetState();
}

class _SliderExampleWidgetState extends State<SliderExampleWidget> {
  double _continuousValue = 0.5;
  double _discreteValue = 50;
  double _rangeValue = 75;

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Slider Examples')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SketchyText('Continuous: ${_continuousValue.toStringAsFixed(2)}')
            SketchySlider(
              value: _continuousValue,
              onChanged: (value) => setState(() => _continuousValue = value),
              min: 0.0,
              max: 1.0,
            ),
            const SizedBox(height: 32),
            SketchyText('Discrete (10 divisions): ${_discreteValue.toInt()}')
            SketchySlider(
              value: _discreteValue,
              onChanged: (value) => setState(() => _discreteValue = value),
              min: 0,
              max: 100,
              divisions: 10,
            ),
            const SizedBox(height: 32),
            SketchyText('Range 0-200: ${_rangeValue.toInt()}')
            SketchySlider(
              value: _rangeValue,
              onChanged: (value) => setState(() => _rangeValue = value),
              min: 0,
              max: 200,
              divisions: 20,
            ),
          ],
        ),
      ),
    );
  }
}

```

--------------------------------

### Sketchy Widget Primitive Caching (Fixed)

Source: https://github.com/csells/sketchy_design_lang/blob/main/CLAUDE.md

Example of how to cache SketchyPrimitive instances in a StatefulWidget's state using `late final` in `initState`. This pattern prevents unbounded memory growth by ensuring primitives are created only once.

```dart
class SketchyWidget extends StatefulWidget {
  // ...
}

class _SketchyWidgetState extends State<SketchyWidget> {
  late final SketchyPrimitive _primitive;

  @override
  void initState() {
    super.initState();
    _primitive = SketchyPrimitive.rectangle(fill: SketchyFill.solid);
  }

  @override
  Widget build(BuildContext context) {
    // Use _primitive, NOT SketchyPrimitive.rectangle() inline
  }
}
```

--------------------------------

### SketchyDialog and SketchyAlertDialog Examples in Dart

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Illustrates the use of SketchyDialog for custom modal content and SketchyAlertDialog for standard alert messages. These widgets provide a hand-drawn aesthetic for dialogs, supporting various content types, actions, and icons. They are built using Flutter's showDialog function.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  void _showSimpleDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => SketchyDialog(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SketchyText(
              'Simple Dialog',
              style: SketchyTheme.of(context).typography.title,
            ),
            const SizedBox(height: 16),
            const SketchyText('This is a simple dialog with custom content.')
            const SizedBox(height: 24),
            Align(
              alignment: Alignment.centerRight,
              child: SketchyOutlinedButton(
                onPressed: () => Navigator.of(context).pop(),
                child: const SketchyText('Close'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => SketchyAlertDialog(
        icon: const SketchySymbol(
          symbol: SketchySymbols.warning,
          size: 32,
        ),
        title: const SketchyText('Delete Item?')
        content: const SketchyText(
          'This action cannot be undone. Are you sure you want to delete this item?'
        ),
        actions: [
          SketchyButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const SketchyText('Cancel'),
          ),
          SketchyOutlinedButton(
            onPressed: () {
              Navigator.of(context).pop();
              // Perform delete action
            },
            child: const SketchyText('Delete'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Dialog Examples'))
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SketchyOutlinedButton(
              onPressed: () => _showSimpleDialog(context),
              child: const SketchyText('Show Simple Dialog'),
            ),
            const SizedBox(height: 16),
            SketchyOutlinedButton(
              onPressed: () => _showAlertDialog(context),
              child: const SketchyText('Show Alert Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

```

--------------------------------

### Sketchy Circular Progress Indicator Examples

Source: https://github.com/csells/sketchy_design_lang/blob/main/README.md

Demonstrates the usage of SketchyCircularProgressIndicator in both determinate and indeterminate modes. Customization options include `value`, `size`, `strokeWidth`, and `color`. These indicators are suitable for showing progress or loading states.

```dart
// Circular progress indicator (determinate mode)
SketchyCircularProgressIndicator(
  value: 0.75,
  size: 48,
  strokeWidth: 4.0,
  color: Colors.green,
);

// Circular progress indicator (indeterminate mode)
SketchyCircularProgressIndicator(
  size: 64,
  color: theme.secondaryColor,
);
```

--------------------------------

### SketchyFrame Widget Examples in Dart

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

Illustrates the use of SketchyFrame, a high-level widget for creating common frame shapes with built-in padding and alignment. It simplifies the creation of outlined, solid, and hachure-filled frames, including circular shapes. Requires the 'sketchy_design_lang' package.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Frame Variations')),
      body: SketchyTheme.consumer(
        builder: (context, theme) => Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SketchyFrame(
                height: 60,
                padding: const EdgeInsets.all(12),
                fill: SketchyFill.none,
                strokeColor: theme.inkColor,
                strokeWidth: theme.strokeWidth,
                child: const SketchyText('Outlined Frame'),
              ),
              const SizedBox(height: 16),
              SketchyFrame(
                height: 60,
                padding: const EdgeInsets.all(12),
                fill: SketchyFill.solid,
                fillColor: theme.primaryColor,
                strokeColor: theme.inkColor,
                strokeWidth: theme.strokeWidth,
                child: SketchyText(
                  'Solid Frame',
                  style: TextStyle(color: theme.onPrimaryColor),
                ),
              ),
              const SizedBox(height: 16),
              SketchyFrame(
                height: 60,
                padding: const EdgeInsets.all(12),
                fill: SketchyFill.hachure,
                fillColor: theme.secondaryColor,
                strokeColor: theme.inkColor,
                strokeWidth: theme.strokeWidth,
                cornerRadius: 12,
                child: const SketchyText('Rounded Hachure Frame'),
              ),
              const SizedBox(height: 16),
              SketchyFrame(
                width: 80,
                height: 80,
                padding: const EdgeInsets.all(12),
                fill: SketchyFill.solid,
                fillColor: theme.primaryColor,
                strokeColor: theme.inkColor,
                strokeWidth: theme.strokeWidth,
                shape: SketchyFrameShape.circle,
                alignment: Alignment.center,
                child: SketchyText(
                  'Circle',
                  style: TextStyle(color: theme.onPrimaryColor),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Implement Sketchy Checkboxes and Switches in Flutter

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

This Dart code snippet demonstrates how to integrate and manage the state of SketchyCheckboxListTile and SketchySwitch widgets within a Flutter application. It showcases the use of `setState` to update the UI based on user interactions with these toggle controls and includes examples for radio button integration.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  State<ToggleExampleWidget> createState() => _ToggleExampleWidgetState();
}

class _ToggleExampleWidgetState extends State<ToggleExampleWidget> {
  bool _checkbox1 = false;
  bool _checkbox2 = true;
  bool _switch1 = false;
  bool _switch2 = true;
  String _selectedOption = 'option1';

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Toggle Controls')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SketchyText('Checkboxes'),
            const SizedBox(height: 8),
            SketchyCheckboxListTile(
              value: _checkbox1,
              onChanged: (value) => setState(() => _checkbox1 = value ?? false),
              title: const SketchyText('Receive email notifications'),
              subtitle: const SketchyText('Get updates about new features'),
            ),
            SketchyCheckboxListTile(
              value: _checkbox2,
              onChanged: (value) => setState(() => _checkbox2 = value ?? false),
              title: const SketchyText('Enable dark mode'),
            ),
            const SizedBox(height: 24),
            const SketchyText('Switches'),
            const SizedBox(height: 8),
            Row(
              children: [
                SketchySwitch(
                  value: _switch1,
                  onChanged: (value) => setState(() => _switch1 = value),
                ),
                const SizedBox(width: 12),
                const SketchyText('WiFi'),
              ],
            ),
            const SizedBox(height: 12),
            Row(
              children: [
                SketchySwitch(
                  value: _switch2,
                  onChanged: (value) => setState(() => _switch2 = value),
                ),
                const SizedBox(width: 12),
                const SketchyText('Bluetooth'),
              ],
            ),
            const SizedBox(height: 24),
            const SketchyText('Radio Buttons'),
            const SizedBox(height: 8),
            SketchyRadioListTile<String>(
              value: 'option1',
              groupValue: _selectedOption,
              onChanged: (value) => setState(() => _selectedOption = value!),
              title: const SketchyText('Option 1'),
              subtitle: const SketchyText('First choice'),
            ),
            SketchyRadioListTile<String>(
              value: 'option2',
              groupValue: _selectedOption,
              onChanged: (value) => setState(() => _selectedOption = value!),
              title: const SketchyText('Option 2'),
              subtitle: const SketchyText('Second choice'),
            ),
            SketchyRadioListTile<String>(
              value: 'option3',
              groupValue: _selectedOption,
              onChanged: (value) => setState(() => _selectedOption = value!),
              title: const SketchyText('Option 3'),
            ),
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Bash Verification Commands for Flutter Project

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/sketchy_app_spec.md

Provides essential bash commands for testing, analyzing, formatting, and running the Flutter project. These commands are crucial for maintaining code quality and ensuring the project's readiness.

```bash
# Run tests
flutter test test/sketchy_app_test.dart
```

```bash
# Analyze code
dart analyze lib/src/app/sketchy_app.dart
```

```bash
# Format code
dart format lib/src/app/sketchy_app.dart test/sketchy_app_test.dart example/lib/router.dart
```

```bash
# Run example (from example directory)
flutter run -d chrome example/lib/router.dart
```

--------------------------------

### Sketchy Flutter Package Folder Structure

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/design-system.md

Illustrates the recommended directory layout for the Sketchy Flutter design system package. It highlights the public exports, source directory with theme, widgets, and docs subdirectories, and the entry point for applications.

```text
lib/
  sketchy.dart                     # public exports

  src/
    theme/
      sketchy_colors.dart          # static color palette
      sketchy_theme.dart           # theme data configuration
      sketchy_themes.dart          # preset themes and palette logic
      sketchy_typography.dart      # comic shanns text styles

    widgets/
      sketchy_button.dart
      sketchy_text_field.dart
      sketchy_divider.dart
      sketchy_radio.dart
      sketchy_slider.dart
      sketchy_linear_progress_indicator.dart
      sketchy_calendar.dart

    docs/
      sketchy_design_system_page.dart
```

--------------------------------

### Flutter Build and Test Commands

Source: https://github.com/csells/sketchy_design_lang/blob/main/CLAUDE.md

Common commands for analyzing, testing, and running the Sketchy Flutter project. These are essential for maintaining code quality and development workflow.

```bash
flutter analyze        # Run linter
flutter test           # Run all tests
flutter run            # Run example app (from /example directory)
```

--------------------------------

### Determinate Sketchy Circular Progress Indicator with Value (Dart)

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/sketchy_circular_progress_indicator_spec.md

An example of using the SketchyCircularProgressIndicator in determinate mode by providing a specific 'value' between 0.0 and 1.0.

```dart
SketchyCircularProgressIndicator(
  value: 0.75,
)
```

--------------------------------

### Configure Semantics for Progress Indicator (Dart)

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/sketchy_circular_progress_indicator_spec.md

Wraps the progress indicator in a Semantics widget to provide accessibility information. It sets a default label and displays the percentage value in determinate mode, with an option to provide a custom semantic label.

```dart
Semantics(
  label: widget.semanticLabel ?? 'Circular progress indicator',
  value: widget.value != null
      ? '${(widget.value! * 100).round()}%'
      : null,
  child: ...
)
```

--------------------------------

### Sketchy RadioListTile Example

Source: https://github.com/csells/sketchy_design_lang/blob/main/README.md

Illustrates the use of SketchyRadioListTile for radio button selection within a list. Similar to SketchyCheckboxListTile, it makes the entire row tappable and keeps the control and label synchronized. This is useful for single selection scenarios in a group.

```dart
SketchyRadioListTile<String>(
  value: 'instant',
  groupValue: deliverySpeed,
  onChanged: (value) => setState(() => deliverySpeed = value ?? 'instant'),
  title: SketchyText('Send instantly',
      style: SketchyTheme.of(context).typography.body),
);
```

--------------------------------

### Dart Analysis and Formatting Commands

Source: https://github.com/csells/sketchy_design_lang/blob/main/CLAUDE.md

Commands to analyze Dart code for issues, automatically apply fixes, and format the code according to Dart standards. These are crucial after significant coding tasks.

```bash
dart analyze           # Check for issues
dart fix --apply       # Auto-fix lint issues
dart format .          # Format all code
```

--------------------------------

### Sketchy Widget Primitive Caching (Lazy)

Source: https://github.com/csells/sketchy_design_lang/blob/main/CLAUDE.md

Demonstrates lazy caching of SketchyPrimitive instances. This pattern creates the primitive only when it's first needed, which is useful for conditional primitives or when theme values are required.

```dart
SketchyPrimitive? _cachedPrimitive;
SketchyPrimitive _getPrimitive() =>
    _cachedPrimitive ??= SketchyPrimitive.rectangle();
```

--------------------------------

### Using SketchyPrimitive for Circle and Arc

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/sketchy_circular_progress_indicator_spec.md

Demonstrates the usage of SketchyPrimitive factories to define the geometry for the background track (circle) and the progress arc. These primitives are fundamental for rendering the sketchy shapes. The `seed` ensures deterministic rendering for the sketchy effect.

```dart
SketchyPrimitive.circle(seed: _fixedSeed)

SketchyPrimitive.arc(
  seed: _fixedSeed,
  startAngle: -pi / 2 + spinOffset,
  sweepAngle: value * 2 * pi,
)
```

--------------------------------

### Custom Styled Sketchy Circular Progress Indicator (Dart)

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/sketchy_circular_progress_indicator_spec.md

Demonstrates customizing the appearance of the SketchyCircularProgressIndicator with parameters for size, stroke width, color, and background color.

```dart
SketchyCircularProgressIndicator(
  value: 0.5,
  size: 64,
  strokeWidth: 6.0,
  color: Colors.blue,
  backgroundColor: Colors.blue.withOpacity(0.1),
)
```

--------------------------------

### Sketchy Theme Data Structure and Access in Flutter

Source: https://github.com/csells/sketchy_design_lang/blob/main/specs/design-system.md

Defines the SketchyThemeData class for design system configuration and demonstrates how to access this theme data within a Flutter widget tree using SketchyTheme.of(context).

```dart
class SketchyThemeData {
    +Color inkColor
    +Color paperColor
    +Color primaryColor
    +Color secondaryColor
    +Color errorColor
    +SketchyTypographyData typography
    +double strokeWidth
    +double borderRadius
    +double roughness
    +TextCase textCase
    +copyWith()
}

// In a widget:
final theme = SketchyTheme.of(context);
```

--------------------------------

### Theme Access with Consumer Pattern (Dart)

Source: https://github.com/csells/sketchy_design_lang/blob/main/CLAUDE.md

Demonstrates the preferred consumer pattern for accessing theme data within a Flutter application. It utilizes `SketchyTheme.consumer` to provide the theme to a builder function, allowing access to theme properties like `inkColor` for styling widgets.

```dart
return SketchyTheme.consumer(
  builder: (context, theme) => SketchyText(
    'Hello',
    style: TextStyle(color: theme.inkColor),
  ),
);
```

--------------------------------

### Displaying SketchyCards and SketchyListTiles in Flutter

Source: https://context7.com/csells/sketchy_design_lang/llms.txt

This Dart code demonstrates how to use SketchyCard and SketchyListTile widgets to create organized content layouts within a Flutter application. It showcases a card with text and buttons, and a card containing multiple list tiles with leading symbols, titles, subtitles, and trailing icons, utilizing the Sketchy Design Language.

```dart
import 'package:flutter/widgets.dart';
import 'package:sketchy_design_lang/sketchy_design_lang.dart';

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

  @override
  Widget build(BuildContext context) {
    return SketchyScaffold(
      appBar: SketchyAppBar(title: const SketchyText('Cards & Lists')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SketchyCard(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SketchyText(
                      'Card Title',
                      style: SketchyTheme.of(context).typography.title,
                    ),
                    const SizedBox(height: 8),
                    const SketchyText(
                      'This is a card with some content inside. '
                      'Cards are great for grouping related information.',
                    ),
                    const SizedBox(height: 16),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        SketchyButton(
                          onPressed: () {},
                          child: const SketchyText('Action'),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 24),
            SketchyCard(
              child: Column(
                children: [
                  SketchyListTile(
                    leading: const SketchySymbol(symbol: SketchySymbols.home),
                    title: const SketchyText('Home'),
                    subtitle: const SketchyText('Main dashboard'),
                    onTap: () {},
                  ),
                  const SketchyDivider(),
                  SketchyListTile(
                    leading: const SketchySymbol(symbol: SketchySymbols.settings),
                    title: const SketchyText('Settings'),
                    subtitle: const SketchyText('Configure app preferences'),
                    trailing: const SketchySymbol(symbol: SketchySymbols.chevronRight),
                    onTap: () {},
                  ),
                  const SketchyDivider(),
                  SketchyListTile(
                    leading: const SketchySymbol(symbol: SketchySymbols.info),
                    title: const SketchyText('About'),
                    onTap: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

```