Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv0.0.3

responsive_ui_kit

responsive_ui_kit helps you build adaptive, scalable Flutter UIs with centered layouts, responsive split views, screen size extensions, and auto text scaling.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
11
Likes
0
Pub points
160

Install package

flutter pub add responsive_ui_kit

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

responsive_ui_kit is a Flutter package designed to simplify the creation of adaptive and scalable user interfaces across multiple platforms. It provides centered layouts, responsive split views, screen size extensions, and automatic text scaling to ensure consistent UI behavior on devices of all sizes. Built with cross-platform support in mind, it streamlines development for Android, iOS, Web, macOS, Windows, and Linux. The package enhances UI responsiveness without requiring complex custom logic, making it ideal for apps that need to deliver a polished experience regardless of screen dimensions.

Use cases

  • Building cross-platform Flutter apps
  • Creating adaptive dashboard layouts
  • Designing responsive forms and cards
  • Implementing split-screen views
  • Ensuring consistent typography across devices
  • Developing scalable admin panels

Key features

  • Centered layout utilities
  • Responsive split view components
  • Screen size extension helpers
  • Auto text scaling based on device
  • Cross-platform compatibility
  • Simple API integration

Suitable for

  • Developers targeting multiple platforms
  • Teams building responsive dashboards
  • Apps requiring adaptive UIs
  • Frontend-focused Flutter developers
  • Projects with diverse screen size requirements
  • Rapid prototyping of responsive designs

Considerations

  • May require additional styling for complex layouts
  • Limited customization for advanced UI patterns
  • Depends on Flutter's rendering engine
  • Not optimized for highly dynamic content
  • Best suited for structured, grid-based designs
  • Requires understanding of responsive design principles

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

🌐 Flutter Responsive UI

A clean and flexible way to build responsive layouts in Flutter across mobile, tablet, and desktop — with minimal boilerplate and powerful layout tools.

✨ Features

🧱 Simple, composable layout widgets
📐 Screen-based constraints (context.width, context.height)
🔡 Auto-scaling text with context.scaleText(...)
🔀 Dynamic Row/Column layout with ResponsiveSplitBody
🧩 ResponsiveCenteredBody for centered readable content
⚙️ Customizable breakpoints
🧠 Inherited context with ResponsiveLayoutProvider
🧪 Built-in example app

📦 Installation

Add to your pubspec.yaml:

dependencies:
  responsive_ui_kit : ^0.0.2

Import the package.

import 'package:flutter_responsive_ui/responsive_ui_kit.dart';

Video

https://github.com/user-attachments/assets/6e97004f-8694-4885-a852-5918e5615e8a

Usage

Wrap your app with ```ResponsiveLayoutProvider```` to access screen size in the widget tree:

void main() {
  runApp(
    const ResponsiveLayoutProvider(
      child: MaterialApp(
        home: MyHomePage(),
      ),
    ),
  );
}

🧱 Core Widgets

✅ ResponsiveCenteredBody

Center your content and constrain its width (default maxWidth = 640).

ResponsiveCenteredBody(
maxWidth: 720,
backgroundColor: Colors.grey[200],
child: Text("Centered content"),
)
🔀 ResponsiveSplitBody

Automatically switches between vertical and horizontal layout:

ResponsiveSplitBody(
primaryChild: Text("Primary"),
secondaryChild: Text("Secondary"),
gap: 16,
)

Force layout direction:

ResponsiveSplitBody(
  forceVerticalLayout: true, // Always vertical
)

Custom breakpoints: use maxMobileWidth property of BreakPoints

 ResponsiveSplitBody(
breakPoints: BreakPoints(maxMobileWidth: 700),
)

📐 Context Extensions

  • Use helpful extensions anywhere:
final screenWidth = context.width;
final screenHeight = context.height;

Global method for scalable sizes

    Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text(
              'text widget scaling with screen size',
              style: TextStyle(
                color: Colors.amber,
                // getRespSize will scale your given size according to screen size and TextSizes is class where you can some standarad 
                //text sizes
                fontSize: getRespSize(context, size: TextSizes.titleMedium),
                // TextScalingValues parameter to control of scaling 

              ),
            ),
            Icon(Icons.home, size: getRespSize(context, size: 22))
          ],
        ),

🛠️ Configuration

Feature Usage
Max width ResponsiveCenteredBody(maxWidth: ...)
Custom breakpoints BreakPoints(maxMobileWidth: ...)
Gap between children gap: 20 in ResponsiveSplitBody
Flex ratios primaryFlex, secondaryFlex
Cross axis alignment crossAxisAlignment: CrossAxisAlignment.start

💬 Support

  • 🐛 Issues → https://github.com/kFasih132/flutter_responsive_ui
  • 📖 Docs → This README + example app
  • 🌟 Like it? Star it on pub.dev
Built with ❤️ by Fasih us Rehman for the Flutter community

Categories

Responsive UI

Source repository

Projects using this package

No data available yet.