Блог

Я пытаюсь создать индикатор состояния во флаттере с текстовой меткой слева и виджетом стека справа, мне удается расположить их с помощью строки, но ширина каждого виджета разделена неравномерно, и максимальная ширина стека переполняется контейнером.

Вот мой код до сих пор.

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

Вот результат

Чего я хочу добиться, так это распределить их равномерно, и ширина стека не будет переполняться из контейнера.

Пожалуйста, попробуйте мое решение:

Результат:

Полный код:

 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  Statelt;FirstRoutegt; createState() =gt; _FirstRouteState(); }  class _FirstRouteState extends Statelt;FirstRoutegt; {  @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),  ),  );  })  ],  ),  )  ],  ),  );  } }