size_builder 0.0.8

size_builder: ^0.0.8 copied to clipboard

📱💻📱

Features #

Make a proportion and proportion to the length, width, and diameter of the screens of all kinds to get a responsive design.

Getting started #

Run this command:

With Flutter:

 $ flutter pub add size_builder

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  size_builder: ^0.0.8

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:size_builder/size_builder.dart';

Responsive design #

You can make a smooth multi-form screen

How to use #

At first, you should to add in first screen class

for Web

WebAppSize().init(context);

for Mobile

MobileAppSize().init(context);

Example #

for Mobile

class HomeLayout extends StatelessWidget {
  const HomeLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    MobileAppSize().init(context);
    
    return Scaffold();
  }
}

for Web

class HomeLayout extends StatelessWidget {
  const HomeLayout({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    WebAppSize().init(context);
    
    return Scaffold();
  }
}

Then you can use this.

WebAppSize.Responsive(
        
        Size1: WebAppSize.screenWidth! > 1300,
        Screen1: Container(
          color: Colors.red,
        ),

        Size2: WebAppSize.screenWidth! <= 1300 && WebAppSize.screenWidth! >= 900,
        Screen2: Container(
          color: Colors.blue,
        ),
        
        Size3: WebAppSize.screenWidth! < 900 && WebAppSize.screenWidth! >= 700,
        Screen3: Container(
          color: Colors.amber,
        ),
        
        Size4: WebAppSize.screenWidth! < 700,
        Screen4: Container(
          color: Colors.green,
        ),

        ScreenElse: Container(),
      ),

you can use it for many things:

Container Size #

Container(

 height : MobileAppSize.Height200,
 width : MobileAppSize.Width390,

),

Or #

Container(

 height : WebAppSize.Height200,
 width : WebAppSize.Width390,

),

You can add it for font size

Container(

height : WebAppSize.Height200,
width : WebAppSize.Width390,

child :Text('hello flutter', 

 style: TextStyle(
  
     fontSize: MobileSize.Size20,
   
    ),
  )
 
),

Stay tuned for strong updates in the future. #

With best regards, Samer Abd Al Ati