Flutter Drawer Animation Curve

Question

Is there a way to add a curve to a flutter scaffold drawer? For example Curves.ElasticOut.

I thought about extending the Drawer or DrawerControllerState class to create a custom version that allows a curve input however there doesn't seem to be an obvious way to do this.

There is a useful plugin that gives curve functionality using its own sidemenu class but I would like to do this using the scaffold drawer as it doesn't seem like it should be a difficult extension (alternative plugin https://github.com/GabrieleCicconetti/uts_sidemenu/blob/master/lib/uts_sidemenu.dart)

I have researched existing SO questions and cannot find one duplicating this topic however this is my first time question on Stack Overflow so apologies if I have made any errors here.

score 0 · Answer 1 · answered Feb 08 '21 at 14:05

I have tried more about what you wanna do, but of course i couldn't do it. But i have create custom drawer with something different animation. here you can give your duration, curve. So is it more complex and beautiful drawer than you wanna create. Here is source code and expains:

First we need to create two Stateful widget, CustomDrawer and HomeScreem: After creating this widgets, we need to create Wrapper widget which one will controle our screen changes.

Wrapper widget:

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

And then we have to create our CustomDrawer widget:

CustomDrawer widget:

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: []),
        ],
      ),
    );
  }
}

Alright time to create HomeScreen widget which one will manage animations. so everthing we have to do is here. Here we need to Create a Stateful wideget and return AnimatedContainer. as you can see:

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"),
      )
    );
  }

And now we gonna make methods and some calculatings for manage our screen. First create this variables on down to _HomeScreenState:

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

Then we need two method, openDrawer and closeDrawer.

First is openDrawer:

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

Second is closeDrawer:

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

And time to fill our AnimatedContainer for do changes:

Our AnimatedContainer after filling:

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

And now we need appBar to use our methods, so for openDrawer and closeDrawer:

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

If you was complete this steps then you can use and enjoy! just give Wrapper in to your main.dart > MaterialApp's home.

Full Code of 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,
    ),
  );
}

When you complete everthing you'll get result like this:

Flutter Drawer Animation Curve

1 Answers1