flutter_flexui 0.1.0+1

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.0+1

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

ScreenSize

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

  // Get height of status bar
  ScreenSize.statusBarHeight(context);

  // Get height of bottom bar
  ScreenSize.bottomBarHeight(context);

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

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

FlexUI

  // Returns true if the screen size is similar to a mobile device
  FlexUI.isMobile(context);

Authors

This project developed by DipDev Studio Team: @Dimoshka