Provide Widget for responsive Layout, Widget, and Text

The main purpose is about Responsive Text for Tablet, Mobile, and Web.

Large Screen

Medium Screen

Small Screen

Web Small Screen

Web Medium Screen

Web Large Screen

Installation

Add flutter_responsive_framework to pubspec.yaml

dependencies:
  flutter_responsive_framework: ^0.0.1

Usage

Import the Package

import 'package:flutter_responsive_framework/flutter_responsive_framework.dart';

Wrap MaterialApp with ResponsiveUIWidget widget

ResponsiveUIWidget( 
  builder: (context, orientation, screenType) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

Widget Size

Container(
  width: LayoutSizeHelper.h(50), // This will take 50% of the screen's width
  height: 30.h // This will take 30% of the screen's height
)

Font size

Text('Responsive Framework', style: TextStyle(fontSize: 16.px))

or

Text('Responsive Framework', style: TextStyle(fontSize: FontSizeHelper.NORMAL_TEXT_MEDIUM))

see FontSizeHelper for further detail

Responsive UI Helper Class provide custom Responsive Widget

ResponsiveUIHelper.buildTitleTextWidget(titleText);

ResponsiveUIHelper.buildNormalTextWidget(text);

ResponsiveUIHelper.buildPlatformWidget(
    tabletWidget: YourTabletWidget(),
    mobileWidget: YourMobileWidget(),
);

ResponsiveUIHelper.buildPlatformWidgetWithOrientation(
    tabletPortraitWidget: YourTabletPortraitWidget(),
    tabletLandScapetWidget: YourTabletLandScapeWidget(),
    mobilPortraitWidget: YourMobilePortraitWidget(),
    mobilLandScapeWidget: YourMobileLandScapeWidget(),
);

Community Support

If you have any suggestions or issues, feel free to open an issue

If you would like to contribute, feel free to create a PR