How To Test Your Responsive Flutter App

Web apps are on the rise. It’s time to learn how to test your responsive Flutter web app.

Made with Microsoft Designer

Flutter web apps become more and more popular and the Flutter team has made significant improvements over the last years to the platform.

I also started using it more as a solution. Some examples are my advanced QuickCoder article search, my time tracker Foklarity, and my advanced Gumroad dashboard GDash for Gumroad power sellers.

A good web app needs to be responsive these days. Flutter offers some solutions here (LayoutBuilder, MediaQuery), but testing still feels hard.

I came up with some solutions myself which I want to share. So here is how to test your responsive Flutter app.

Breakpoints

This article focuses on widget testing since this is the layer that handles the responsiveness. The basic idea is to run every test with a different resolution with minimal effort. I use this little helper in various forms:

class TestScreenSizes {
  static final mobile = TestScreenSize(
    'Mobile',
    Size(UiBreakpoints.mobileWindowWidth, UiBreakpoints.mobileWindowHeight),
  );
  static final tablet = TestScreenSize(
    'Tablet',
    Size(UiBreakpoints.tabletWindowWidth…