flutter_flexui 1.3.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: ^1.3.0

Using

import 'package:flutter_flexui/flutter_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"),
  );

FlexBuilder

  FlexBuilder(
      builder: (context, screen) {
        return Container();
      },
    );

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;

  /// Get Orientation
  context.orientation;

  /// Width of Screen
  context.screenWidth;

  /// Height of Screen
  context.screenHeight;

  /// Get pixel ratio of screen
  context.pixelRatio;

  /// Screen diagonal
  context.diagonal;

  /// Screen diagonal in inc
  context.diagonalInches;

  /// Get height of status bar
  context.statusBarHeight;

  /// Get height of bottom bar
  context.bottomBarHeight;

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

Device

  context.isDesktop

  context.isTablet

  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