pure_ui_kit 0.1.2 copy "pure_ui_kit: ^0.1.2" to clipboard
pure_ui_kit: ^0.1.2 copied to clipboard

A Flutter UI kit inspired by Tailwind CSS, providing elegant and customizable components. Currently includes Empty State components with more components coming soon.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:pure_ui_kit/pure_ui_kit.dart';
// ignore: implementation_imports
import 'package:pure_ui_kit/src/components/steps/step.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return PureTheme(
      emptyStateTheme: const PureEmptyStateTheme(
        titleStyle: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.bold,
          color: Colors.indigo,
        ),
        iconColor: Colors.indigo,
        dashedBorderColor: Colors.indigo,
      ),
      child: MaterialApp(
        title: 'Pure UI Kit Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
          useMaterial3: true,
        ),
        home: const DemoPage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Pure UI Kit Demo'),
      ),
      body: SafeArea(
        minimum: const EdgeInsets.all(16),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text(
                'Simple Empty State',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureEmptyState.simple(
                title: 'Aucun projet',
                description: 'Commencez par créer un nouveau projet.',
                buttonText: 'Nouveau Projet',
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                        content: Text('Création d\'un nouveau projet')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Empty State with Dashed Border',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureEmptyState.withDashedBorder(
                title: 'Créer une nouvelle base de données',
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                        content:
                            Text('Création d\'une nouvelle base de données')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Step Bullet',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureStep.bullet(
                currentStep: 2,
                totalSteps: 4,
                onStepTap: (step) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Tapped on step $step')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Step Circle',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureStep.circle(
                currentStep: 4,
                totalSteps: 5,
                onStepTap: (step) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Tapped on step $step')),
                  );
                },
              ),
              const SizedBox(height: 48),
              const Text(
                'Step Progress Bar',
                style: TextStyle(
                  fontFamily: 'inter',
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              PureStep.progressBar(
                currentStep: 3,
                totalSteps: 4,
                progressLabel: 'Migrating MySQL database...',
                onStepTap: (step) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Tapped on step $step')),
                  );
                },
              ),
              const SizedBox(height: 48),
            ],
          ),
        ),
      ),
    );
  }
}
0
likes
140
points
1
downloads

Publisher

verified publisherstudiobidibou.fr

Weekly Downloads

A Flutter UI kit inspired by Tailwind CSS, providing elegant and customizable components. Currently includes Empty State components with more components coming soon.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, heroicons

More

Packages that depend on pure_ui_kit