title: How do I create a dynamic flutter grid layout based on device orientation when the items have dynamic height
body: <p>I'm trying to create a layout similar to Android's build in Contacts App, when creating a new contact (or editing one for that matter), in portrait mode the whole view is scroll-able with the user's avatar placed on top of the contact form in a top-to-bottom layout, when you switch to landscape mode however, the layout changes to a side-by-side layout with the avatar taking up the left half of the screen (full height and non scroll-able) and the contact form to the right fully scroll-able independent of the avatar to the left which stays fixed.</p>
  
  <p>I tried implementing this using the flutter_staggered_grid_view library by setting the <code>crossAxisCount</code> in a <code>StaggeredGridView.countBuilder</code> based on the device orientation this will make it so that I can switch between having only 1 item in the cross axis (in portrait mode where there's a vertical layout) to having 2 items in the cross axis (in landscape mode where there's a horizontal layout).</p>
  
  <p>Unfortunately, even though the <code>StaggeredGridView.countBuilder</code> is nested within a <code>OrientationBuilder</code> whenever I switch orientation, the layout doesn't seem to update as if the <code>crossAxisCount</code> property is not dynamic and can not be updated once set.</p>
  
  <pre><code>body: OrientationBuilder(
      builder: (context, or) {
          int cac = (or == Orientation.portrait) ? 1 : 2;
              return StaggeredGridView.countBuilder(
                  controller: _listViewScrollController,
                  itemBuilder: (BuildContext context, int index){
                      return _view[index];
                  },
                  itemCount: 2,
                  crossAxisCount: cac,
                  staggeredTileBuilder: (int index) {
                      return StaggeredTile.fit(cac);
                  },
                  scrollDirection: Axis.vertical,
              );
          },
      )
  </code></pre>
  
  <p>There's the possibility that Grids aren't the right approach to creating such a layout, if that's the case, I'd appreciate if anyone could point me in the right direction.</p>
  
  <p>Thanks in advance.</p>