https://github.com/apalala-dev/fit_or_scale

Wrap your widget with FitOrScale to make them scale down when their available space is below a given minWidth and/or minHeight.
https://github.com/apalala-dev/fit_or_scale

Last synced: about 2 months ago
JSON representation

Wrap your widget with FitOrScale to make them scale down when their available space is below a given minWidth and/or minHeight.

• Host: GitHub
• URL: https://github.com/apalala-dev/fit_or_scale
• Owner: apalala-dev
• License: mit
• Created: 2022-06-07T07:42:12.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-06-08T11:18:05.000Z (over 2 years ago)
• Last Synced: 2024-11-17T08:16:33.115Z (2 months ago)
• Language: Dart
• Homepage:
• Size: 4.86 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Discouraged

This package was an attempt to solve a problem that was already solved by the `FittedBox` widget.

Just use `FittedBox` instead:

``` dart

FittedBox(

    fit: BoxFit.scaleDown,

    child: // widget to auto scale

)

```

## Original description

Wrap your widgets with `FitOrScale` to make them scale down if their available space is below a `minWidth` and/or a `minHeight`.

This might help with responsive design in situations where you don't want to remove elements but you encounter overflow issues if you don't.

This should probably be used for specific scenarios such as very small screen. In other cases, you should probably just provide a less detailed version of your widget (use an overflow menu instead of displaying several icons for instance).

![Example demo](media/example_demo.gif)

Note how the text  and the icons scale down instead of being cut / having overflow issues when the screen size become too small.

## Usage

```dart

FitOrScale(

    // Scale down when you reach minWidth

    minWidth: 418,

    // Scale down when you reach minHeight

    minHeight: 170,

    // Help define the minWidth and minHeight values by showing current dimensions of your child. It

    // is not shown in release mode

    showSizeOverlay: false,

    // Alignment of the scaled down child, when it is scaled down

    alignment: Alignment.center,

    // Your widget

    child: YourWidget(),

)

```

**Note:** FitOrScale must have constrained width and height. You can use `Flexible` or `Expanded` in `Column` or `Row` for instance, or a `SizedBox`, `ConstrainedBox`, `Container` or similar for a more fixed size.

## Feedback

If you have any feedback, issue or ideas for this package, feel free to fill an issue.