tailwind_components 1.0.4

tailwind_components: ^1.0.4 copied to clipboard

Flutter components based on Tailwind CSS.

Features #

Usage #

Installation

To use all the features of this package, add the navigator key of TailwindComponents to your MaterialApp:

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

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

Here are some examples how to use some of the components

Colors

TWColors.red_600;
TWColors.indigo_600;
TWColors.emerald_400;

InputField

Form(
    key: _formKey,
    child: InputField(
        controller: _controller,
        color: TWColors.indigo_600,
        textCapitalization: TextCapitalization.none,
        keyboardType: TextInputType.emailAddress,
        validators: [Validators.isNotEmpty, Validators.isValidEmail],
        autovalidateMode: AutovalidateMode.always,
        label: 'Email *',
        placeholder: 'Enter your email',
        errorMessage: 'Custom error message',
        enableErrorIcon: true,
    ),
),

AutoGrid

Automatically creates a grid with a specific amount of columns. All columns extent their height to the largest of the row.

AutoGrid(
    amountCols: 4,
    gap: 10,
    children: [],
),

Show Toasts

Toast.show('Success! ', type: ToastType.success);
Toast.show('Info!', type: ToastType.info);
Toast.show('Warning!', type: ToastType.warning);
Toast.show('Error! ', type: ToastType.error);

Manage Modals

You can create a Modal widget class that extends ModalHandler. This will grand you a variety of functions to manage the modal.

// Show the modal from anywhere within your flutter application
bool? result = await ExampleModal().show<bool>();


// Create the modal class
class ExampleModal extends ModalHandler {
  const ExampleModal({super.key});

  @override
  Widget build(BuildContext context) {
    return TWModal(
      maxWidth: 350,

      title: const Text('Example Modal'),
      actions: [
        IconButton(
          onPressed: close,
          icon: Icon(Icons.close, size: 16),
        ),
      ],

      body: Text('Close() function is available with a result parameter within ModalHandler.'),

      footer: Row(
        spacing: 12,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          TextButton(
            child: const Text('Cancel'),
            onPressed: () => close(),
          ),

          ElevatedButton(
            child: const Text('Submit'),
            onPressed: () => close(result: true),
          ),
        ],
      ),
    );
  }
}