I'm building a Flutter web app in which I have a button which contains an icon and some text in a row. My problem is, that whenever the user resizes the window to a smaller size, the button gets too small, leaving the text sticking out of it. I tried to give it constraints and set the minimum size of the button on the style parameter but it didn't help.
The button before resizing the window (default size):
The button after the window becomes small:
The code of the button widget:
class UploadTextButton extends StatelessWidget {
final Function _onPressed;
const UploadTextButton(this._onPressed);
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(
maxWidth: 250,
maxHeight: 50,
minWidth: 200,
minHeight: 50
),
child: OutlinedButton(
style: ButtonStyle(
minimumSize: MaterialStateProperty.all(Size(200, 50))
),
onPressed: () => _onPressed(),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Icon(Icons.cloud_upload),
),
Text("Upload my new picture")
],
)),
);
}
}
you can define the button size in app theme
eg: