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

Join the Discord Server for more information about UI Kit and Flutter builder itself.

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.5

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.