by_ui 0.1.8

A modern, highly customizable Flutter UI component library featuring dynamic border buttons, scroll-driven animations, motion cards, toasts, and shrink-wrap dialogs

ByUI

A modern, highly customizable Flutter UI component library featuring dynamic border buttons, sequential scroll-driven animations, dynamic motion cards, fluid spatial animations, interactive toasts, multi-anchor corner positioning, and shrink-wrap dialogs.

---

Preview

Tip

Try the Interactive Web Showcase: Experience all animations, components, and customizations live in your browser at by-ui-showcase.vercel.app.

Dynamic Border Beam & State Transitions (ByButton)

Sequential Scroll-Driven Animations (BySequence)

Dynamic Floating AppBar with Sensor & Cursor Parallax (ByAppBar)

Cards, Notifications & Dialogs

Dynamic Motion Card	Stacked Cards	Drag / Tap to Dialog	Standalone Modal Dialog

Segmented Tab Bar with Liquid Morphing & Dynamic Border (ByTabBar)

Floating Frosted Dock with Selection Pulse (ByBottomNav)

Responsive Vertical Sidebar & Overlay Drawer (BySidebar)

Automated Skeleton Generator & Gradient Shimmer (ByAutoShimmer)

---

Features

• ByButton (Flagship Interactive Button & Dynamic Border Pulse):

  • Dynamic Perimeter Beam Sweep (ByDynamicBorderLayer): High-energy gradient beam that traces the continuous rounded perimeter and corner curves of the button.
  • State-Transition Energy Pulse: Automatically triggers a vibrant border pulse when transitioning from disabled to enabled mode (enableTransitionPulseColors).
  • Autonomous Async State: Passing a Future Function() to onPressed automatically engages the loading state with a 3-phase circular pulse spinner.
  • Zero Content Shift: Maintains button geometry during loading state to prevent layout jank and abrupt size shifts.
  • Independent Border Widths: Independent tuning for resting border (borderWidth) versus loading border (loadingBorderWidth).
  • 4 Visual Variants: filled, gradient, outline, and ghost.
  • 5 Size Presets: xs, sm, md, lg, and xl with customizable padding, font sizes, and corner radiuses.
  • Rich Decorators: Leading widgets (prefix), trailing widgets (suffix), and corner notification badges (badge, badgeAlignment).

• BySequence (Sequential Scroll-Driven Animations):

  • Zero-Boilerplate Scroll Reveal: Progressively reveals children sequentially as the user scrolls without manual controllers or interpolators.
  • GSAP-Inspired Motion Engine:
    • 1:1 Continuous Scrubbing: Direct bidirectional sync between scroll progress and animation transitions.
    • Dynamic Batch Pacing (ScrollTrigger.batch): Automatic batch grouping with configurable stagger wave delays.
    • Trigger Line & Gating: Relative trigger points, initial visible fractions (initialVisibleFraction), and item counts (initialVisibleCount).
  • Composability: Per-item overrides via BySequenceItem, multi-property BySequenceAnimation, and headless observation with BySequenceController.
  • Dual Orientation: Smooth support for both vertical and horizontal scrollable flows.

• ByAppBar (Dynamic Floating, Glassmorphic & Sensor Parallax):

  • Scroll-Driven Floating Transition: Smoothly animates between static edge-docked mode and floating detached card based on scroll threshold via ancestor ByScrollScope or custom ScrollController.
  • Dynamic Sensor & Motion Tilt: Directional gradient border stroke that shifts with physical device tilt (gyroscope/accelerometer) on mobile, and adapts to mouse cursor hover parallax on desktop & web with cubic hermite smoothstep blending.
  • Directional Inner Shadow & Glow: Directional inner ambient sheen (enableInnerShadow, innerShadowOpacity) with balanced edge-to-edge coverage in resting pose.
  • Frosted Glassmorphism: Integrated Gaussian blur filter (floatingBlurSigma) and configurable surface opacity (floatingOpacity).
  • Seamless Notch Coverage: Automatically covers top status bar area when static, and smoothly fades to transparent when floating so background content scrolls underneath.
  • Zero-Border Default & Complete Customization: Fully configurable borders, margins, corner radii, elevation, toolbar height, and custom bottom widgets.

