Flutter components based on Tailwind CSS.

Features

Features Status
TWColors Library ✔️
Input Field Widget ✔️
Validators Library ✔️
TaskCard Widget ✔️
RoundedButton Widget ✔️
GradientButton Widget ✔️
SpaceCol Widget ✔️
TWWrapper Widget ✔️
Modal Function ✔️
SpaceRow Widget ✔️

Usage

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,
    ),
),

SpaceCol

SpaceCol(
    spaceBetween: 10,
    children: [],
),

SpaceRow

SpaceRow(
    spaceBetween: 10,
    children: [],
),

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: [],
),