Flutter: Make a custom bottom bar sliding up when it appears

609

Solution 1

Use a SizeTransition widget https://api.flutter.dev/flutter/widgets/SizeTransition-class.html

"SizeTransition acts as a ClipRect that animates either its width or its height, depending upon the value of axis. The alignment of the child along the axis is specified by the axisAlignment."

 Widget build(BuildContext context) {
 return SizeTransition(
  sizeFactor: CurvedAnimation(
    curve: Curves.fastOutSlowIn,
    parent: _animationController,
  ),
  child: Container(height: 100, color: Colors.blue)
);
}

init animation controller in stateful widgets initState()

  @override
void initState() {
super.initState();
_animationController = AnimationController(
    vsync: this, duration: const Duration(milliseconds: 500));
  }

Make sure your stateful widget uses SingleTickerProviderStateMixin

class _NavBarState extends State<NavBar>
with SingleTickerProviderStateMixin {
late AnimationController _animationController;

then open and close with

_animationController.forward()
_animationController.reverse()

You can pass the _animationController into the NavBar widget's constructor from its parent if you want the parent to control the animation.

Alternatively you can use an AnimatedContainer widget and setState with its height 0 or 100 depending on if Nav should be shown. This becomes a problem for some widgets that cannot be squished to height of 0 though and I would not recommend for any container that contains anything but text

Solution 2

One solution would be to use a SnackBar widget. Since it's automatically animated, you wouldn't want to worry about manually animating the bottom bar. You can insert your Audio Player (bottom bar) widget to the child of the SizedBox.

The bottom bar is made visible by,

ScaffoldMessenger.of(context).showSnackBar(snackBar);

This bottom bar is dismissed (hidden) by dragging down or by,

ScaffoldMessenger.of(context).hideCurrentSnackBar();

There maybe many other solutions as well to this, but reading your question, I hope this is what you wanted.

return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            duration: Duration(days: 365),
            content: SizedBox(
              height: 100,
              //insert your audio player widget here
              child: Column(
                children: [
                  Text("YOUR AUDIOPLAYER WIDGET HERE"),
                  Text("Audio Controls Here"),
                  ElevatedButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    },
                    child: Text("Audio Player Minimize"),
                  ),
                ],
              ),
            ),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: Text('Open Audio Player'),
      ),
    );
Share:
609
nondefinite
Author by

nondefinite

Updated on December 29, 2022

Comments

  • nondefinite
    nondefinite 10 months

    I am trying to design a music playlist page. So far I am able to create a listview with song cards. When I click on any song, a custom bottom bar appears and the audio starts playing. However, I just hold a state with boolean and show the bottom bar according to that. Instead, I want it to appear like sliding up and reach to the position. Let say in 0.5 seconds.

    I have a custom NavBar class

    class NavBar extends StatefulWidget
    

    And I use this class in build similar to:

    return Column(
      children: [
        SizedBox(
          height: constraints.maxHeight * 0.5,
          hild: SlidingBanners(),
        ),
        Expanded(
          child: Lists(),
        ),
        NavBar()
      ],
    );
    

    How can I such animation?

  • Braden Bagby
    Braden Bagby over 2 years
    this is definitely not ideal. You shouldn't call .showSnackBar within the build itself because on rebuilds it will be shown multiple times. A snackbar is for short popup display of information, not an entire toolbar widget
  • RukshanJS
    RukshanJS over 2 years
    @BradenBagby thanks for the feedback. But in the official documentation, it is called within the build(). flutter.dev/docs/cookbook/design/snackbars. I do agree that snackbars are for short popups, but thought maybe usable here.
  • Braden Bagby
    Braden Bagby over 2 years
    the docs have the showSnackbar() being called on a button press callback which makes it outside of the build() call. Interesting technique though it is not really an ideal solution!
  • nondefinite
    nondefinite over 2 years
    so my aim is to show the bottom bar when a song in the list is tapped. In this case, should I pass the controller from the parent? I do not understand the forward(), reverse() usage here.
  • Braden Bagby
    Braden Bagby over 2 years
    @nondefinite yes exactly! Pass the animation controller in from the parent as part of NavBar's constructor. Then, when you tap a song list in your parent you can call .forward/.reverse on that controller and it will animate the nav bar