• ByTabBar (Fluid Segmented Tab Bar & Scrollable Tabs Rail):

  • Liquid Elastic Morphing: Stretches the sliding indicator pill dynamically between distant tabs (enableLiquidMorphing, liquidStretchFactor).
  • Dual Indicator Styles: Sliding pill capsule (ByTabIndicatorStyle.pill) and docked bottom underline bar (ByTabIndicatorStyle.underline).
  • Dynamic Perimeter Laser Pulses: Running 3-phase laser beam on the active indicator (enableDynamicBorder, enableSelectionPulse, dynamicBorderColors) and outer container (enableOuterDynamicBorder).
  • Scrollable Tabs Rail: Horizontal scrolling (isScrollable: true) with concentric innerClipRadius anti-aliased viewport clipping and isolated scroll notifications.
  • Rich Customization: Linear gradients (indicatorGradient), border width, container radius, indicator radius, text & icon color transitions, and badges.

• ByBottomNav (Glassmorphic Floating Navigation Dock):

  • Spring-Physics Interaction: Smooth spring item expansion and active indicator pill gliding.
  • Selection Border Pulse: 3-phase dynamic perimeter border beam pulse on item tap (enableSelectionPulse, selectionPulseColors).
  • Frosted Glassmorphism: Translucent background surface with customizable blur (blurSigma) and opacity (surfaceOpacity).
  • Adaptive Layout: Fluid label/icon layout transitions with mobile-first badge counters (badge, badgeColor).

• BySidebar (Responsive Vertical Navigation Sidebar):

  • Dual Presentation Modes: Wide-screen docked sidebar ($\ge 700\text{px}$) and small-screen floating overlay drawer ($< 700\text{px}$) with dismissible scrim backdrop.
  • Tactile Toggle Placement: Header toggle button (togglePlacement: BySidebarTogglePlacement.header) or tactile bottom action tile (bottomAction).
  • Hover Auto-Expand Preview: Interactive hover-expand preview (enableHoverExpand) on desktop and web.
  • Rich Item Decorators: Section headers (BySidebarItem.section), trailing status widgets (trailing), collapsed tooltips, and badges.

• ByAutoShimmer (Automated Skeleton Layout Generator):

  • Recursive Tree Inspection: Automatically produces high-fidelity bone placeholders (ByBone) matching exact card, text, avatar, and button dimensions.
  • Directional Wave Sweeps: Multi-tone gradient sweeps (direction: ByShimmerDirection.ltr, rtl, ttb, btt, diagonal).
  • Gradient Wave Customization: Rich gradient sweeps with shimmerGradient and customizable wave width (shimmerWaveWidth).
  • Seamless State Transitions: Zero-overflow cross-fade morphing between skeleton and loaded content (ClipRect + OverflowBox).
  • Standalone Bone Primitives: ByBone.square, ByBone.rounded, ByBone.circle, and ByBone.text.

• ByCard (Standard, Gradient & Dynamic Motion Sensor):

  • Zero-Boilerplate Motion (ByCard.dynamicSensor): Responsive border gradient that shifts dynamically with physical tilt and pointer motion.
    • Mobile (Android & iOS): Reacts to hardware gyroscope / accelerometer sensors with smooth low-pass filtering.
    • Desktop & Web: Reacts interactively to cursor hover position, smoothly gliding back to neutral center position when the pointer exits.
    • Lifecycle Safe: Automatically initializes and disposes sensor listeners on mount/unmount. No manual stream handling required.
  • Vibrant Gradient Borders (ByCard.gradient): Quick setup with colors or custom borderGradient to frame your content in eye-catching styles.
  • Standard Solid Cards (ByCard): Polished cards with solid background, border styling, customizable drop shadows, and corner radius.
  • Theming: Unified application-wide styling with ByCardThemeData and ByCardDefaults.

