Как анимировать расширяемый виджет Flutter, чтобы выдвинуть его из экрана

Question

У меня две расширяемые кнопки подряд занимают всю ширину экрана.При щелчке левой кнопки я хочу, чтобы левая кнопка занимала всю ширину экрана, а правая кнопка исчезала, переходя вправо, за пределы экрана.Вот то, чего я достиг на данный момент:

Как вы заметили, правая кнопка сжимается в конце, когда не хватает места для ее рендеринга.,Я просто хочу, чтобы он продолжал двигаться за пределы экрана, не меняя ширину.Я мог бы добиться этого, установив текст в одну строку для кнопки, но я хочу, чтобы решение работало в целом для всех виджетов (чтобы было достаточно места справа для его рендеринга).

Текущее решение:

import 'package:flutter/material.dart';

void main() => runApp(TestAnimation());

class TestAnimation extends StatefulWidget {
  @override
  _TestAnimationState createState() => _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = IntTween(begin: 100, end: 0).animate(_animationController);
    _animation.addListener(() => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 100,
                child: OutlineButton(
                  child: Text("Left"),
                  onPressed: () {
                    if (_animationController.value == 0.0) {
                      _animationController.forward();
                    } else {
                      _animationController.reverse();
                    }
                  },
                ),
              ),
              Expanded(
                flex: _animation.value,
                // Uses to hide widget when flex is going to 0
                child: SizedBox(
                  width: 0,
                  child: OutlineButton(
                    child: Text(
                      "Right",
                    ),
                    onPressed: () {},
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

ОБНОВЛЕНИЕ: Другой способ определить TextOverflow для текстового виджета.

Expanded(
                flex: _animation.value,
                // Uses to hide widget when flex is going to 0
                child: SizedBox(
                  width: 0.0,
                  child: OutlineButton(
                    child: Text(
                      "Right",
                      overflow: TextOverflow.ellipsis, // Add this
                    ),
                    onPressed: () {},
                  ),
                ),
              )

Это (нажатие правой кнопки) может быть решено с помощью из FittedBox виджет.

import 'package:flutter/material.dart';

void main() => runApp(TestAnimation());

class TestAnimation extends StatefulWidget {
  @override
  _TestAnimationState createState() => _TestAnimationState();
}

class _TestAnimationState extends State<TestAnimation> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = IntTween(begin: 100, end: 0).animate(_animationController);
    _animation.addListener(() => setState(() {}));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 100,
                child: OutlineButton(
                  child: Text("Left"),
                  onPressed: () {
                    if (_animationController.value == 0.0) {
                      _animationController.forward();
                    } else {
                      _animationController.reverse();
                    }
                  },
                ),
              ),
              Expanded(
                flex: _animation.value,
                // Uses to hide widget when flex is going to 0
                child: SizedBox(
                  width: 0.0,
                  child: OutlineButton(
                    child: FittedBox(    //Add this
                      child: Text(
                        "Right",
                      ),
                    ),
                    onPressed: () {},
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

вывод: