🌟 FlutStrap

FlutStrap is a Flutter UI library inspired by Bootstrap. It provides ready-to-use UI components, responsive layouts, and light/dark theming to help you build Flutter apps quickly and efficiently.

Whether you're building a small project or a complex application, FlutStrap provides essential UI components and layout utilities to accelerate Flutter development.

❓ Why FlutStrap?

FlutStrap brings the familiar design philosophy of Bootstrap to Flutter.

Key advantages include:

⚡ Pre-built UI components
📱 Responsive layout utilities
🎨 Built-in theming support
📏 Consistent spacing system
🧩 Developer-friendly APIs

📦 Installation

Add FlutStrap to your pubspec.yaml:

dependencies:
  flutstrap: ^0.0.1

Then run:

flutter pub get

Alternative Installation (GitHub)

You can also install directly from GitHub:

dependencies:
  flutstrap:
    git:
      url: https://github.com/Broadmaker/FlutStrap.git
      ref: main

Then run:

flutter pub get

🚀 Quick Example

Below is a simple example using FlutStrap components.

import 'package:flutter/material.dart';
import 'package:flutstrap/flutstrap.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlutstrapButton(
          label: "Click Me",
          onPressed: () {
            print("FlutStrap Button Pressed");
          },
          variant: FSButtonVariant.success,
        ),
      ),
    );
  }
}

🧩 Components

FlutStrap includes a variety of UI components that make it easy to build beautiful Flutter applications.

Alerts – Show important messages or notifications to the user.
Badges – Display labels or counts for items.
Buttons – Different button styles including primary, secondary, and disabled states.
Cards – Container widgets used to display grouped content.
Dropdowns – Interactive dropdown menus.
Forms – Form elements including checkboxes, radio buttons, and text inputs.
Modals – Popup dialogs to display additional content.
Navbars – Responsive navigation bars.
Paginations – Pagination controls for multi-page content.
Progress – Progress bars for loading states.
Spinners – Animated loading indicators.
Tables – Structured and responsive tables.
Tooltips – Informational hints for UI elements.

📐 Layouts

FlutStrap provides layout utilities to help structure Flutter apps efficiently and responsively.

🧩 Key Layout Utilities

Columns
Divide your layout into columns for flexible responsive designs.
Containers
Wrap content to control width, padding, alignment, and styling.
Grids
Build responsive grid systems that adapt across screen sizes.
Rows
Organize content horizontally and combine with columns for grid layouts.
Visibility
Control when widgets appear depending on device size or conditions.

⚙️ Core Features

FlutStrap provides core utilities that power layouts, spacing, and responsiveness.

🧩 Core Utilities

Responsive Layouts
Automatically adjust UI layouts based on screen size.
Spacings
Maintain consistent padding and margins across your application.
Breakpoints
Define responsive breakpoints for mobile, tablet, and desktop layouts.
Themes
Manage global color schemes, typography, and component styles.
Utilities
Helper widgets and functions for alignment, positioning, and layout control.

📸 Preview

Screenshots of FlutStrap components will be added soon.

Example preview layout:

Buttons	Alerts

⚡ Contribution

We welcome contributions!

If you have suggestions, improvements, or bug fixes:

Fork the repository
Create a new branch
Make your changes
Submit a pull request

Your contributions help improve FlutStrap for everyone.

💬 Support

If you have questions or encounter issues, feel free to open an issue on the GitHub repository.

📄 License

FlutStrap is licensed under the MIT License.
You are free to use, modify, and distribute this library in your own projects.

Libraries

