[Web]: Some commit after (v1.13.7) introduces web issue that affects some widget sizes

[egorbelibov]

I noticed the issue when I upgraded flutter this morning and toggled Chrome's Device Toolbar.

Some widget sizes (only on mobile (I think)) are completely off from what they should be. The weird thing is that it only happens for some of the widgets.

i.e.: The following button has a fixed width, but behaves differently on each version

• (Latest Commit) - Flutter engine: 46adf73

• (v1.13.7) - Flutter engine: eb13993

Target Platform: Web
Target OS version/browser: Version 79.0.3945.88
Devices: Mac

[VladyslavBondarenko]

Hi @egorbelibov
To better address this issue could you provide a code sample (to specify which widgets behaves incorrectly)?
Thank you

[egorbelibov]

@VladyslavBondarenko
Yes, of course.

Also, I think I found out what's causing it.
Looks like this happens whenever a borderRadius is added to any widget.

Runnable Code Sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TroublesomeContainer(),
          ],
        ),
      ),
    );
  }
}

/// ISSUE present in this container.
class TroublesomeContainer extends StatelessWidget {
  Widget build(BuildContext context) {
    return _renderButton(context);
  }

  Widget _renderButton(BuildContext context) {
    return Container(
      height: 50,
      width: 300,
      decoration: BoxDecoration(
        color: Color(0xFF000000),
        // ISSUE seems like it's caused by `borderRadius` param (any border radius value)
        borderRadius: BorderRadius.all(Radius.circular(5)),
      ),
    );
  }
}

Screenshots

• When you add any borderRadius to Container this is what you get:

• And when you take it out:

It's very weird 🧐

[ferhatb]

Issue is fixed in flutter/engine#15327. Will be available as soon as new engine rolls into flutter master.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.