0

I’m trying to make a progress bar and I'd like to place the progress bar in the middle and a text next to it, but I don't know how

I don't want both elements centralized just the progress bar

The result I get:

The result I get

The result I'm expecting:

The result I'm expecting

My code:

import 'package:flutter/material.dart';

class ProgressBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Progress Bar"),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: [
          Container(
            decoration: BoxDecoration(
                color: Colors.grey, borderRadius: BorderRadius.circular(4)),
            alignment: Alignment.centerLeft,
            width: 95,
            height: 6,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.red, borderRadius: BorderRadius.circular(4)),
              width: 47.5,
            ),
          ),
          Text('50 %'),
        ]),
      ],
    );
  }
}

2 Answers 2

0

Here's something I tried with your code:

Column(
  children: [
    Row(children: [
      Expanded(
        child: Center(
          child: Text("Progress Bar"),
        ),
        flex: 2,
      ),
      Expanded(
        child: Container(),
      ),
    ]),
    Row(children: [
      Expanded(
        child: Container(
          decoration: BoxDecoration(
              color: Colors.grey, borderRadius: BorderRadius.circular(4)),
          alignment: Alignment.centerLeft,
          width: 95,
          height: 6,
          child: Container(
            decoration: BoxDecoration(
                color: Colors.red, borderRadius: BorderRadius.circular(4)),
            width: 47.5,
          ),
        ),
        flex: 2,
      ),
      Expanded(
        child: Center(
          child: Text('50 %'),
        ),
      ),
    ]),
  ],
);

Giving the following layout:

Layout

I'm guessing this is what you wanted to achieve. Have a look at how I've used Expanded to balance the constraints in each row. The basic logic is to have the Progress Bar text and the Progress bar in the same column and give this column the same width, hence the use of Expanded with the same flex. Since you wanted the 50% in the same row as the Progress bar, I then added an empty 'cell' above it to keep the placement intact. It's basically like creating a table using Column and Row.

0

Since you need your Progress Bar text and your actual Bar to be aligned, you would need to wrap them inside a Column.

Then, you can wrap this and your Text in a Row.

class ProgressBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FittedBox(child: Row(
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 16),
          child: FittedBox(
            child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
              Text("Progress Bar"),
              Container(
                decoration: BoxDecoration(
                  color: Colors.grey, borderRadius: BorderRadius.circular(4)),
                alignment: Alignment.centerLeft,
                width: 95,
                height: 6,
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.circular(4)),
                  width: 47.5,
                ),
              ),
            ]),
          ),
        ),
        Text('50 %'),
      ],
    ));
  }
} 

Here, we are using a Padding to make the Text widget go a bit towards the bottom. The FittedBoxs are there to avoid your Column and Row from taking all available space.

Result

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.