title: Resizing button to fit different screen sizes
body: <p>I am trying to make the button below resize depending on different screen sizes but retain the same ratios (i.e. text and button size should change proportionately so they look the same on all screens). I am using the AutoSizeText package to resize the text based on screensize but the text doesn't seem to getting smaller on the smaller screen which might be causing the button to resize oddly.</p>
  
  <p>[![button 1][1]][1] - lager screen
  [![button 2][2]][2] - smaller screen</p>
  
  <p>I have tried using a mediaquery to size the button with height and width but that does not seem to be working.</p>
  
  <p>Is there a recommended way of doing this? </p>
  
  <pre><code>class PurchaseButton extends StatelessWidget {
    final Product product;
  
    PurchaseButton({Key key, @required this.product}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      double deviceWidth = MediaQuery.of(context).size.width;
  
      Container(
        margin: EdgeInsets.symmetric(horizontal: 0.05 * deviceWidth),
  
      child: Row(
        children: &lt;Widget&gt;[
  
      Expanded(
        child: MaterialButton(
  //      height: SizeConfig.blockSizeVertical * 6,
  
          onPressed: () async {
            await Provider.of&lt;SubscriptionModel&gt;(context).makePurchase(product);
          },
          child: Text('Join now! Only ${product.priceString}',
              style: Theme.of(context).textTheme.body1.copyWith(
                  fontWeight: FontWeight.w600, fontSize: 0.03 * deviceWidth)),
  
          color: Theme.of(context).primaryColor,
        ),
        ),
      ],
      ),
      );
      return Container();
    }
  }
  </code></pre>