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: ^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

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)
  context.screenSize;
  /// Get MediaQueryData
  context.mediaQuery;
  context.screenSize;
  context.screenWidth;
  context.screenHeight;
  /// Get pixel ratio of screen
  context.pixelRatio;
  /// Screen diagonal
  context.diagonal;
  context.diagonalInches;
  context.statusBarHeight;
  context.bottomBarHeight;
  // Get value by screen size
  context.valueByScreen(xsObject, smObject, mdObject, lgObject);

Device

   context.isDesktop
  context.isMobile
  context.isWeb
  context.isWindows
  context.isLinux
  context.isMacOS
  context.isAndroid
  context.isFuchsia
  context.isIOS
  /// Get @DeviceType
  context.deviceType

Authors

This project developed by DipDev Studio Team: @Dimoshka

Libraries

device
flex_row
flex_text
flex_widget
flexui
screen