Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to scroll a widget to only partially visible at the bottom or fully visible at the top as shown in these two images?

I am trying to implement a scrolling behavior in my Flutter application where a widget can be scrolled to either be only partially visible at the bottom of the screen or fully visible at the top. I’ve attached two images to illustrate the desired outcomes:enter image description here
enter image description here

Tags:

2

Answers


  1. 0

    You can use AnimatedPositioned widget instead of Positioned , add a boolean isOpen for example , and give AnimatedPositioned two cases in the bottom parameter , isOpen ? 120 : 20 , for Example :

    AnimatedPositioned(
    bottom: isOpened ? 120 : 20,
    duration : Duration(milliseconds : 300),
    child : [your widget],
    ),

    If have any question don’t hesitate to ask.

    Login or Signup to reply.
  2. 0

    You can use DraggableScrollableSheet

    enter image description here

    Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Stack(
        children: [
          Container(color: Colors.black12, width: double.infinity),
          DraggableScrollableSheet(
            initialChildSize: 0.1,
            minChildSize: 0.1,
            builder: (_, scrollController) {
              return Container(
                color: Colors.white,
                child: ListView.builder(
                  controller: scrollController,
                  itemCount: 25,
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      title: Text('Item $index'),
                    );
                  },
                ),
              );
            },
          ),
        ],
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search