CODEWITHSUNDEEP
flutterbuttonlayoutconstraintsminimum-size
jdsflk
jdsflk

Reputation: 467

How to set the minimum size of the button in Flutter?

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):
enter image description here



The button after the window becomes small:
enter image description here



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")
            ],
          )),
    );
  }
}

Upvotes: 4

Views: 8009

Answers (2)

PRATIK PAWAR
PRATIK PAWAR

Reputation: 312

if problem is with the test sizing you can use Fittedbox() widget for text.

FittedBox(
child:Text("Upload my new picture"),)

Upvotes: 0

Amit Singh
Amit Singh

Reputation: 733

you can define the button size in app theme

eg:

     buttonTheme: const ButtonThemeData(

     buttonColor: assentColor,
 
     padding: EdgeInsets.symmetric(vertical: 20),

      minWidth: double.maxFinite,
 
     colorScheme: ColorScheme.light(brightness: 
  
    Brightness.dark),
    
     ),

Upvotes: -2

Related Questions