• ByToast:

  • Multi-Anchor Screen Positioning: Supports standard mobile positions (top, bottom) and desktop/web corner anchors (topRight, topLeft, bottomRight, bottomLeft).
  • Surface Opacity Control: Fine-tune backgroundOpacity (0.0 to 1.0) for sleek translucent/glassmorphic cards while keeping foreground text, icons, and buttons at 100% crisp contrast.
  • Configurable Text Clamping: Built-in maxLines (defaults to 3) and overflow (TextOverflow.ellipsis) for tidy compact cards, plus optional titleMaxLines.
  • Multi-directional Slide: Inward slide entrance animations from top, bottom, left, or right with auto-detection for corner anchors.
  • Rich Animation Styles: Supports slideAndFade, bounce, scaleAndFade, slideOnly, and fadeOnly.
  • Surfaces: Solid colors, multi-hue linear gradients, thin borders, and customizable drop shadows.
  • Interactive Gestures: Swipe to dismiss away from center, or drag towards screen center to expand into a detail modal dialog.
  • 1-Click Presets: ByToast.showSuccess, ByToast.showError, ByToast.showWarning, ByToast.showInfo.

• Morphing Dialog (Toast-to-Dialog):

  • Dual Interaction: Tap the message text or pull/drag the toast towards the center of the screen to smoothly expand into a modal dialog.
  • Smooth Scrollbar & Long Text: Integrated dedicated ScrollController with custom styled scrollbars for long notification details.
  • Shrink-Wrap Layout: Dialog dynamically adjusts height to fit content without awkward empty space.
  • Resilient Surface: Dialog maintains solid contrast even when the initiating toast uses reduced background opacity.

• ByDialog:

  • Standalone modal dialog system sharing ByToast's sleek slate aesthetic.
  • Presets for single-button ByDialog.alert and two-button ByDialog.confirm.
  • Configurable text clamping (messageMaxLines, titleMaxLines, overflow).
  • Fully customizable barrier colors, gradients, button colors, and entry curves.

---

Getting Started

Add by_ui to your pubspec.yaml:

dependencies:
  by_ui: ^0.1.8

Or run:

flutter pub add by_ui

Import the package in your Dart code:

import 'package:by_ui/by_ui.dart';

---

Usage

ByButton

1. Outlined Button with Dynamic Circular Loading Pulse

Configured with independent border widths and custom multi-color pulse beams during async operations:

ByButton(
  variant: ByButtonVariant.outline,
  borderWidth: 1.5,
  loadingBorderWidth: 2.0,
  loadingPulseColors: const [
    Color(0xFF38BDF8),
    Color(0xFF818CF8),
    Color(0xFFC084FC),
  ],
  prefix: const Icon(Icons.bolt_rounded, size: 18),
  onPressed: () async {
    await Future.delayed(const Duration(seconds: 2));
  },
  child: const Text('Dynamic Pulse Button'),
);

2. Auto-Async Loading State with Circular Pulse Spinner

Passing an asynchronous callback automatically switches the button to loading mode while preserving dimensions:

ByButton(
  variant: ByButtonVariant.filled,
  prefix: const Icon(Icons.cloud_upload_rounded),
  onPressed: () async {
    await Future.delayed(const Duration(seconds: 2));
  },
  child: const Text('Upload Changes'),
);

3. State Transition Pulse on Enable

Automatically triggers an energetic contrast pulse whenever the button becomes active:

ByButton(
  isEnabled: isTermsAccepted,
  enableStateTransitionPulse: true,
  enableTransitionPulseColors: const [Color(0xFF10B981), Color(0xFF06B6D4)],
  onPressed: () => submitForm(),
  child: const Text('Accept & Continue'),
);

---

ByAppBar

Dynamic Floating Glassmorphic AppBar with Sensor Parallax

Automatically animates to a floating pill with frosted glass blur upon scroll, while reactive border lighting shifts with device tilt and cursor hover:

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: ByAppBar(
    isFloatingEnabled: true,
    scrollThreshold: 12.0,
    enableSensor: true,
    enableHoverTilt: true,
    borderGradient: const LinearGradient(
      colors: [Color(0xFF2563EB), Color(0xFF06B6D4)],
    ),
    borderWidth: 1.0,
    floatingBlurSigma: 16.0,
    floatingOpacity: 0.84,
    enableInnerShadow: true,
    innerShadowOpacity: 0.8,
    child: Row(
      children: [
        IconButton(icon: const Icon(Icons.menu), onPressed: () {}),
        const Text('Dynamic Floating AppBar', style: TextStyle(fontWeight: FontWeight.bold)),
      ],
    ),
  ),
  body: ListView.builder(
    padding: EdgeInsets.fromLTRB(16, ByAppBar.getContentTopPadding(context), 16, 24),
    itemCount: 50,
    itemBuilder: (_, index) => ListTile(title: Text('Item $index')),
  ),
);

