Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter text and stack widget spaced evenly

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Flutter output

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

>Solution :

Please try my solution:

enter image description here

The result:
enter image description here

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading