Skip to content

Latest commit

 

History

History
47 lines (36 loc) · 1.08 KB

responsive.md

File metadata and controls

47 lines (36 loc) · 1.08 KB
Raw

Responsive

How to import it?

import 'package:skynexui_responsive_stylesheet/skynexui_responsive_stylesheet.dart';
`Comming Soon...`

How to use it?

Dart

  • Combined with Breakpoints, you are allowed to provide different values for each resolution in a declarative way using the .value method:
class WidgetWithResponsiveOutput extends StatelessWidget {
  const WidgetWithResponsiveOutput({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    var responsive = Responsive(context);
    var outputValue = responsive.value({
      Breakpoints.xs: 'xs',
      Breakpoints.sm: 'sm',
      Breakpoints.md: 'md',
      Breakpoints.lg: 'lg',
      Breakpoints.xl: 'xl',
    });
    return Text("Screen: $outputValue");
  }
}
  • responsive.screenWidth: It's a easy way to access screen width and return it's value in different ways
// Screen Width Size => 1000
var outputValue = responsive.screenWidth.value; // 1000
var outputValue = responsive.screenWidth.percent(40); // 400

JavaScript

  • Comming Soon...