Score line in live Streaming Pk Battle Flutter

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!