Auto Size any widget in Flutter

auto_size_widget.gif

Have you ever come across a scenario where you wanted the user to resize a widget and didn’t know how to execute it? Well, I was in a similar situation some time ago and I decided to build a package as a solution.

The auto_size_widget allows the user to resize any Flutter widget. This is especially helpful for textfields if the user wants to extend the field, or an image to zoom in for better visibility, and many more.

Following are the attributes of the package:

— showIcon: (boolean) the auto_size_widget by defaults has a resize icon, if you wish to not have it in the widget, set to false, however, it is true by default.

— initialWidth: the initial width of the widget, that can later be resized.

Set same value as maxWidth to keep the widget width constant.

— initialHeight: the initial height of the widget, that can later be resized.

Set same value as maxHeight to keep the widget height constant.

— maxWidth: the maximum value that can reach during the resize. If same as initialWidth, user cannot change width of the widget.

— maxHeight: the maximum value that can reach during the resize. If same as initialHeight, user cannot change height of the widget.

— child: widget that will be resized

— borderColor: optional parameter that sets the border colour of the AutoSizeWidget

— boxDecoration: optional parameter that sets the decoration for the AutoSizeWidget box.

Some of the common widgets with which you can use auto_size_widget:

1. Auto Size Image:

Auto Height and Width Example

This widget can resize the child widget(image). Here, I have set equal values for maxWidth and maxHeight. And different equal values for initialWidth and initialHeight.

This resizes both the height and the width of the widget.

2. Auto Size TextField(constant height):

Auto Width Example

Here, a TextField is wrapped with AutoSizeWidget, the TextField width can be resized from value 180 to 300. The height however, remains constant and does not change during the resize.

3. Auto Size Text(constant width):

Auto Height Example

Here, the Text widget is wrapped with AutoSizeWidget. The Text widget height can be resized from 120 to 280. The width here remains constant and does not change during the resize.

The AutoSizeWidget comes with a boxDecoration by default that acts as a guide when user resizes the widget.

You can skip the box by passing your own value for the boxDecoration parameter, or by setting the borderColor as Colors.transparent. However, it is recommended to keep the default value as it serves a purpose.

This is how the widget would look like after the box is removed and when the showIcon is true:

You can wrap AutoSizeWidget around any Flutter widget that can later be resized by the user. This package can be helpful especially when you’re building a web app.

That’s all for now. Feel free to leave any suggestions in the comments and share as much if you found it helpful!

Follow Flutter Community on Twitter: https://www.twitter.com/FlutterComm