Awaitware UI Utilities #

Powerful Flutter UI Toolkit - Write beautiful, maintainable Flutter UIs with 1500+ chainable extension methods.

Build stunning UIs faster with intuitive, chainable methods that work perfectly with Flutter's widget system. A utility-first approach to Flutter development.

What's New in v4.0.0 #

Navigation - asDrawerContent(), withBottomNav(), AwNav.appBar(), .drawer(), .sideNav(), .breadcrumb()
Slivers - asSliver(), sliverList(), sliverGrid(), customScrollView(), AwSliver.appBar(), .appBarLarge()
Tables - tableCard(), tableBordered(), AwTable.simple(), .striped(), .bordered(), .compact()
Stepper/Timeline - withStepIndicator(), stepper(), timeline(), AwTimeline.progress(), .vertical(), .numbered()
Drag & Drop - asDraggable(), asDragTarget(), reorderableList(), AwDragDrop.dropZone()
Internationalization - rtl(), ltr(), paddingStart(), alignStart(), AwI18n.isRtl(), .responsive()
Platform Adaptive - adaptive(), cupertinoOnly(), materialOnly(), AwAdaptive.button(), .indicator(), .scaffold()

What's New in v3.0.0 #

Form Inputs - Pre-styled inputs: inputRounded(), inputBordered(), inputFilled(), validation states, AwInput builder
Image Extensions - imgCircle(), imgRounded(), imgBordered(), imgShadow(), imgOverlay(), imgGrayscale(), AwImage helpers
Shimmer/Skeleton - Loading states: skeleton(), AwSkeleton.text(), .circle(), .card(), .listTile(), .grid()
Badges & Chips - withBadge(), withDotBadge(), badge(), chip(), chipDeletable(), AwBadge.chipGroup()
Avatars - avatarCircle(), avatarXs()-avatarXl(), AwAvatar.initials(), .icon(), .group(), .withStatus()
Dialogs - asDialog(), asBottomSheet(), AwDialog.alert(), .confirm(), .confirmDelete(), .snackbar(), .loading()
Dividers - withDividerBelow(), AwDivider.thin(), .dashed(), .dotted(), .withText(), .gradient(), .space()
List Tiles - listTileCard(), listTileBordered(), AwListTile.simple(), .settings(), .contact(), .notification()
Clip Shapes - clipOval(), clipTriangle(), clipDiamond(), clipHexagon(), clipStar(), clipPolygon(), shapeCircle()
Scroll Effects - scrollWithFade(), scrollBouncing(), scrollSnap(), horizontalScroll(), pageView() with indicators
Tooltips & Popups - withTooltip(), withStyledTooltip(), withPopupMenu(), withPopover(), AwPopupItem helpers
Accessibility - semanticLabel(), semanticButton(), excludeSemantics(), focusable(), AwA11y utilities

What's New in v2.0.0 #

Custom Values - Use hex colors like bgHex('#0f172a'), custom spacing, sizing
Responsive Design - Breakpoint system (xs, sm, md, lg, xl)
Grid System - CSS Grid-like responsive layouts
Gradients - Linear, radial, and preset gradients
Animations - Fade, slide, scale, spin, bounce, pulse, shake
Dark Mode - Theme-aware styling utilities
Button & Card Presets - Pre-styled components
Typography Presets - h1-h6, body, caption, label

Features #

1500+ Extension Methods - Comprehensive utilities covering all UI needs
Chainable API - Combine multiple utilities for clean, readable code
Custom Values - Use any hex color, custom spacing, or sizing
Type-Safe - Full Dart type safety with IDE autocomplete
Zero Dependencies - Only requires Flutter SDK
Performance Optimized - Lightweight extensions with minimal overhead

Why Awaitware UI Utilities? #

Before (Traditional Flutter) #

Padding(
  padding: const EdgeInsets.all(16),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12),
      boxShadow: [
        BoxShadow(
          color: Color(0x1A000000),
          offset: Offset(0, 10),
          blurRadius: 15,
        ),
      ],
    ),
    child: Text(
      'Hello World',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
        color: Colors.blue.shade600,
      ),
    ),
  ),
)

After (With Awaitware UI Utilities) #

Text('Hello World')
  .text2Xl()
  .fontBold()
  .textBlue600()
  .p6()
  .bgWhite()
  .roundedXl()
  .shadowLg()
  .p4()

60-70% less code! More readable, easier to maintain, and faster to write.

Installation #

Add to your pubspec.yaml:

dependencies:
  awaitware_ui_utilities: ^3.0.0

Then run:

flutter pub get

Quick Start #

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            // Beautiful card with extensions
            Text('Welcome!')
              .text4Xl()
              .fontBold()
              .textCenter()
              .p6()
              .bgBlue600()
              .roundedXl()
              .shadowLg()
              .m4(),

            // Quick button layouts
            [
              Text('Cancel').textGray700().px4().py2().border().roundedLg(),
              Text('Confirm').textWhite().px4().py2().bgGreen600().roundedLg(),
            ].gap(12).row(),
          ],
        ).p4(),
      ),
    );
  }
}

Custom Values (New in v2.0.0) #

Use any custom value - hex colors, custom spacing, custom sizing:

// Custom hex colors
Container().bgHex('#0f172a')           // Hex string
Container().bgColor(0xFF0f172a)        // Hex int
Container().bgRgb(15, 23, 42)          // RGB values
Text('Hello').textHex('#3b82f6')       // Custom text color

// Custom spacing
Container().pCustom(20)                // 20px padding
Container().mCustom(15)                // 15px margin
Container().pTRBL(10, 20, 10, 20)      // Individual padding

// Custom sizing
Container().wCustom(300)               // 300px width
Container().hCustom(200)               // 200px height
Container().wPercent(50)               // 50% width
Container().square(100)                // 100x100px

// Custom decoration
Container().roundedCustom(16)          // 16px radius
Container().borderCustom(Colors.blue, 2)
Container().shadowCustom(blurRadius: 10)

// Custom typography
Text('Hello').fontSize(24)             // 24px font size
Text('Hello').fontW(600)               // Font weight 600
Text('Hello').lineHeight(1.5)          // Line height 1.5

Responsive Design (New in v2.0.0) #

Build responsive layouts with breakpoint utilities:

// Show/hide based on screen size
Container().showOnMobile()      // Show only on xs/sm
Container().hideOnMobile()      // Hide on xs/sm
Container().lgAndUp()           // Show on lg and above

// Responsive grid
[card1, card2, card3, card4].gridResponsive(
  xsCols: 1,   // 1 column on mobile
  smCols: 2,   // 2 columns on tablet
  lgCols: 4,   // 4 columns on desktop
  gap: 16,
)

// Responsive builder
ResponsiveBuilder(
  xs: MobileLayout(),
  md: TabletLayout(),
  lg: DesktopLayout(),
)

Gradients (New in v2.0.0) #

// Custom gradients
Container().gradientToR(colors: [Colors.blue, Colors.purple])
Container().gradientToB(colors: [Colors.red, Colors.orange])
Container().gradientRadial(colors: [Colors.white, Colors.blue])

// Preset gradients
Container().gradientSunset()    // Orange to pink
Container().gradientOcean()     // Blue to cyan
Container().gradientNeon()      // Pink to purple to blue
Container().gradientForest()    // Green shades

Animations (New in v2.0.0) #

// Entry animations
Container().fadeIn()
Container().slideInLeft()
Container().slideInUp()
Container().scaleIn()

// Continuous animations
Icon(Icons.sync).spin()         // Spinning loader
Container().pulse()             // Pulsing effect
Container().bounce()            // Bouncing effect

// Interactive animations
Container().tapScale()          // Scale on tap
Container().hoverScale()        // Scale on hover
Container().hoverElevate()      // Elevate on hover

Button Presets (New in v2.0.0) #

// Primary buttons
Text('Submit').btnPrimary(onTap: () {})
Text('Submit').btnPrimaryLg(onTap: () {})

// Variants
Text('Cancel').btnSecondary(onTap: () {})
Text('Learn More').btnOutline(onTap: () {})
Text('Delete').btnDanger(onTap: () {})
Text('Save').btnSuccess(onTap: () {})

// Special buttons
Text('Get Started').btnGradient(onTap: () {})
Text('Subscribe').btnPill(onTap: () {})
Text('Loading...').btnLoading(isLoading: true)

// Icon buttons
Icon(Icons.add).btnIconFilled(onTap: () {})
Icon(Icons.close).btnIconOutline(onTap: () {})

Card Presets (New in v2.0.0) #

// Basic cards
Column(...).card()              // Default card with shadow
Column(...).cardBordered()      // Card with border
Column(...).cardElevated()      // Stronger shadow
Column(...).cardFlat()          // No shadow, subtle bg

// Interactive cards
Column(...).cardHoverable()     // Lifts on hover
Column(...).cardClickable(onTap: () {})

// Colored cards
Column(...).cardPrimary()       // Blue card
Column(...).cardDanger()        // Red card
Column(...).cardSuccess()       // Green card
Column(...).cardWarning()       // Orange card