animations/animation_sequences
animations/fade_in
animations/index: Basic animation widgets for common use cases
animations/scale_animation
animations/slide_transition
components/alerts/index: Flutstrap Alert Components
components/badges/index: Flutstrap Badge Components
components/buttons/index: Flutstrap Button Components
components/cards/index: Flutstrap Card Components
components/code_viewer
components/dropdowns/index: Flutstrap Dropdown Components
components/forms/index: Flutstrap Form Components
components/index: Flutstrap UI Components
components/modals/index: Flutstrap Modal Components
components/navbars/index: Flutstrap Navbar Components
components/paginations/index: Flutstrap Pagination Components
components/progress/index: Flutstrap Progress Components
components/spinners/index: Flutstrap Spinner Components
components/tables/index: Flutstrap Table Components
components/tooltips/index: Flutstrap Tooltip Components
core/breakpoints
core/index: Flutstrap Core Utilities
core/spacing: Flutstrap Spacing System
core/theme
flutstrap
layout/flutstrap_container: Flutstrap Container - ENHANCED VERSION
layout/index: Flutstrap Layout Components
main
themes/flutstrap_theme
themes/flutstrap_theme_dark
themes/flutstrap_theme_light
themes/index: Flutstrap Themes
animations/animation_types Animations Foundation: Flutstrap Animation Type System
animations/animation_utils Animations Utilities: Flutstrap Animation Utilities
components/badges/flutstrap_badge Badges Components: Flutstrap Badge
components/buttons/flutstrap_button Buttons Components: Flutstrap Button
components/alerts/flutstrap_alert Components Feedback: Flutstrap Alert
components/badges/flutstrap_badge Badges Components: Flutstrap Badge
components/buttons/flutstrap_button Buttons Components: Flutstrap Button
components/cards/flutstrap_card Components Layout: Flutstrap Card
components/dropdowns/flutstrap_dropdown Components Forms: Flutstrap Dropdown
components/forms/flutstrap_checkbox Components Forms: Flutstrap Checkbox
components/forms/flutstrap_form_group Components Forms: Flutstrap Form Group
components/forms/flutstrap_input Components Forms: Flutstrap Input
components/forms/flutstrap_radio Components Forms: Flutstrap Radio
components/forms/flutstrap_textarea Components Forms: Flutstrap TextArea
components/modals/flutstrap_modal Components Overlays: Flutstrap Modal
components/navbars/flutstrap_navbar Components Navigation: Flutstrap Navbar
components/paginations/flutstrap_pagination Components Navigation: Flutstrap Pagination
components/progress/flutstrap_progress Components Feedback: Flutstrap Progress Bar
components/spinners/flutstrap_spinner Components Feedback: Flutstrap Spinner
components/tables/flutstrap_table Components Data Display: Flutstrap Table
components/tooltips/flutstrap_tooltip Components Overlays: Flutstrap Tooltip
layout/flutstrap_col Components Layout: Flutstrap Column
layout/flutstrap_grid Components Layout: Flutstrap Grid System - COMPLETELY FIXED VERSION
layout/flutstrap_row Components Layout: Flutstrap Row
layout/flutstrap_visibility Components Layout: Flutstrap Visibility Utilities - PERFECTED VERSION
core/error_boundary Core Utilities: Flutstrap Error Boundary
core/responsive Core Layout Responsive: Flutstrap Responsive System
core/utils Core Utilities: Flutstrap Core Utilities
components/tables/flutstrap_table Components Data Display: Flutstrap Table
components/alerts/flutstrap_alert Components Feedback: Flutstrap Alert
components/progress/flutstrap_progress Components Feedback: Flutstrap Progress Bar
components/spinners/flutstrap_spinner Components Feedback: Flutstrap Spinner
components/dropdowns/flutstrap_dropdown Components Forms: Flutstrap Dropdown
components/forms/flutstrap_checkbox Components Forms: Flutstrap Checkbox
components/forms/flutstrap_form_group Components Forms: Flutstrap Form Group
components/forms/flutstrap_input Components Forms: Flutstrap Input
components/forms/flutstrap_radio Components Forms: Flutstrap Radio
components/forms/flutstrap_textarea Components Forms: Flutstrap TextArea
animations/animation_types Animations Foundation: Flutstrap Animation Type System
components/cards/flutstrap_card Components Layout: Flutstrap Card
core/responsive Core Layout Responsive: Flutstrap Responsive System
layout/flutstrap_col Components Layout: Flutstrap Column
layout/flutstrap_grid Components Layout: Flutstrap Grid System - COMPLETELY FIXED VERSION
layout/flutstrap_row Components Layout: Flutstrap Row
layout/flutstrap_visibility Components Layout: Flutstrap Visibility Utilities - PERFECTED VERSION
components/navbars/flutstrap_navbar Components Navigation: Flutstrap Navbar
components/paginations/flutstrap_pagination Components Navigation: Flutstrap Pagination
components/modals/flutstrap_modal Components Overlays: Flutstrap Modal
components/tooltips/flutstrap_tooltip Components Overlays: Flutstrap Tooltip
core/responsive Core Layout Responsive: Flutstrap Responsive System
animations/animation_utils Animations Utilities: Flutstrap Animation Utilities
core/error_boundary Core Utilities: Flutstrap Error Boundary
core/utils Core Utilities: Flutstrap Core Utilities

🌟 FlutStrap

❓ Why FlutStrap?

📦 Installation

Alternative Installation (GitHub)

🚀 Quick Example

🧩 Components

📐 Layouts

🧩 Key Layout Utilities

⚙️ Core Features

🧩 Core Utilities

📸 Preview

⚡ Contribution

💬 Support

📄 License

Libraries

Animations

Badges

Buttons

Components

Core

Data Display

Feedback

Forms

Foundation

Layout

Navigation

Overlays

Responsive

Utilities

flutstrap package