title: Flutter text and stack widget spaced evenly
body: <p>I am trying to create a status indicator in flutter with text label on left side and stack widget on right side, I manage to arrange them using Row but the width of each widgets is not separated evenly and the stack max width overflows with the container.</p>
  <p>Here is my code so far.</p>
  <pre><code>import 'package:flutter/material.dart';
  
  class CustomIndicatorBar extends StatelessWidget {
    const CustomIndicatorBar({
      Key key,
      @required this.percent,
      @required this.title,
    }) : super(key: key);
    final double percent;
    final String title;
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            final double maxBarWidth = constraints.maxWidth;
            double barWidth = percent * maxBarWidth;
            if (barWidth &lt; 0) {
              barWidth = 0;
            }
            return Expanded(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    title,
                    style: const TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Stack(
                    children: [
                      Container(
                        height: 20.0,
                        decoration: const BoxDecoration(
                          color: Color(0xFF555454),
                        ),
                      ),
                      Container(
                        height: 20.0,
                        width: barWidth,
                        decoration: const BoxDecoration(
                          color: Color(0xFFFA9F1D),
                        ),
                      )
                    ],
                  )
                ],
              ),
            );
          },
        ),
      );
    }
  }
  </code></pre>
  <p>Here is the output</p>
  <p><a href="https://i.stack.imgur.com/hE8mG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hE8mG.png" alt="Flutter output" /></a></p>
  <p>What I want to achieve is to space them out evenly and stack width will not overflow from the container.</p>