Dream11 player selection progress bar code in flutter

by
dream11 player selection progress bar code in flutter

In this Quick UI tutorial, you will see how to make a Dream11-like player selection progress bar code in Flutter. This seems difficult but very easy to achieve. In Flutter, we have a very powerful tool called Custom Paint which which we can use to make any shape.

For this tutorial, custom Paint helps to make one single Parallelogram which can be repeated as Listview 11 times as one team contains 11 Players. Let’s Just begin with the code and steps.

How to create Dream11 player selection progress bar

  • Create a Parallelogram with Custom Paint in Flutter
  • Add that Customer Paint in a Row.
  • Switch the color of each with the condition
  • Example Code Below

Create a Parallelogram with custom paint this can be done with the help of CHAT GPT or some tools which convert SVG to Flutter Custom Paint. Else here is the code of that Parallelogram.

class MyParallelogram  extends CustomPainter {
  final bool isFlipped;

  MyParallelogram(this.isFlipped);

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = isFlipped ? Colors.green  :  Colors.white
      ..style = PaintingStyle.fill;

    Path path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width * 0.7, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width * 0.3, size.height)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

This above class just create a new file for this or paste this class to the end of the file where you want to use it. Also, there is an isFlipped bool variable added to the constructor of this class which helps us to change the color with condition.

Change the color Accordingly

Paint function 2nd Line you can see (..color = isFlipped ? Colors.green : Colors.white ) just change the colors of the Parallelogram according to you use. This line reflects the color according to the isFlipped variable.

Now if you want to use this just use CustomPaint() widget and pass this MyParallelogram() Class to its painter: property.

 CustomPaint(
             painter: MyParallelogram(true),
      ),

For instance, True is passed into MyParallelogram() constructor, Just use the logic to make each of them fill its color accordingly.


For more, Some changes are made to make it exactly look like Dream11 Progress Bar.

Transform(
      alignment: Alignment.center,
      transform: Matrix4.rotationY(3.14159), // Flips horizontally
      child: SizedBox(
        width: 24,
        height: 18,
        child: CustomPaint(
            painter: MyParallelogram(true),
      ),
    );

Add the above code 11 times in a Row() to achieve Dream11 like Progress bar. most of the work is done, but using Row() adds up a new issue covered below

Spacing Issue:

Now Parallelograms are taking place like case 1 shown in the above image. They are taking spacing after the finish of the previous Parallelogram. But we need the alignment of Parallelograms like case 2 presented in the above image.

For this to be achieved Stack() widget comes in very handy here Is the code for this

Widget progressBar() {
  List<Widget> list =  [];
  double margin = 0;

  for(var i = 0; i < 11; i++){
    list.add( Transform(
      alignment: Alignment.center,
      transform: Matrix4.rotationY(3.14159), // Flips horizontally
      child: SizedBox(
        width: 20,
        height: 7,
        child: CustomPaint(
          painter: MyParallelogram(true),
        ),
      ),
    ).marginOnly(left: margin),
    );
    margin = margin + 14.0;
  }
  return Stack(children: list);
}

Here is the function which generates the 11 Parallelogram with loop and with each margin to left get increased. As there is a double margin = 0; the variable is declared at the beginning of this function.

Code with Select player logic

For this example, selectedPlayers variable is declared to check how many players are selected. In this case, 5 players selected.

Widget progressBar() {
  List<Widget> list =  [];
  double margin = 0;
  List<bool> selected = [];
  int? selectedPlayers = 5;

  for(int i = 0; i < 11; i++){
    if(i < selectedPlayers){
      selected.add(true);
    }  else {
      selected.add(false);
    }
  }
  for(var i = 0; i < 11; i++){
    list.add( Transform(
      alignment: Alignment.center,
      transform: Matrix4.rotationY(3.14159), // Flips horizontally
      child: SizedBox(
        width: 20,
        height: 7,
        child: CustomPaint(
          painter: MyParallelogram(selected[i]),
        ),
      ),
    ).marginOnly(left: margin),
    );
    margin = margin + 14.0;
  }
  return Stack(children: list);
}

Change the Shape of Parallelogram

To change the shape just play with values in paint function. To make the Parallelogram more tilted just change the ..lineTo(size.width * 0.7, 0) to ..lineTo(size.width * 0.5, 0) and ..lineTo(size.width * 0.3, size.height) to ..lineTo(size.width * 0.5, size.height).


  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = isFlipped ? Colors.green  :  Colors.white
      ..style = PaintingStyle.fill;

    Path path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width * 0.5, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width * 0.5, size.height)
      ..close();

    canvas.drawPath(path, paint);
  }

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com

Leave a Comment