pink_ui 0.0.1

Flutter implementation of the Appwrite Pink design system

Pink UI

[Un-official] Flutter implementation of the Appwrite Pink design system, bringing Appwrite's beautiful and consistent UI components to your Flutter applications.

Features

• Comprehensive Components: Complete implementation of all Appwrite Pink UI elements and components
• No Material Dependency: Components are built with Flutter's core widgets, not dependent on Material Design
• Design Tokens: Direct translation of Appwrite Pink's colors, typography, and spacing to Flutter
• PinkApp and PinkTheme: Similar to MaterialApp, but for the Pink design system
• Light and Dark Mode: Full support for both light and dark themes
• Accessibility: Components designed with accessibility in mind

Installation

dependencies:
  pink_ui: ^0.0.1

Then run:

flutter pub get

Usage

Basic Setup

The simplest way to use Pink UI is to wrap your application with PinkApp:

import 'package:flutter/widgets.dart';
import 'package:pink_ui/pink_ui.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return PinkApp(
      title: 'Pink UI Demo',
      themeMode: PinkThemeMode.light, // or dark, or system
      home: MyHomePage(),
    );
  }
}

Using Components

Pink UI provides a wide range of components that match the Appwrite Pink design system:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = PinkTheme.of(context);
    
    return Container(
      color: theme.colorScheme.background,
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Welcome to Pink UI', style: theme.textTheme.h1),
          const SizedBox(height: 16),
          
          PinkButton(
            onPressed: () {},
            child: const Text('Primary Button'),
          ),
          const SizedBox(height: 8),
          
          PinkButton(
            onPressed: () {},
            variant: PinkButtonVariant.secondary,
            child: const Text('Secondary Button'),
          ),
          const SizedBox(height: 16),
          
          PinkAlert(
            title: 'Information',
            message: 'This is an example alert from Pink UI.',
            variant: PinkAlertVariant.info,
          ),
          const SizedBox(height: 16),
          
          PinkCard(
            padding: const EdgeInsets.all(16),
            child: Text('This is a card component.'),
          ),
        ],
      ),
    );
  }
}

Available Components

Pink UI includes the following components:

Elements

• Button
• Avatar
• Tag
• Switch
• Badge
• InlineCode
• InlineTag
• Loader

Form Elements

• TextInput
• Checkbox
• Radio
• Slider
• Toggle
• Select

Components

• Alert
• Card
• Dialog
• Toast
• Tabs
• Dropdown
• Table
• ProgressBar

Customization

You can customize the Pink UI theme by creating your own PinkThemeData:

final customTheme = PinkThemeData(
  brightness: Brightness.light,
  colorScheme: PinkColorScheme.light().copyWith(
    primary: const Color(0xFF0077B6), // Custom primary color
  ),
  textTheme: PinkTextTheme.light(),
  shadows: PinkShadowTheme.light(),
  spacing: const PinkSpacingData(),
);

// Then use it in your PinkApp
PinkApp(
  theme: customTheme,
  // ...
)

Examples

Check out the example folder for a complete demo application showcasing all Pink UI components.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.