designpx

Description:

designpx

Implementation responsive screen with design ux/ui , You just need to add the coordinates of the design to be applied to and start working in the normal mode .
Features #
Responsive screen .
Getting started #
You just need to add the coordinates of the design to be applied to and start working in the normal mode .
Usage #
Setup the Package firstly and set the package in main Widget before your basic widget after that you can use the size for pixels like :
int (width: w25) , double (width: w(25)) .
int (height: h38) , double (height: h(38)) .
int (fontSize: f14) , double (fontSize: f(14)) .
And you can use the size For Percentage like :
double (width: wx(25)) , Full width use wx100 .
double (height: hx(38)) , Full height use hx100 .
it's become responsive with default design and different screens .
import 'package:designpx/designpx_init.dart';
copied to clipboard
DesignPX(width: 390, height: 844, child: HomePage());
copied to clipboard
class MyApp extends StatelessWidget {
const MyApp({super.key});
This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home:
const DesignPX(child: HomePage()),
// Default Device Screen IPhone 12 Pro with width:390px , height:844px ,
// you can change it , just you need enter new width and height like this :
// const DesignPX(width: 375, height: 812, child: HomePage()),
);
}
}
copied to clipboard
class Home extends StatelessWidget {
const Home({super.key});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.orangeAccent,
width: wx(90), // its mean width 90%
height: hx100, // its mean full height 100%
child: Container(
color: Colors.orangeAccent,
width: w300,
height: h500,
child: Text(
'Home Page',
style: TextStyle(fontSize: f14),
),
)
);
}
}
copied to clipboard
Additional information #
Implementation responsive screen with design ux/ui .