---

ByTabBar

Fluid Segmented Tab Bar with Liquid Morphing & Dynamic Laser Border

ByTabBar(
  tabs: const [
    ByTabItem(label: 'Overview', icon: Icons.dashboard_rounded),
    ByTabItem(label: 'Analytics', icon: Icons.analytics_rounded, badge: 'LIVE'),
    ByTabItem(label: 'Settings', icon: Icons.settings_rounded),
  ],
  selectedIndex: selectedIndex,
  onTabChanged: (index) => setState(() => selectedIndex = index),
  indicatorColor: const Color(0xFF00F5FF),
  enableLiquidMorphing: true,
  enableSelectionPulse: true,
  dynamicBorderColors: const [Colors.white, Color(0xFF00F5FF)],
);

---

ByBottomNav

Floating Frosted Dock with Selection Pulse

ByBottomNav(
  items: const [
    ByBottomNavItem(label: 'Home', icon: Icons.home_rounded),
    ByBottomNavItem(label: 'Explore', icon: Icons.explore_rounded, badgeText: 'HOT'),
    ByBottomNavItem(label: 'Profile', icon: Icons.person_rounded),
  ],
  selectedIndex: selectedIndex,
  onItemSelected: (index) => setState(() => selectedIndex = index),
  activeColor: const Color(0xFF00F5FF),
  enableSelectionPulse: true,
);

---

BySidebar

Responsive Vertical Navigation Sidebar

BySidebar(
  items: [
    const BySidebarItem(label: 'Dashboard', icon: Icons.space_dashboard_rounded),
    const BySidebarItem(label: 'Analytics', icon: Icons.query_stats_rounded, badge: 'NEW'),
    BySidebarItem.section(title: 'PREFERENCES'),
    const BySidebarItem(label: 'Settings', icon: Icons.settings_rounded),
  ],
  selectedIndex: selectedIndex,
  onItemSelected: (index) => setState(() => selectedIndex = index),
  isExpanded: isExpanded,
  onToggleExpand: (val) => setState(() => isExpanded = val),
  activeColor: const Color(0xFF00F5FF),
);

---

ByAutoShimmer

Automated Skeleton Placeholder Generator

ByAutoShimmer(
  isLoading: isLoading,
  style: const BySkeletonStyle(
    shimmerGradient: LinearGradient(
      colors: [Color(0xFF1E293B), Color(0xFF38BDF8), Color(0xFF1E293B)],
    ),
  ),
  child: UserProfileCard(user: user),
);

ByCard

1. Dynamic Motion Card (Hardware Sensors on Mobile, Cursor Parallax on Desktop/Web)

Zero boilerplate—automatically handles hardware gyro/accel on mobile and mouse cursor hover on desktop & web:

ByCard.dynamicSensor(
  colors: const [Color(0xFF38BDF8), Color(0xFF818CF8), Color(0xFFC084FC)],
  borderWidth: 2.0,
  borderRadius: BorderRadius.circular(20),
  padding: const EdgeInsets.all(20),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: const [
      Text('Dynamic Motion Card', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
      SizedBox(height: 8),
      Text('Border gradient dynamically reacts to phone tilt and cursor movement.'),
    ],
  ),
);

2. Gradient Border Card

ByCard.gradient(
  colors: const [Color(0xFFF43F5E), Color(0xFFFB923C)],
  borderWidth: 1.5,
  borderRadius: BorderRadius.circular(16),
  padding: const EdgeInsets.all(16),
  child: const Text('Card with static linear gradient border'),
);

3. Standard Card

