Score line in live Streaming Pk Battle Flutter

Question

enter image description here

Live Stream PK Battle

I want to make a score line like this in flutter that will increase or decrease according to score. and will animate the icons also.

Please help if any one knows about it

Answer 1

You can reach the scoreline like:

import 'package:flutter/material.dart';

class Test5 extends StatefulWidget {
  const Test5({super.key});

  @override
  State<Test5> createState() => _Test5State();
}

class _Test5State extends State<Test5> {
  int scoreFirst = 5;
  int scoreSecond = 5;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            flex: 1,
            child: Container(color: Colors.grey),
          ),
          SizedBox(
            height: 50,
            child: Row(
              children: [
                Expanded(
                  flex: scoreFirst,
                  child: Container(color: Colors.red),
                ),
                Expanded(
                  flex: scoreSecond,
                  child: Container(color: Colors.blue),
                ),
              ],
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              color: Colors.grey,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () => firstGoAhead(),
                    child: const Text('First go ahead'),
                  ),
                  ElevatedButton(
                    onPressed: () => secondGoAhead(),
                    child: const Text('Second go ahead'),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  firstGoAhead() {
    setState(() {
      scoreFirst++;
      scoreSecond--;
    });
  }

  secondGoAhead() {
    setState(() {
      scoreSecond++;
      scoreFirst--;
    });
  }
}

Remember, if you have multiple Expanded with flex, they will share the remaining space like:

spaceOfTheFirst= (remainingSpace / [flexOfTheFirst+flexOfTheSecond+...]) * flexOfTheFirst

So like this you can easily update your score with set state. also your widget have to be an Stateful Widget!

For the animation, search again here in stackover flow, there are several examples. Try it your self. If you stuck somewhere make a new question for Icon animation, provide some code, and describe what kind of icon-animation you exactly want.

Good Luck!