Handling overflow in Flutter web

Question

In Flutter web, there are limitless possibilities of what sizes may be forced upon the app by resizing the browser. For example, my sign in with Apple and sign in with Google buttons from the flutter_signin_button package overflow when the browser is shrunk too small:

In a case where the window is shrunk unreasonably small, is there a way that I can suppress the overflow message? Or is there a release version of Flutter web that will not have these?

Answer 1

Wrap your widget into the scroll view. This is the easiest way to resolve the issue. Provide the fixed constraints for the both button and wrap into the scrollview with Horizontal scroll direction. If the screen size comes under the constraints, it will be the scrollable.

Answer 2

Use MediaQuery.

For width - MediaQuery.of(context).size.width; For height - MediaQuery.of(context).size.height;

For size - MediaQuery.of(context).size

if(MediaQuery.of(context).size.width < 200px)
{
   return someWidget
}