eBay / flutter_glove_box

Various eBay tools for Flutter development
BSD 3-Clause "New" or "Revised" License
320 stars 69 forks source link

Consider segregating logical "scenario" from presentation layouts #83

Open matthew-carroll opened 3 years ago

matthew-carroll commented 3 years ago

The concept of a golden scenario is widely applicable: some render tree, some title, and possibly some arbitrary additional metadata, e.g., Map<dynamic, dynamic>.

Layout is specific to a test's use-case and team preferences, e.g., grid, column, row, surface size.

These two concepts are forced together because addScenario() is a function on GoldenBuilder, which is constructed with factories named column or grid. And the _Scenario object is private.

This creates an unnecessary limitation of usage that I'd like to break out of. I'd like to declare logical scenarios, but then gain control over how those scenarios are laid out. I considered building a package on top of golden_toolkit that would add various layouts, but that doesn't seem reasonably possible due to the above mixing of otherwise independent concepts.

I recommend separating these concepts so that the process of declaring, pumping, and rendering scenarios is consistent, but the layout of those scenarios is configurable by the end-user.

My current situation: I've run into this limitation in multiple projects, but I'll mention my current situation which should theoretically be very easy to accomplish, but it might be impossible in the current implementation.

I'm displaying 3 button scenarios in a column. I've set the surface size to a bit larger than these 3 scenarios. I'd like for the scenarios Column to be centered in the golden UI, and I'd like the background color to fill all available space.

The GoldenBuilder build() method is currently implemented as:

///  [build] will build a list of [scenarios]  with a given layout
  Widget build() {
    return Align(
      alignment: Alignment.topLeft,
      child: Container(
        padding: const EdgeInsets.all(8),
        color: bgColor ?? const Color(0xFFEEEEEE),
        child: columns == 1 ? _column() : _grid(),
      ),
    );
  }

The alignment is hardcoded and as a result of the Align, the Container shrinks to the size of the content instead of filling the available space with the background color. So I can't center the scenarios, and I can't get the background color to fill the available space (as far as I can tell).

coreysprague commented 3 years ago

@matthew-carroll I think this makes total sense...

I think with this separation, we could make a new API and could deprecate both the GoldenBuilder and the DeviceBuilder.

It might be a week or so before I can get to this, but I'll try to put something together an solicit your feedback on it