responsive_kakapo

responsive_kakapo is a Flutter package designed to make building responsive UIs easier. It provides utility methods to handle different screen sizes and densities, allowing your app to adapt to various devices seamlessly.

Features : 1-*Responsive Layouts: Automatically scale dimensions based on screen size. 2-*Orientation Handling: Adjust layouts for both portrait and landscape orientations. 3-*Text Scaling: Scale text sizes according to device density and user preferences. 4-*Padding and Insets: Handle top, bottom, and view insets to ensure UI elements are not obscured by notches or system bars.

Installation: Add responsive_kakapo to your pubspec.yaml: dependencies: responsive_kakapo: ^0.0.1

Then run flutter pub get to install the package.

Usage Import the Package First, import the package into your Dart file: import 'package:responsive_kakapo/responsive_kakapo.dart';

ResponsiveService Class The ResponsiveService class provides a set of static methods to help you adapt your app's UI based on the device's screen size and orientation.

Example:

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

class MyResponsiveWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Responsive Example'), ), body: Center( child: Container( width: ResponsiveService.fullScreenWidth(ratio: 0.8), height: ResponsiveService.fullScreenHeight(ratio: 0.3), color: Colors.blueAccent, child: Center( child: Text( 'This container scales to 80% width and 30% height of the screen.', textAlign: TextAlign.center, style: TextStyle(fontSize: 16.sp), // Using the SizeExtension for scaling text ), ), ), ), ); } }

SizeExtension The SizeExtension is an extension on the num type that allows you to easily scale dimensions based on the device's screen size.

Example:

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

class MyResponsiveText extends StatelessWidget { @override Widget build(BuildContext context) { return Text( 'Responsive Text', style: TextStyle( fontSize: 16.sp, // Scales text size ), ); } }

Available Extensions: w - Scales width based on screen size. h - Scales height based on screen size. r - Scales radius, useful for rounded corners. sp - Scales text size, making text responsive to screen size and density.

Orientation Handling The ResponsiveService class also provides methods to check and adapt to the device's orientation:

Orientation currentOrientation = ResponsiveService.orientation();

if (currentOrientation == Orientation.portrait) { // Do something in portrait mode } else { // Do something in landscape mode }