flutter_flexui 0.1.6

Flutter package for build Flexible and beautiful UI to considers different screen sizes.

Flutter FlexUI

Flutter package for build Flexible UI for diference screens

Getting Started

To use this package, add flutter_flexui as a dependency in your pubspec.yaml file.

dependencies:
  flutter_flexui: ^0.1.6

Using

import 'package:flutter_flexui/flexui.dart';

Example

FlexRow

  FlexRow(
    colLg: 6,
    colMd: 3,
    colSm: 1,
    colMainAxisAlignment: MainAxisAlignment.spaceEvenly,
    colVerticalDirection: VerticalDirection.down,
    colMainAxisSize: MainAxisSize.max,
    rowMainAxisAlignment: MainAxisAlignment.spaceAround,
    rowVerticalDirection: VerticalDirection.down,
    rowMainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Text('1'),
      Text('2'),
      Text('3'),
      Text('4'),
      Text('5'),
      ],
  );

FlexText

  FlexText(
    "Test",
    styleSm: TextStyle(fontWeight: FontWeight.w200, fontSize: 12),
    styleMd: TextStyle(fontWeight: FontWeight.w600, fontSize: 16),
    styleLg: TextStyle(fontWeight: FontWeight.w900, fontSize: 22),
  );

FlexWidget

  FlexWidget(
    sm: Text("Small"),
    md: Text("Meddium"),
    lg: Text("Large"),
  );

Utils

Screen

  /// Return @ScreenSize
  /// @ScreenSize.XS (for phones - screens less than 768px wide)
  /// @ScreenSize.SM (for tablets - screens equal to or greater than 768px wide)
  /// @ScreenSize.MD (for small laptops - screens equal to or greater than 992px wide)
  /// @ScreenSize.LG (for laptops and desktops - screens equal to or greater than 1200px wide)
  Screen.screenSize(context);

  /// Get MediaQueryData
  Screen.mediaQuery(context);

  Screen.size(context);

  Screen.width(context);

  Screen.height(context);

  /// Get pixel ratio of screen
  Screen.pixelRatio(context);

  /// Screen diagonal
  Screen.diagonal(context);

  Screen.diagonalInches(context);

  Screen.statusBarHeight(context);

  Screen.bottomBarHeight(context);

  // Get value by screen size
  Screen.valueByScreen(context, xsObject, smObject, mdObject, lgObject);

Device

   Device.isDesktop

  Device.isMobile

  Device.isWeb

  Device.isWindows

  Device.isLinux

  Device.isMacOS

  Device.isAndroid

  Device.isFuchsia

  Device.isIOS

  /// Get @DeviceType
  Device.deviceType(context)

Authors

This project developed by DipDev Studio Team: @Dimoshka