Flutter Builder UI Kit

A flexible and customizable UI builder package for Flutter applications part of Flutter Pre-setup and Flutter Builder low code generation and easy project setup app.

Full examples and documentation on UI kit website

Features

• Easy-to-use builder patterns for common UI components
• Highly customizable widgets
• Responsive design support
• Material Design and Cupertino style components
• Minimal dependencies

Installation

Add this to your package's pubspec.yaml file:

dependencies:
    flutter_builder_ui_kit: ^1.0.4

Usage

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

Buttons examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

BouncingIconButton(
    icon: Icons.favorite,
    onPressed: () {},
    color: Colors.red,
    size: 56,
),

Inputs examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

PinInput(
    length: 4,
    obscureText: true,
    onCompleted: (pin) {
    // Handle PIN completion
    },
)

Cards examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

StatusCard(
    customColor: Colors.green.shade400,
    type: StatusType.success,
    title: 'Payment Successful',
    message: 'Your transaction has been completed.',
    onClose: () {},
),

List Tiles examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

AnimatedListTile(
    leading: Icons.inbox,
    title: 'Inbox',
    subtitle: '3 new messages',
    onTap: () {},
),

Overlays examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

ElevatedButton(
    child: const Text('Show Form Sheet'),
    onPressed: () {
    final formKey = GlobalKey<FormState>();
    final addressController = TextEditingController();
    final cityController = TextEditingController();
    final zipController = TextEditingController();

    StyledBottomSheet.show(
        context: context,
        title: 'Delivery Address',
        content: Form(
        key: formKey,
        child: Column(
            children: [
            TextFormField(
                controller: addressController,
                decoration: const InputDecoration(
                labelText: 'Street Address',
                prefixIcon:
                    Icon(FontAwesomeIcons.locationDot),
                ),
                validator: (value) =>
                    value?.isEmpty ?? true
                        ? 'Required'
                        : null,
            ),
            const SizedBox(height: 16),
            Row(
                children: [
                Expanded(
                    flex: 2,
                    child: TextFormField(
                    controller: cityController,
                    decoration: const InputDecoration(
                        labelText: 'City',
                        prefixIcon:
                            Icon(FontAwesomeIcons.city),
                    ),
                    validator: (value) =>
                        value?.isEmpty ?? true
                            ? 'Required'
                            : null,
                    ),
                ),
                const SizedBox(width: 16),
                Expanded(
                    child: TextFormField(
                    controller: zipController,
                    decoration: const InputDecoration(
                        labelText: 'ZIP',
                        prefixIcon: Icon(FontAwesomeIcons
                            .envelopeCircleCheck),
                    ),
                    keyboardType: TextInputType.number,
                    validator: (value) =>
                        value?.isEmpty ?? true
                            ? 'Required'
                            : null,
                    ),
                ),
                ],
            ),
            ],
        ),
        ),
        actions: [
        SizedBox(
            width: double.infinity,
            child: FilledButton(
            onPressed: () {
                if (formKey.currentState?.validate() ??
                    false) {
                Navigator.pop(context);
                // Handle address submission
                }
            },
            child: const Text('Save Address'),
            ),
        ),
        ],
    );
    },
),

Bottom bars examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

FloatingBottomBar(
    currentIndex: 0,
    onTap: (_) {},
    leftItems: const [
    NavItemData(
        icon: FontAwesomeIcons.house,
        label: 'Home',
    ),
    NavItemData(
        icon: FontAwesomeIcons.trophy,
        label: 'Rewards',
    ),
    ],
    rightItems: const [
    NavItemData(
        icon: FontAwesomeIcons.compass,
        label: 'Explore',
    ),
    NavItemData(
        icon: FontAwesomeIcons.user,
        label: 'Profile',
    ),
    ],
    floatingAction: FloatingActionData(
    icon: FontAwesomeIcons.plus,
    ),
),

Documentation

For detailed documentation, please visit our UI kit website, or go to Flutter Builder.

License

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