adaptive_ui 0.1.0 adaptive_ui: ^0.1.0 copied to clipboard
A simple helper class to help you creating Adaptive UI easily.
AdaptiveUI #
A simple helper class to help you creating Adaptive UI easily.
NOTE: This will work well if you have any sort of design file. like - XD, PSD, Figma, AI, Sketch etc because you can get the design height and width from the file. Because this package depends on the actual design size.
Features #
- Adaptive Font size
- Adaptive Height
- Adaptive Width
Helper available #
All accepts dynamic
as a parameter but you will always provide int
or double
Extensions
.sp
.h
.w
Methods
sp()
w()
h()
Effect #
How to use #
- Install the dependency
flutter pub add adaptive_ui
Then in your constants
file add two contstants as screenWidth
and screenHeight
and set the value as per design size, Or you can use these value directly in every page you want to make adaptive.*
* Design size the size of the design which is in XD, PSD or any file, provided by the Designer.
In your UI/Page
For example home_page.dart
import "package:adaptive_ui/adaptive_ui.dart";
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Initialize the adaptive UI helper class
AdaptiveUI().init(
context: context,
height: 812, // Design Height
width: 375, // Design Width
);
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
width: double.infinity,
child: Text("Adaptive UI is Awesome!"),
),
),
),
);
}
}
Now to use this
For fonts/texts
Text(
"Some text",
style: TextStyle(fontSize: 16.sp), // .sp extension method
),
You also can use methods intead extension
Text(
"Some text",
style: TextStyle(fontSize: sp(16)), // sp() helper method
),
For Height/Width
Container(
height: 200.h, // .h extension method
width: 200.w, // .w extension method
),
Same for the height/width you can use methods as well.
Container(
height: h(200), // h() helper method
width: w(200), // w() helper method
),
More details...