flet icon indicating copy to clipboard operation
flet copied to clipboard

Making the whole page scroll up when ListView is scrolled up

Open FeodorFitsner opened this issue 3 years ago • 1 comments

https://docs.flutter.dev/cookbook/lists/floating-app-bar

Discussed in https://github.com/flet-dev/flet/discussions/402

Originally posted by jet10000 September 27, 2022 How can I make the whole page scroll up when I scroll the ListView up?

import flet
from flet import Page, AppBar, Text, View, Column, Tabs, Tab, ListView, ListTile, Image, Icon, icons, ElevatedButton, \
    TextButton, Row


def main(page: Page):
    lv = View(route="/", controls=[
        Column(controls=[
            Text("A control that displays its children in a horizontal array.", style="headlineLarge"),
            Text(
                'When a child Control is placed into a Row you can "expand" it to fill the available space. Every Control has expand property that can have either a boolean value (True - expand control to fill all available space) or an integer - an "expand factor" specifying how to divide a free space with other expanded child controls.',
                style='bodyLarge'),
            Row(
                [TextButton("👍"), TextButton("❤️")],
                alignment="end",
            ),
        ], scroll="hidden"),
        Tabs(
            selected_index=0,
            # animation_duration=300,
            tabs=[
                Tab(
                    text="latest",
                    content=ListView(controls=[
                        ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ), ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ), ListTile(
                            leading=Icon(icons.CHAT_BUBBLE_OUTLINE),
                            title=Text("1111111111111111111111111111"),
                            subtitle=Text("🐶 2222222222222222"),
                        ),
                    ])
                ),
                Tab(
                    text="👍",
                    content=Column(
                        controls=[Text('thumb')], scroll="hidden"),
                ),
                Tab(
                    text="❤️",
                    # icon=icons.BLENDER,
                    content=Column(controls=[
                        ElevatedButton('open url')
                    ]),
                ),
            ],
            expand=True
        ),
    ], appbar=AppBar(title=Text("TEST")), auto_scroll=True)

    page.views.append(lv)
    page.update()


if __name__ == "__main__":
    flet.app(target=main,
             assets_dir="assets",
             route_url_strategy="path",
             view=flet.WEB_BROWSER,
             port=8080)

@FeodorFitsner

FeodorFitsner avatar Sep 28 '22 18:09 FeodorFitsner

You can get the height of single tile and give the height to parent of listview, height should be *no. of items (height of tile + margin in each tile )

Ri-2020 avatar Oct 09 '22 17:10 Ri-2020

Issue is related to #1843

ndonkoHenri avatar Dec 02 '23 00:12 ndonkoHenri

Closing in favour of https://github.com/flet-dev/flet/issues/1843

ndonkoHenri avatar Mar 03 '24 17:03 ndonkoHenri