I currently have a card widget with two animated containers of different colors. When the user clicks on either color, the other side of the container changes to match the users selection.

When the user clicks on a side, I want the color to expand out and fill about 90% of the card still showing just a sliver of the previous color. So for example if the card started out with red on the left and blue on the right, after clicking on the blue side, the blue would expand from right to left covering 90% of the card and the red would cover the remaining 10% on the left.

I hope that made sense. I am new to flutter so still just learning.

class _PickState extends State<Pick> {
  Color _colorA = Colors.red;
  Color _colorB = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: <Widget>[
          Expanded(
            child: GestureDetector(
              child: AnimatedContainer(
                color: _colorA,
                child: const Text("Option A"),
                alignment: Alignment.centerLeft,
                constraints: const BoxConstraints(minHeight: 75),
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
              child: GestureDetector(
            child: AnimatedContainer(
              color: _colorB,
              child: const Text("Option B"),
              alignment: Alignment.centerRight,
              constraints: const BoxConstraints(minHeight: 75),
              duration: const Duration(milliseconds: 250),
            ),
            onTap: () {
              _clickB();
            },
          ))
        ],
      ),
    );
  }

  void _clickA() {
    setState(() {
      _colorA = Colors.red;
      _colorB = Colors.red;
    });
  }

  void _clickB() {
    setState(() {
      _colorA = Colors.blue;
      _colorB = Colors.blue;
    });
  }
}

CodePudding user response：

class _PickState extends State<Pick> {
  int _colorAPercentage = 90;
  int _colorBPercentage = 10;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: <Widget>[
          Expanded(
            flex: _colorAPercentage,
            child: GestureDetector(
              child: AnimatedContainer(
                color: Colors.red,
                child: const Text("Option A"),
                alignment: Alignment.centerLeft,
                constraints: const BoxConstraints(minHeight: 75),
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
              flex: _colorBPercentage,
              child: GestureDetector(
                child: AnimatedContainer(
                  color: Colors.blue,
                  child: const Text("Option B"),
                  alignment: Alignment.centerRight,
                  constraints: const BoxConstraints(minHeight: 75),
                  duration: const Duration(milliseconds: 250),
                ),
                onTap: () {
                  _clickB();
                },
              ))
        ],
      ),
    );
  }

  void _clickA() {
    setState(() {
      _colorAPercentage = 90;
      _colorBPercentage = 10;
    });
  }

  void _clickB() {
    setState(() {
      _colorAPercentage = 10;
      _colorBPercentage = 90;
    });
  }
}

CodePudding user response：

If I understood correctly, try this.

@override
  Widget build(BuildContext context) {
    return Card(
      child: Row(
        children: <Widget>[
          Expanded(
            child: GestureDetector(
              child: AnimatedContainer(
                color: Colors.red,
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
            flex: 4,
            child: GestureDetector(
              child: AnimatedContainer(
                color: _colorA,
                child: const Text("Option A"),
                alignment: Alignment.centerLeft,
                constraints: const BoxConstraints(minHeight: 75),
                duration: const Duration(milliseconds: 250),
              ),
              onTap: () {
                _clickA();
              },
            ),
          ),
          Expanded(
              flex: 4,
              child: GestureDetector(
                child: AnimatedContainer(
                  color: _colorB,
                  child: const Text("Option B"),
                  alignment: Alignment.centerRight,
                  constraints: const BoxConstraints(minHeight: 75),
                  duration: const Duration(milliseconds: 250),
                ),
                onTap: () {
                  _clickB();
                },
              )),
          Expanded(
              child: GestureDetector(
                child: AnimatedContainer(
                  color: Colors.blue,
                  duration: const Duration(milliseconds: 250),
                ),
                onTap: () {
                  _clickB();
                },
              ))
        ],
      ),
    );
  }