Description:

widget sizer

widget_sizer #
Create stunning, responsive UIs effortlessly with widget_sizer, ensuring a flawless experience across all mobile devices and tablets.
Introduction #
widget_sizer provides a comprehensive solution for creating responsive UIs that adapt seamlessly across various screen sizes and device types. It includes utilities to scale UI elements proportionally based on the screen dimensions.
Getting started #
Installation #
Add the following line to your pubspec.yaml:
dependencies:
widget_sizer : ^1.0.0
copied to clipboard
Add the following imports to your Dart code: #
import 'package:widget_sizer/widget_sizer.dart';
copied to clipboard
Usage #
Call the SizerConfig().init() method within your app's build method of your main widget:
@override
Widget build(BuildContext context) {
// Initialize SizeConfig
SizerConfig().init(context);

return MaterialApp(
title: 'SizeConfig Demo',
home: HomePage(),
);
}
copied to clipboard
Scaling Double Values #
All methods in this package return a double value which can be directly used in widgets that require a double value:
// Example
Text("Size Matters",style:
TextStyle(fontSize: SizerConfig.moderateScale(20),),
),

SizedBox(
height: SizerConfig.verticalScale(30),
),

Container(
width:SizeConfig.scale(30),
height: SizerConfig.verticalScale(30),
),
copied to clipboard
Scaling EdgeInsets #
For widgets that require an EdgeInsetsGeometry value, use the method within an EdgeInsets constructor:
// Example
Padding(
padding: EdgeInsets.all(SizerConfig.scale(40)),
child: Widget(),
)
copied to clipboard
Methods #
init(BuildContext context) #
This method initializes the SizeConfig class with the screen dimensions of the current device. It must be called before using any of the scaling methods. (It is recommended to call this method in you main.dart file to access the SizeConfig across the app)
static double scale(double size) #
Scales the given size proportionally based on the screen width.
static double verticalScale(double size) #
Scales the given size proportionally based on the screen height.
static double moderateScale(double size, [double factor = 0.5]) #
Applies a moderate scaling to the given size based on the screen width. The optional factor parameter allows you to control the degree of scaling.
static double moderateVerticalScale(double size, [double factor = 0.5]) #
Applies a moderate scaling to the given size based on the screen height. The optional factor parameter allows you to control the degree of scaling.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter