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';

 DesignPX(width: 390, height: 844, child: HomePage());

 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()),
     );
   }
 }

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),
      ),
    )
    );
  }
}

Additional information

Implementation responsive screen with design ux/ui .

Libraries

designpx