responsive_ui_kit 0.0.3
responsive_ui_kit: ^0.0.3 copied to clipboard
responsive_ui_kit helps you build adaptive, scalable Flutter UIs with centered layouts, responsive split views, screen size extensions, and auto text scaling.
๐ 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