Flutter FlexUI

Flutter package for build Flexible UI for diference screens

Features

• adaptive text size
• widget replacement for different screen sizes
• adaptive row (changing the number of columns)
• device type detection, including TV

Getting Started

To use this package, add flutter_flexui as a dependency in your pubspec.yaml file.

dependencies:
  flutter_flexui: <latest_version>

Using

import 'package:flutter_flexui/flutter_flexui.dart';

Example

For a longer example see at /example folder.

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

Sponsoring

I'm working on my packages on my free-time, but I don't have as much time as I would. If this package or any other package I created is helping you, please consider to sponsor me so that I can take time to read the issues, fix bugs, merge pull requests and add features to these packages.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.

Libraries

flutter_flexui