flutter_flexui 0.1.5

Flutter Android iOS

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.5

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

6
likes
90
pub points
56%
popularity

Publisher

dipdev.studio

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

Homepage
Repository (GitLab)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

device_info, flutter, universal_html, universal_io

More

Packages that depend on flutter_flexui