// Gradient cards
Column(...).cardGradient(colors: [Colors.blue, Colors.purple])

Typography Presets (New in v2.0.0) #

// Headings
Text('Title').h1()              // 48px bold
Text('Title').h2()              // 36px bold
Text('Title').h3()              // 30px semibold
Text('Title').h4()              // 24px semibold

// Body text
Text('Content').bodyLarge()     // 18px
Text('Content').bodyBase()      // 16px
Text('Content').bodySmall()     // 14px

// Labels & captions
Text('Label').label()           // 14px medium
Text('Caption').caption()       // 12px

// Special
Text('Quote').quote()           // Italic
Text('code').code()             // Monospace

// Transform
Text('hello').uppercase()       // HELLO
Text('HELLO').lowercase()       // hello
Text('hello').capitalize()      // Hello

Gesture Extensions (New in v2.0.0) #

// Tap handlers
Container().onTap(() => print('Tapped!'))
Container().onDoubleTap(() => print('Double tap!'))
Container().onLongPress(() => print('Long press!'))

// Cursor
Container().cursorPointer()
Container().cursorGrab()

// Hover
Container().onHover(
  onEnter: (e) => print('Enter'),
  onExit: (e) => print('Exit'),
)

Dark Mode (New in v2.0.0) #

// Theme-aware backgrounds
Container().themeBackground()           // Adapts to theme
Container().darkBgGray900()             // Dark mode: gray900
Container().lightBgWhite()              // Light mode: white

// Theme-aware text
Text('Hello').darkTextWhite()           // Dark mode: white
Text('Hello').lightTextGray900()        // Light mode: gray900

// Theme widgets
ThemeContainer(
  lightColor: Colors.white,
  darkColor: Colors.grey.shade900,
  child: content,
)

The `aw` Helper Class #

The aw class provides convenient helper methods:

// Widget Creators
aw.text('Hello')                // Create Text widget
aw.container()                  // Create Container widget
aw.icon(Icons.star)             // Create Icon widget

// Layout Builders
aw.row([Widget1(), Widget2()])      // Create Row
aw.column([Widget1(), Widget2()])   // Create Column
aw.stack([Widget1(), Widget2()])    // Create Stack

// Spacing Helpers
aw.spaceV(16)                   // Vertical spacing
aw.spaceH(16)                   // Horizontal spacing
aw.space4()                     // 16px space

// Quick Helpers
aw.button('Click', onPressed: () {})
aw.card(child: Widget)
aw.divider()

Complete Extension Reference #

Spacing (90+ methods) #

Container().p4()     // 16px padding all sides
Container().px4()    // 16px horizontal padding
Container().py6()    // 24px vertical padding
Container().m4()     // 16px margin all sides
Container().mxAuto() // Center horizontally

Colors (200+ methods) #

Container().bgBlue600()
Container().bgWhite()
Text('Hello').textRed600()
Text('Info').textBlue600()

Typography (60+ methods) #

Text('Title').text4Xl().fontBold()
Text('Body').textBase().fontNormal()
Text('Link').underline().textBlue600()

Sizing (50+ methods) #

Container().w64()      // 256px width
Container().wFull()    // 100% width
Container().maxWLg()   // Max 512px
Icon().size16()        // 64x64 square

Decoration (40+ methods) #

Container().roundedXl()     // 12px radius
Container().border()        // 1px border
Container().shadowLg()      // Large shadow
Container().opacity50()     // 50% opacity

Layout (30+ methods) #

Container().center()
Container().expanded()
Image().aspectVideo()   // 16:9
Column().scrollable()

Flex (20+ methods) #

[Item1(), Item2()].row()
[Item1(), Item2()].column()
[Item1(), Item2(), Item3()].gap(8).row()

Transform (15+ methods) #

Icon().rotate45()
Container().scale110()
Image().flipH()

Real-World Example #

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Beautiful Card').h3(),

    Text('Built with Awaitware utilities')
      .textGray600()
      .pt2(),

    [
      Text('Learn More').btnPrimary(onTap: () {}),
      Text('Cancel').btnOutline(onTap: () {}),
    ].gap(12).row(),
  ],
)
  .p6()
  .bgWhite()
  .roundedXl()
  .shadowLg()
  .m4()
  .fadeIn()

Documentation #

Complete API Reference - All 800+ utilities
Example Apps - Working code examples
Changelog - Version history

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

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

Made with love for Flutter Developers

A modern utility-first toolkit for Flutter development