CODEWITHSUNDEEP
flutterflutter-layout
Prabhat Sharma
Prabhat Sharma

Reputation: 148

How to create a multicolor Progress Bar with Flutter

How can i create a multicolor Progress Bar in Flutter. I read about the LinearProgressIndicator but i am not sure it will suffice.

I want to do something like this.

Text

Please guide me on what widget to use. I do not want full code.

Upvotes: 1

Views: 4705

Answers (2)

vogdb
vogdb

Reputation: 4829

I see that the answer had been given. However I have an alternative solution which can be easily generalized for any case. Here is the code that implements the author's image.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MultiColor LoadBar Demo',
      home: Align(
          alignment: Alignment.center,
          child: SizedBox(
            height: 50,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Expanded(
                    flex: 50,
                    child: Container(
                      color: Colors.green,
                      child: const Align(
                          alignment: Alignment.center,
                          child: Text('50', style: TextStyle(fontSize: 20, color: Colors.white))),
                    )),
                Expanded(
                    flex: 25,
                    child: Container(
                      color: Colors.yellow,
                      child: const Align(
                          alignment: Alignment.center,
                          child: Text('25', style: TextStyle(fontSize: 20, color: Colors.white))),
                    )),
                Expanded(
                    flex: 10,
                    child: Container(
                      color: Colors.redAccent,
                      child: const Align(
                          alignment: Alignment.center,
                          child: Text('10', style: TextStyle(fontSize: 20, color: Colors.white))),
                    )),
                Expanded(
                    flex: 15,
                    child: Container(
                      color: Colors.white,
                    )),
              ],
            ),
          )),
    );
  }
}

You can find a detailed explanation on how this works in Sizing elements to percentage of screen width/height

Upvotes: 2

Sukhi
Sukhi

Reputation: 14125

You'll have to assemble it part by part. I see five parts in the progress bar you show :

  1. A grey rectangle with a shadow/depth effect, curved corners
  2. Green rectangle with white text (read: Container with border)
  3. Amber rectangle with white text
  4. Red rectangle with white text
  5. All the rectangles are horizontally (read: Row)

The numbers will be changing as your event(s) are progressing. Now, this can be achieved with setState(). So, lets' not worry about that. :)

Okay, as far the You need to prepare a class which takes one parameter and that's the progressPercentage. Based on the percentage, you decide how many blocks to show and with what text. This simple code snippet draws green rectangle with some text on it. And this codepen shows multi color bar which might be fairly easy to convert into the progressbar.

Upvotes: 4

Related Questions