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.

Here is my code so far.

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 < 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),
                      ),
                    )
                  ],
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

Here is the output

What I want to achieve is to space them out evenly and stack width will not overflow from the container.

CodePudding user response：

Please try my solution:

The result:

Full code:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Demo',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatefulWidget {
  const FirstRoute({Key? key}) : super(key: key);

  @override
  State<FirstRoute> createState() => _FirstRouteState();
}

class _FirstRouteState extends State<FirstRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Column(
        children: const [
          SizedBox(height: 16),
          CustomIndicatorBar(
            title: 'Mood',
            percent: 0.5,
          ),
          SizedBox(height: 16),
          CustomIndicatorBar(
            title: 'Hunger',
            percent: 0.7,
          ),
        ],
      ),
    );
  }
}

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: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Text(
              title,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: Stack(
              children: [
                Container(
                  height: 20.0,
                  decoration: const BoxDecoration(
                    color: Color(0xFF555454),
                  ),
                ),
                LayoutBuilder(builder: (context, constraints) {
                  return Container(
                    height: 20.0,
                    width: constraints.maxWidth * percent,
                    decoration: const BoxDecoration(
                      color: Color(0xFFFA9F1D),
                    ),
                  );
                })
              ],
            ),
          )
        ],
      ),
    );
  }
}