Auto Size any widget in Flutter
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.
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
boxDecoration: optional parameter that sets the decoration for the
Some of the common widgets with which you can use auto_size_widget:
- Auto Size Image:
This widget can resize the child widget(image). Here, I have set equal values for
maxHeight. And different equal values for
This resizes both the height and the width of the widget.
2. Auto Size TextField(constant height):
Here, a TextField is wrapped with
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):
Text widget is wrapped with
Text widget height can be resized from 120 to 280. The
width here remains constant and does not change during the resize.
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
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
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