tailwind_components 1.0.4 copy "tailwind_components: ^1.0.4" to clipboard
tailwind_components: ^1.0.4 copied to clipboard

Flutter components based on Tailwind CSS.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:tailwind_components/tailwind_components.dart';
import 'package:tailwind_components_example/components/example_modal.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: TailwindComponents.navigatorKey,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const BaseApp(),
    );
  }
}

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

  @override
  State<BaseApp> createState() => _BaseAppState();
}

class _BaseAppState extends State<BaseApp> {

  Future<void> showModal() async {
    bool? result = await ExampleModal().show<bool>();

    /// OR
    /// bool result = await Modal.show<bool>(ExampleModal());
  }

  Future<void> showShortSuccessToast() async {
    Toast.show('Success! ', type: ToastType.success);

    /// OR
    /// Toast.show('Info!', type: ToastType.info);
    /// Toast.show('Warning!', type: ToastType.warning);
    /// Toast.show('Error! ', type: ToastType.error);
  }

  Future<void> showLongSuccessToast() async {
    Toast.show('Success! This Toast includes a long string for demonstration!', type: ToastType.success);
  }

  Future<void> showErrorToast() async {
    Toast.show('Error! ', type: ToastType.error);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tailwind Components'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Modals',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
            const SizedBox(height: 8),
            Wrap(
              spacing: 12,
              children: [
                ElevatedButton(
                  onPressed: showModal,
                  child: Text('Show modal'),
                ),
              ],
            ),
        
            const SizedBox(height: 30),
        
            Text(
              'Toasts',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
            const SizedBox(height: 8),
            Wrap(
              spacing: 12,
              children: [
                ElevatedButton(
                  onPressed: showShortSuccessToast,
                  child: Text('Short success toast'),
                ),
        
                ElevatedButton(
                  onPressed: showLongSuccessToast,
                  child: Text('Long success toast'),
                ),
        
                ElevatedButton(
                  onPressed: showErrorToast,
                  child: Text('Error toast'),
                ),
              ],
            ),
        
            const SizedBox(height: 30),
          ],
        ),
      ),
    );
  }
}
5
likes
130
points
12
downloads

Publisher

unverified uploader

Weekly Downloads

Flutter components based on Tailwind CSS.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter, heroicons

More

Packages that depend on tailwind_components