Hey there, When using context.widthPx, where is that size actually coming from? I am trying to put an AnimatedContainer inside my Expanded widget, as I am using an event to resize two Expanded containers on three possible conditions. Both start off at 50/50 flex size, then on the second condition it changes to 25/75, the last condition it's 75/25. It worked well without the Animated container, but the size transition is instant and I would prefer to have it animate.

I was hoping that this package might be able to help somehow, but I am not quite sure where the size of context.widthPx is coming from? Is it the size of wherever it happens to be in the widget tree at the time it is being called, the size of the topmost parent of that particular widget up to the most recent build method, or is it the size of the screen itself?

This is essentially how things are setup at the moment:

  Flex(
    direction: Axis.horizontal,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: <Widget>[
      Expanded(  // <---  I would like to get the current width of this
        flex: (target[expController.target]["newsWidth"]),
        child: AnimatedContainer(
          width: ?, // <-- and use it here
          duration: Duration(milliseconds: 500),
          curve: Curves.fastOutSlowIn,
          child: NewsMainHome(),
        ),
      ),
      Spacer(flex: target[expController.target]["spacer"]),
      Expanded(
        flex: (target[expController.target]["changeLogWidth"]),
        child: AnimatedContainer(
          width: ?, // Set to parent size
          duration: Duration(milliseconds: 500),
          curve: Curves.fastOutSlowIn,
          child: ChangeLogList(),
        ),
      ),
    ],
  ),

It would be nice to be able to set the AnimatedContainer width to the size of the parent Expanded width so it will animate the size transition when the Expanded flex value changes from the event, but I have yet to find a decent way to go about it.

Thanks, -MH

I put together my own SizingInfo class similar to yours, but I liked your implementation better. Hope you don't mind me transplanting my additional MediaQuery helpers that others should find useful for dealing with responsive screen sizing, especially when trying to adapt ui for big desktop screens. Here's a quick list of what I added: double widthPercent(double percentage) => percentage / 100 * widthPx; double heightPercent(double percentage) => percentage / 100 * heightPx; double get textSizeMultiplier => heightPx / 100.0; double get imageSizeMultiplier => widthPx / 100.0; ScreenType get screenType {..} enum ScreenType { Mobile, Tablet, Desktop }

Plus I added inline documentations for all the functions for you.. Hope ya don't mind my additions, but it does make it a little more useful design pattern. Feel free to change any of it you want, all's good. I just love all the cool new tricks we can do with the Dart extensions on anything... Cheers.