Flutter Drawer 动画曲线

Question

有没有办法将曲线添加到颤振脚手架抽屉？例如 Curves.ElasticOut。

我考虑过扩展 Drawer 或 DrawerControllerState 类以创建允许曲线输入的自定义版本，但似乎没有明显的方法来做到这一点。

有一个有用的插件，它使用它自己的 sidemenu 类提供曲线功能，但我想使用脚手架抽屉来做到这一点，因为它看起来不应该是一个困难的扩展 （替代插件https://github.com/GabrieleCicconetti/uts_sidemenu/blob/master/lib/uts_sidemenu.dart）

我已经研究了现有的 SO 问题，但找不到与此主题重复的问题，但这是我第一次在 Stack Overflow 上提出问题，如果我在这里犯了任何错误，请致歉。

Answer 1

我已经尝试了更多关于你想做的事情，但我当然做不到。 但是我创建了带有不同动画的自定义抽屉。在这里你可以给你的duration，curve。 那么它是否比您想要创建的更复杂和美丽的抽屉。 这是源代码和解释：

首先我们需要创建两个有状态的小部件，CustomDrawer 和 HomeScreem： 创建完这个小部件后，我们需要创建Wrapper 小部件来控制我们的屏幕变化。

• Wrapper 小部件：

class Wrapper extends StatelessWidget {
  const Wrapper({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CustomDrawer(),
        HomeScreen(),
      ],
    );
  }
}

然后我们必须创建我们的CustomDrawer 小部件：

• CustomDrawer 小部件：

class CustomDrawer extends StatefulWidget {
  @override
  _CustomDrawerState createState() => _CustomDrawerState();
}

class _CustomDrawerState extends State<CustomDrawer> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffD53437),
      body: Stack(
        children: [
          /// Add here whatever you want..
          Row(children: []),
        ],
      ),
    );
  }
}

是时候创建HomeScreen 小部件来管理动画了。所以我们要做的一切都在这里。 这里我们需要创建一个有状态的wideget并返回AnimatedContainer。如您所见：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      color: Colors.grey[900],
      child: buildScaffold(),
    );
  }

  Widget buildScaffold() {
    return Scaffold(
      appBar: buildCustomAppBar(),
      backgroundColor: Colors.black54,
      body: Center(
        child: Text("Curve Drawer Example"),
      )
    );
  }

现在我们要制定方法和一些计算来管理我们的屏幕。 首先创建这个变量到_HomeScreenState:

double x = 0;
double y = 0;
double s = 1;
bool _isDrawerOpened = false;
int _currentIndex = 0;

那么我们需要两个方法，openDrawer 和 closeDrawer。

• 第一位是openDrawer：

void openDrawer() {
  setState(() {
    x = 250;
    y = 150;
    s = 0.6;
    _isDrawerOpened = true;
  });
}

• 其次是closeDrawer:

void closeDrawer() {
  setState(() {
    x = 0;
    y = 0;
    s = 1;
    _isDrawerOpened = false;
  });
}

是时候填写我们的AnimatedContainer 进行更改了：

• 填写后我们的AnimatedContainer：

AnimatedContainer(
  color: Colors.grey[900],
  curve: Curves.easeInOutBack,
  transform: Matrix4.translationValues(x, y, 0)..scale(s),
  duration: Duration(seconds: 1),
  child: buildScaffold(),
);

现在我们需要 appBar 来使用我们的方法，所以对于 openDrawer 和 closeDrawer：

AppBar buildCustomAppBar() {
  return AppBar(
    backgroundColor: Colors.black,
    leading: IconButton(
      icon: Icon(
        _isDrawerOpened ? Icons.clear : Icons.menu,
        color: Colors.white,
      ),
      onPressed: _isDrawerOpened ? closeDrawer : openDrawer,
    ),
  );
}

如果您完成了这些步骤，那么您就可以使用和享受了！只需将Wrapper 输入您的 main.dart > MaterialApp 的主页即可。

• HomeScreen的完整代码：

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final pageController = PageController();

  double x = 0;
  double y = 0;
  double s = 1;
  bool _isDrawerOpened = false;
  int _currentIndex = 0;

  void openDrawer() {
    setState(() {
      x = 250;
      y = 150;
      s = 0.6;
      _isDrawerOpened = true;
    });
  }

  void closeDrawer() {
    setState(() {
      x = 0;
      y = 0;
      s = 1;
      _isDrawerOpened = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      color: Colors.grey[900],
      curve: Curves.easeInOutBack,
      transform: Matrix4.translationValues(x, y, 0)..scale(s),
      duration: Duration(seconds: 1),
      child: buildScaffold(),
    );
  }

  Widget buildScaffold() {
    return Scaffold(
      appBar: buildCustomAppBar(),
      backgroundColor: Colors.black54,
      body: Center(
        child: Text("Curve Drawer Example"),
      ),
    );
  }

  AppBar buildCustomAppBar() {
  return AppBar(
    backgroundColor: Colors.black,
    leading: IconButton(
      icon: Icon(
        _isDrawerOpened ? Icons.clear : Icons.menu,
        color: Colors.white,
      ),
      onPressed: _isDrawerOpened ? closeDrawer : openDrawer,
    ),
  );
}

当你完成所有事情后，你会得到这样的结果：