title: Flutter: How to let several buttons in a line automatic match screen width?
body: <p>There have several same size buttons in a line, each button have 8px gap. when device screen width is larger, the width of buttons are wider. when device screen width is smaller, the width of buttons are shorter. but 8px gap are not change.</p>
  
  <p>Here is my code with fixed width: I add a sizedbox widget to give button size.</p>
  
  <pre><code>import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:fluttertoast/fluttertoast.dart';
  import 'modules/globals.dart';
  
  class SourceButtons extends StatefulWidget {
    SourceButtons({Key key}) : super(key: key);
    @override
    State&lt;StatefulWidget&gt; createState() {
      return _SourceButtonsStatus();
    }
  }
  
  class _SourceButtonsStatus extends State&lt;SourceButtons&gt; {
    var currentSourceIndex = 0;
  
     List&lt;Widget&gt; getButtons() {
       List&lt;Widget&gt; list = [];
      sourceNames.asMap().forEach((index, source) {
        list.add(SourceButton(onPressCallback: ()=&gt;{
          Fluttertoast.showToast(msg:"press down")
        }, title: source));
        list.add(SizedBox(width: 8));
      });
      return list;
    }
    @override
    Widget build(BuildContext context) {
      return Container(
        padding: const EdgeInsets.symmetric(vertical:8.0, horizontal: 8.0),
  
        child: 
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: &lt;Widget&gt;[
            Text("Input", style: Theme.of(context).textTheme.headline),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: this.getButtons())],
        )
  
        ,);
  
    }
  }
  
  
  class SourceButton extends StatelessWidget {
    final VoidCallback onPressCallback;
    final String title;
    bool isActive;
    SourceButton({this.onPressCallback, this.title, this.isActive = false});
    @override
    Widget build(BuildContext context) {
      return SizedBox(
        width: 60, // fixed width!!
        height: 35,
        child: RaisedButton(
        color: this.isActive ? Theme.of(context).highlightColor:Theme.of(context).accentColor,
        onPressed: onPressCallback,
        shape: RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(18.0)),
        child: FittedBox(
            fit:BoxFit.fitWidth,
            child:Text(
              this.title,
              style: this.isActive ? Theme.of(context).textTheme.body1: Theme.of(context).textTheme.body2
        )),
      ));
    }
  }
  </code></pre>
  
  <p>Ok, base on Udit Chugh's suggest, I add follow function to count out width of button:</p>
  
  <pre><code>    double getWidth(BuildContext context, double percentage, int amount, double gap){
  
    double width = MediaQuery.of(context).size.width;
    return (width*percentage)/amount - gap;
  }
  </code></pre>
  
  <p>but is there better solution?</p>