Flutter Adaptive Kit #

A comprehensive Flutter package for building responsive and adaptive user interfaces. Combines the best features from popular packages like flutter_screenutil, responsive_builder, responsive_framework, and sizer into one unified API.

Features #

• 🎯 Device Type Detection - Detect phone, tablet, desktop, and foldable devices
• 📐 Design Size Scaling - Scale your UI based on your Figma/XD design size
• 🔧 Extension Methods - Simple .aw, .ah, .asp, .ar, .diagonal, .diameter extensions
• 🏗️ Builder Widgets - AdaptiveBuilder and ResponsiveBuilder for different layouts
• 📊 Screen Size Categories - Fine-grained xs/sm/md/lg/xl breakpoints
• 👁️ Visibility Widgets - Conditionally show/hide widgets based on screen
• 📏 Pre-built Spacing - Consistent spacing that scales across devices
• 🌐 Platform Detection - Detect iOS, Android, web, macOS, Windows, Linux
• 📱 Landscape Support - Separate breakpoints for portrait and landscape
• ⏳ ensureScreenSize() - Wait for screen size on web/desktop before init
• ✍️ AdaptiveText - Auto-scaling text widget

Installation #

Add this to your pubspec.yaml:

dependencies:
  flutter_adaptive_kit: ^0.1.0

Quick Start #

1. Wrap your app with AdaptiveScope #

import 'package:flutter_adaptive_kit/flutter_adaptive_kit.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Optional: wait for screen size on web/desktop
  await AdaptiveUtils.ensureScreenSize();
  
  runApp(
    AdaptiveScope(
      // Set your Figma/XD design size
      designSize: const DesignSize(
        phone: Size(375, 812),    // iPhone 13 Mini
        tablet: Size(768, 1024),  // iPad
        desktop: Size(1440, 900),
      ),
      child: MaterialApp(
        home: MyHomePage(),
      ),
    ),
  );
}

2. Use Extension Methods #

// Set context for extensions (required once per build method)
AdaptiveContext.setContext(context);

Container(
  width: 200.aw,     // Adaptive width (scales with screen)
  height: 100.ah,    // Adaptive height
  padding: EdgeInsets.all(16.ar),  // Adaptive radius
  child: Text(
    'Hello!',
    style: TextStyle(fontSize: 16.asp),  // Adaptive font size
  ),
)

// Percentage-based sizing
Container(
  width: 50.pw,   // 50% of screen width
  height: 25.ph,  // 25% of screen height
)

// Advanced scaling
Container(
  width: 100.diagonal,  // Scales by width * height
  height: 50.diameter,  // Scales by max(width, height)
)

3. Use AdaptiveBuilder for Different Layouts #

AdaptiveBuilder(
  phone: (context, info) => PhoneLayout(),
  tablet: (context, info) => TabletLayout(),
  desktop: (context, info) => DesktopLayout(),
)

4. Use Context Extensions #

// Device type checks
if (context.isPhone) { ... }
if (context.isTablet) { ... }
if (context.isDesktop) { ... }

// Get responsive values
final padding = context.adaptive<double>(
  phone: 16,
  tablet: 24,
  desktop: 32,
);

// Screen size checks
final columns = context.responsive<int>(
  xs: 1, sm: 2, md: 3, lg: 4, xl: 6,
);

// Conditional helpers
if (context.largerThan(DeviceType.phone)) { ... }
if (context.smallerThan(DeviceType.desktop)) { ... }

5. Use AdaptiveText for Auto-scaling #

AdaptiveText(
  'Hello World',
  style: TextStyle(fontSize: 16), // Auto-scaled!
)

6. Platform Detection #

if (PlatformUtils.isWeb) { ... }
if (PlatformUtils.isMobile) { ... }
if (PlatformUtils.isDesktop) { ... }
if (PlatformUtils.isIOS) { ... }

7. Landscape Breakpoints #

AdaptiveScope(
  breakpoints: AdaptiveBreakpoints.withLandscape(
    phone: 600, tablet: 1024, desktop: 1440,
    landscapePhone: 800, landscapeTablet: 1200, landscapeDesktop: 1600,
  ),
  child: MyApp(),
)

8. Orientation-Specific Layouts #

// Simple orientation builder
OrientationLayoutBuilder(
  portrait: (context, info) => PortraitLayout(),
  landscape: (context, info) => LandscapeLayout(),
)

// Or use the simpler widget version
OrientationLayout(
  portrait: PortraitWidget(),
  landscape: LandscapeWidget(),
)

// Get values based on orientation
final columns = context.orientationValue<int>(
  portrait: 2,
  landscape: 4,
);

// Combine device type + orientation
final padding = context.adaptiveOrientation<double>(
  phonePortrait: 16,
  phoneLandscape: 8,
  tabletPortrait: 24,
  tabletLandscape: 16,
);

API Reference #

Configuration Classes #

Extension Methods on num #

Builder Widgets #

Text Widgets #

Visibility Widgets #

Utilities #

Example #

See the example folder for a complete demo app.

cd example
flutter run

License #

BSD-3-Clause License - see LICENSE for details.