Esizer - A Flutter package provide responsive, dynamic, configurable size for each device screen size

Overview

ESizer

A Flutter package provide responsive, dynamic, configurable size for each device screen size.

Features

  • Responsive, adaptive size
  • Dynamic load size data from predefined files from assets

Without using this packages:

Getting Started

This package is use to develop app which use Bloc pattern clearer, quicker, easier by wrapping complicated bloc usage.

Usage

Create size resource data file and add to pubspec

  • Create size resource data files (currently support only yaml format) in default folder : " assets/dimens". For example:
homeScreen:
  contentPadding: 10
  iconSize: 50
  titleTextSize: 24
  descriptionTextSize: 16
  widgetSpaceSize: 16
  • Add assets folder path to pubspec.yaml file:
flutter:
  # ... 
  assets:
    - assets/dimens/

Config and use in application

  • Make sure WidgetsFlutterBinding.ensureInitialized(); main function before application start:
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

Using widget

ESizer(
  builder: (BuildContext context) {
    return const ResponsiveHomePage();
  },
  sizeFileResolver: ({BoxConstraints? boxConstraints, Orientation? orientation}) => "phone.yaml",
)

Above code for sizeFileResolver function use very simple logic: return name of resource file. You can also add more logic to specify how to choose which size data files to load in.

For example: load 'phone.yaml' or 'table.yaml' depend on width and orientation of device

  String _resolveSizeDataFile({BoxConstraints? boxConstraints, Orientation? orientation}) {
  if (boxConstraints != null) {
    if (Platform.isAndroid || Platform.isIOS) {
      if (orientation == Orientation.portrait) {
        if (boxConstraints.maxWidth < 600) {
          return "phone.yaml";
        } else {
          return "tablet.yaml";
        }
      } else if (orientation == Orientation.landscape) {
        if (boxConstraints.maxHeight < 600) {
          return "phone.yaml";
        } else {
          return "tablet.yaml";
        }
      } else {
        return "phone.yaml";
      }
    } else {
      return "phone.yaml";
    }
  }
  return "phone.yaml";
}

Code generation for size data

By using command 'esizer:generate' you can generate dart code for more convenient

flutter pub run esizer:generate -I assets/dimens -o dimen_keys.g.dart -n DimenKeys 

Then we have class like:

abstract class DimenKeys {
  static const homeScreenIconSize = 'homeScreen.icon_size';
  static const homeScreenTitleTextSize = 'homeScreen.titleTextSize';
  static const homeScreenDescriptionTextSize = 'homeScreen.descriptionTextSize';
  static const homeScreenWidgetSpaceSize = 'homeScreen.widgetSpaceSize';
  static const homeScreenContentPadding = 'homeScreen.contentPadding';
}

After that, in any where in application we use it as bellow:

Container (
  padding:EdgeInsets.all(DimenKeys.homeScreen_content_padding.sw),
  color: Colors.white)

Issues and feedback

Create issues and add appropriate label on Github issues or into our mailing list For more detail see CONTRIBUTING

Contributor

License

MIT

You might also like...

Flutter plugin for creating static & dynamic app shortcuts on the home screen.

Flutter plugin for creating static & dynamic app shortcuts on the home screen.

Flutter Shortcuts Compatibility ✅ Android ❌ iOS (active issue: iOS support for quick actions) Show some ❤️ and ⭐ the repo Why use Flutter Shortcuts? F

Sep 26, 2022

Flutter-FFNavigationBar - Configurable navigation bar for Flutter

Flutter-FFNavigationBar - Configurable navigation bar for Flutter

ff_navigation_bar A highly configurable navigation bar with emphasis for the selected item. Add dependency dependencies: ff_navigation_bar: ^0.1.5

Sep 22, 2022

Configurable navigation bar for Flutter

Configurable navigation bar for Flutter

ff_navigation_bar A highly configurable navigation bar with emphasis for the selected item. Add dependency dependencies: ff_navigation_bar: ^0.1.5

Sep 22, 2022

Configurable file explorer widget for Flutter

