flutter_builder_ui_kit 1.0.5

A flexible and customizable UI widgets package for Flutter applications

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

copied to clipboard

Usage

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

copied to clipboard

Buttons examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

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

copied to clipboard

Inputs examples

import 'package:flutter_builder_ui_kit/flutter_builder_ui_kit.dart';

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

copied to clipboard

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: () {},
),

copied to clipboard

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: () {},
),

copied to clipboard

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'),
            ),
        ),
        ],
    );
    },
),

copied to clipboard

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

copied to clipboard

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.