wind example-pages.instructions.md

Example page conventions (example/lib/pages/)

Each page demonstrates ONE widget or ONE concept thoroughly. Files are referenced by doc/ via <x-preview source="..."> — stable file paths matter.

Naming

• File: {feature_name}.dart (snake_case). E.g., button_basic.dart, w_button_centered.dart, installation_basic.dart.
• Class: {FeatureName}ExamplePage (PascalCase). E.g., ButtonBasicExamplePage, WButtonCenteredExamplePage.

Shape

import 'package:flutter/material.dart';
import 'package:fluttersdk_wind/fluttersdk_wind.dart';

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

  @override
  State<FooBasicExamplePage> createState() => _FooBasicExamplePageState();
}

class _FooBasicExamplePageState extends State<FooBasicExamplePage> {
  bool _isLoading = false;
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return WDiv(
      className: 'w-full h-full overflow-y-auto p-4',
      scrollPrimary: true,
      child: WDiv(
        className: 'flex flex-col gap-6 max-w-4xl mx-auto',
        children: [
          _buildHeader(),
          _buildSection(title: 'Basic', description: '...', children: [...]),
          _buildSection(title: 'States', description: '...', children: [...]),
        ],
      ),
    );
  }

  Widget _buildHeader() {
    return WDiv(
      className: '''
        p-6 rounded-xl
        bg-gradient-to-r from-blue-500 to-purple-500
      ''',
      children: [
        WText('Page Title', className: 'text-2xl font-bold text-white'),
        WText('One-line description', className: 'text-sm text-white/80'),
      ],
    );
  }

  Widget _buildSection({required String title, required String description, required List<Widget> children}) {
    return WDiv(
      className: 'flex flex-col gap-4',
      children: [
        WText(title, className: 'text-lg font-semibold text-gray-900 dark:text-white'),
        WText(description, className: 'text-sm text-gray-500 dark:text-gray-400'),
        ...children,
      ],
    );
  }
}