https://github.com/extremevn/esizer
A Flutter package provide responsive, dynamic, configurable size for each device screen size.
https://github.com/extremevn/esizer
dimensions responsive responsive-layout screen screensize size
Last synced: 9 months ago
JSON representation
A Flutter package provide responsive, dynamic, configurable size for each device screen size.
- Host: GitHub
- URL: https://github.com/extremevn/esizer
- Owner: extremevn
- License: mit
- Created: 2022-02-14T10:32:48.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-02-15T06:28:04.000Z (over 4 years ago)
- Last Synced: 2025-10-23T05:56:45.639Z (9 months ago)
- Topics: dimensions, responsive, responsive-layout, screen, screensize, size
- Language: Dart
- Homepage:
- Size: 734 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```yaml
homeScreen:
contentPadding: 10
iconSize: 50
titleTextSize: 24
descriptionTextSize: 16
widgetSpaceSize: 16
```
- Add assets folder path to pubspec.yaml file:
```yaml
flutter:
# ...
assets:
- assets/dimens/
```
### Config and use in application
- Make sure `WidgetsFlutterBinding.ensureInitialized();` main function before application start:
```dart
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
```
### Using widget
```dart
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
```dart
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
```shell
flutter pub run esizer:generate -I assets/dimens -o dimen_keys.g.dart -n DimenKeys
```
Then we have class like:
```dart
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:
```dart
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](CONTRIBUTING.md)
## Contributor
- [Justin Lewis](https://github.com/justin-lewis) (Maintainer)
- [dung95bk](https://github.com/dung95bk) (Developer)
## License
[MIT](LICENSE)
[mailing list]: https://groups.google.com/g/esizer_group