Flutter web button size issue

Question

I am creating a cross-platform app for both web and mobile. The buttons however have different default height depending on the platform. How can I make the height of the button to be the same size on both mobile and web without checking the platform?

user_1483676 · Answer

In my case, a button on the Web was noticeably smaller than on mobile. I was passing padding explicitly, but it was adjusted inside the Flutter framework.

Mobile (as intended):

Web:

The button code looks like this:

  @override
  Widget build(BuildContext context) => RaisedButton(
        onPressed: onPressed,
        color: color,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4),
        ),
        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
        child: child,
      );

I fixed the problem by setting visualDensity to VisualDensity.standard in ThemeData in MaterialApp initialization. For some reason, the default was VisualDensity.compact.

class MyApp extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) => MaterialApp(
        // ...
        theme: ThemeData(
          // ...
          visualDensity: VisualDensity.standard,
        ),
        // ...
      );
}

Now size is as intended also on Web.

user_8257908 · Answer

If you are using material widget like RaisedButton, you can control the height as follows:

ButtonTheme(
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("Click here!"),
  ),
);

Flutter web button size issue

2 Answers