Provide Widget for responsive Layout, Widget, and Text

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

Tablet

Mobile

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