Configurable file explorer widget for Flutter

Filex Configurable file explorer widget for Flutter Usage Simple: import 'package:filex/filex.dart'; import 'package:path_provider/path_provider.dart'

Oct 13, 2022

Access app version and git informations from auto-generated and configurable widgets

This is a proof of concept and WIP Feedback and ideas welcome !! Access your pubspec and git commit informations like versions and commit status from

Jul 7, 2021

An easy configurable and secure open-source personal password manager.

An easy configurable and secure open-source personal password manager.

An easy configurable and secure open-source personal password manager. Anyone can you this project and generate his own personal mobile app. All the passwords will be saved into your own Firebase Firestone database with encryption.

Dec 28, 2022

Add easily to your app an introduction screen to provide informations to new users

IntroductionScreen Introduction screen allow you to have a screen at launcher for example, where you can explain your app. This Widget is very customi

Jan 6, 2023

A Flutter plugin to request the device unlock screen.

device_unlock A Flutter plugin to request the device unlock screen on Android and iOS. How does it work The following attempts and fallbacks are made:

Sep 7, 2022

Flutter plugin that allows you to keep the device screen awake on Android, iOS, macOS, Windows, and web.

Wakelock Wakelock is Flutter plugin that allows you to keep the device screen awake, i.e. prevent the screen from sleeping. Supported platforms Platfo

Jan 4, 2023
Releases(REL_v1.0.0)
  • REL_v1.0.0(Feb 14, 2022)

Owner
Extreme Vietnam Public
Extreme Vietnam Public
A responsive scaffold widget that adjusts to your device size, for your flutter mobile and web apps.

scaffold_responsive A responsive scaffold widget that adjusts to your device size, for your flutter mobile and web apps. Check out the Live demo here

Tushar Sadhwani 9 Sep 27, 2022
POS plugging to connect with each type of pos device.

flutter_pos_printer A new flutter plugin project. Getting Started This project is a starting point for a Flutter plug-in package, a specialized packag

Harshit sharma 3 Aug 25, 2022
Dynamic var - Dart dilinde dynamic ve var veri tiplerini anlamanızı kolaylaştıracak örnektir.

dynamic ve var arasındaki fark dynamic Tanımlanan değişkenin tipi daha sonra kod içerisinde değişebilir. Örneğin int olarak tanımlanan bir a değişkeni

Abdullah Sevmez 0 Jan 1, 2022
Package to select layout per orientation or device size like mobile vs tablet layouts or portrait vs landscape

proxy_layout Package to select layout per orientation or device size like mobile vs tablet layouts or portrait vs landscape Usage You have two widgets

Jimmy Aumard 8 Apr 18, 2021
Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Habib ullah 14 Jan 1, 2023
Android test task master - Create PIN code screen, authentication by PIN code screen and menu screen

Here is described test tasks for a android dev. Need to implement three screens:

null 3 Oct 4, 2022
Flutter video compress - Generate a new file by compressed video, and provide metadata. Get video thumbnail from a video path, supports JPEG/GIF. To reduce app size not using FFmpeg in IOS.

flutter_video_compress Generate a new path by compressed video, Choose to keep the source video or delete it by a parameter. Get video thumbnail from

天海るり 179 Dec 8, 2022
SSH no ports provides ssh to a remote Linux device with out that device having any ports open

Ssh! No ports ssh no ports provides a way to ssh to a remote linux host/device without that device having any open ports (not even 22) on external int

The Atsign Foundation 224 Dec 21, 2022
System info plus - A Flutter plugin to get device Random Access Memory (RAM) size

system_info_plus A Flutter plugin to get device Random Access Memory (RAM) size.

Sebghatullah Yusuf 2 Aug 21, 2022
Flutter plugin for creating static & dynamic app shortcuts on the home screen.

Flutter Shortcuts Show some ❤️ and ⭐ the repo Why use Flutter Shortcuts? Flutter Shortcuts Plugin is known for : Flutter Shortcuts Fast, performant &

Divyanshu Shekhar 39 Sep 26, 2022