Flutter text and stack widget spaced evenly - flutter

Question

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.

Answer 1

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