flutterbutton

Is ElevatedButton working correctly for the web?

I'm working on my first Flutter project and my goal is to make my app work on all platforms (Android, iOS, Web).

My forehead is slowly becoming more red as I'm working with the ElevatedButton. I can't make it work on the Web.

This is how it looks in Android: (correct)

enter image description here

This is how it looks on the Web: (incorrect)

enter image description here

This is my theme:

theme: ThemeData(
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      primary: Colors.black,
      onPrimary: Colors.yellowAccent,
      side: BorderSide(width: 2.5, color: Colors.yellowAccent),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
      textStyle: TextStyle(
        fontSize: 15, fontWeight: FontWeight.w600
      ),
      elevation: 6,
      shadowColor: Colors.yellowAccent,
      padding:  EdgeInsets.all(8.0),
    ),
  ),
),

This is my button:

Container(
  padding: EdgeInsets.all(8.0),
  child: ElevatedButton(
  child: Text("MY BUTTON"),
  onPressed: () => setState(() {
    _launched = _launchInBrowser('https://www.mywonderfulsite.com');
  }),
)),

Is this a "feature" of ElevatedButton or can it be solved using it?

Appreciate suggestions.

Solution

  • The only solution I've found is to put a fixed width and height of the Container. Something like this:

    Container(
  width: 124.0,   // <-- Added this...
  height: 48.0,   // <--- ...and this.
  padding: EdgeInsets.all(8.0),
  child: ElevatedButton(
  child: Text("MY BUTTON"),
  onPressed: () => setState(() {
    _launched = _launchInBrowser('https://www.mywonderfulsite.com');
  }),
)),

    Hopefully it works for all platforms and versions. I've tested the most basic ones.