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

Libraries

flex_row
flex_text
flex_widget
flexui
screen_size