ByCard(
  backgroundColor: const Color(0xFF1E293B),
  borderColor: const Color(0xFF334155),
  borderWidth: 1.0,
  borderRadius: BorderRadius.circular(16),
  padding: const EdgeInsets.all(16),
  child: const Text('Clean solid card surface'),
);

---

ByToast & Morphing Dialog

4. Simple Notification Toast

ByToast.show(
  context,
  message: 'Payment received successfully!',
  icon: Icons.check_circle_rounded,
  backgroundColor: const Color(0xFF10B981),
  position: ByToastPosition.top,
  slideDirection: ByToastSlideDirection.fromTop,
  animationType: ByToastAnimationType.bounce,
);

5. Corner Positioning (Desktop & Web)

Ideal for desktop and web layouts where notifications belong in the corner:

ByToast.show(
  context,
  title: 'Build Finished',
  message: 'Artifacts uploaded to production server.',
  position: ByToastPosition.topRight, // or topLeft, bottomRight, bottomLeft
  backgroundColor: const Color(0xFF0F172A),
  icon: Icons.cloud_done_rounded,
);

6. Background Opacity & Text Clamping

Create translucent floating toasts while keeping text crisp and readable:

ByToast.show(
  context,
  title: 'New Notification',
  message: 'This is a compact notification with a subtle translucent background.',
  backgroundOpacity: 0.85, // 85% opacity on surface, 100% on text/icon
  maxLines: 2,             // Clamped to 2 lines with ellipsis
  overflow: TextOverflow.ellipsis,
  backgroundColor: const Color(0xFF1E1B4B),
);

7. 1-Click Presets

// Success preset
ByToast.showSuccess(
  context,
  message: 'Order #1042 processed successfully.',
);

// Error preset at the bottom
ByToast.showError(
  context,
  message: 'Printer connection timed out.',
  position: ByToastPosition.bottom,
);

8. Tap & Drag to Expand into Dialog

Users can tap the message text or drag the toast towards the center of the screen to reveal full scrollable details:

ByToast.show(
  context,
  title: 'Order Status',
  message: 'Cashier transaction saved. Pull down or tap for breakdown.',
  icon: Icons.receipt_long_rounded,
  detailTitle: 'Transaction #1042 Details',
  detailMessage:
      '• Order ID: #TRX-1042\n'
      '• Cashier: Sarah W.\n'
      '• Items: Double Latte x2, Croissant x1\n'
      '• Total: Rp 78.000\n'
      '• Payment: QRIS Verified\n'
      '• Timestamp: 2026-09-15 14:32:10 WIB\n'
      '• Terminal: POS-01 (Offline Synced)',
  enableTapToExpand: true,
  enableDragToExpand: true,
);

---

ByDialog

9. Standalone Modal Dialogs & Button Customization

// Confirm Dialog with customized buttons
final confirmed = await ByDialog.confirm(
  context,
  title: 'Void Transaction?',
  message: 'This will reverse ledger balance for transaction #1042.',
  confirmText: 'Void Now',
  cancelText: 'Keep',
  confirmColor: const Color(0xFFEF4444),
  buttonBorderRadius: BorderRadius.circular(16), // Rounded or Pill buttons
  reverseButtonOrder: false,                     // true to place Confirm on the left
  cancelColor: const Color(0xFF1E293B),         // Optional solid fill for Cancel
);

if (confirmed == true) {
  // Handle confirmed action
}

---

BySequence

10. Sequential Scroll-Driven Animations

Create fluid, scroll-linked sequence reveals with zero boilerplate controllers or interpolation math:

BySequence(
  // 1:1 scroll scrubbing (GSAP style) or timed entrance transition
  scrub: true,
  trigger: 0.85, // Triggers at 85% viewport threshold
  spacing: 16.0,
  // Custom transform animation (opacity + slide up)
  animation: const BySequenceAnimation(
    opacity: BySequenceRange(0.0, 1.0),
    translateY: BySequenceRange(40.0, 0.0),
  ),
  children: [
    FeatureCard(title: 'Step 1: Discover'),
    FeatureCard(title: 'Step 2: Configure'),
    FeatureCard(title: 'Step 3: Deploy'),
  ],
)

---

License

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