feat: Sliver controls (SliverAppBar, SliverListView, SliverGridView, SliverSafeArea, SliverScrollView)

[ndonkoHenri]

Fix #3427
Fix #3428
Fix #1843

Test Code

Details

import time
import flet as ft


def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.LIGHT
    page.padding = 0

    def handle_action(e: ft.ControlEvent):
        action = e.control.label.lower()
        if action == "pinned":
            sliver_appbar.pinned = e.control.value
        elif action == "floating":
            sliver_appbar.floating = e.control.value
            sliver_appbar.snap = sliver_appbar.snap and sliver_appbar.floating
            snap.value = sliver_appbar.snap
        elif action == "snap":
            sliver_appbar.snap = e.control.value
            sliver_appbar.floating = sliver_appbar.floating or sliver_appbar.snap
            floating.value = sliver_appbar.floating
        elif action == "stretch":
            sliver_appbar.stretch = e.control.value
        page.update()

    def handle_bar_stretch(e: ft.ControlEvent):
        progress_bar.visible = True
        progress_bar.update()
        time.sleep(2)
        progress_bar.visible = False
        progress_bar.update()

    page.bottom_appbar = ft.BottomAppBar(
        content=ft.Row(
            alignment=ft.MainAxisAlignment.CENTER,
            wrap=True,
            controls=[
                ft.Switch(label="Pinned", value=True, on_change=handle_action),
                ft.Switch(label="Stretch", value=True, on_change=handle_action),
                floating := ft.Switch(
                    label="Floating", value=True, on_change=handle_action
                ),
                snap := ft.Switch(label="Snap", value=True, on_change=handle_action),
            ],
        )
    )

    page.overlay.append(progress_bar := ft.ProgressBar(visible=False, height=15))
    page.add(
        ft.SliverScrollView(
            expand=True,
            slivers=[
                sliver_appbar := ft.SliverAppBar(
                    pinned=True,
                    floating=True,
                    stretch=True,
                    snap=True,
                    expanded_height=150,
                    on_stretch=handle_bar_stretch,
                    flexible_space=ft.FlexibleSpaceBar(
                        title=ft.Text("Sliver Playground"),
                        center_title=True,
                        background=ft.Image(
                            src="https://picsum.photos/400/500", fit=ft.ImageFit.COVER
                        ),
                    ),
                ),
                ft.SliverListView(
                    spacing=10,
                    divider_thickness=1,
                    controls=[
                        ft.ListTile(
                            leading=ft.CircleAvatar(ft.Text(f"{i}")),
                            title=ft.Text(f"Item {i}"),
                            bgcolor=ft.Colors.BLUE_50
                            if i % 2 == 0
                            else ft.Colors.WHITE,
                            on_click=lambda _: None,
                        )
                        for i in range(11)
                    ],
                ),
                ft.SliverGridView(
                    spacing=10,
                    child_aspect_ratio=4,
                    run_spacing=10,
                    runs_count=3,
                    max_extent=200,
                    controls=[
                        ft.Container(
                            content=ft.Text(f"Item {i}"),
                            alignment=ft.alignment.center,
                            width=20,
                            height=20,
                            bgcolor=ft.Colors.RED_300
                            if i % 2 == 0
                            else ft.Colors.BLUE_300,
                        )
                        for i in range(20)
                    ],
                ),
            ],
        )
    )


ft.app(main)

Summary by Sourcery

Introduce new Sliver controls, including SliverAppBar, SliverListView, SliverGridView, SliverSafeArea, and SliverScrollView, to enable custom scroll effects.

New Features:

• Add SliverAppBar control for a Material Design app bar that integrates with a SliverScrollView.
• Add SliverListView control to place multiple box children in a linear array along the main axis.
• Add SliverGridView control to place multiple box children in a linear array along the main axis.
• Add SliverSafeArea control to inset another sliver by sufficient padding to avoid intrusions by the operating system.
• Add SliverScrollView control to create custom scroll effects using slivers.
• Add FlexibleSpaceBar control.

[bl1nch]

Since you want to introduce sliver controls, could you also please look at this issue #3623, because it could also be solved with sliver controls, but it would require implementing a few more classes if possible?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SliverStickyFooterPage());
  }
}

class SliverStickyFooterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPadding(
            padding: const EdgeInsets.all(16),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    margin: const EdgeInsets.only(bottom: 12),
                    height: 100,
                    color: Colors.amber[100 * ((index % 8) + 1)],
                    child: Center(child: Text('Item $index')),
                  );
                },
                childCount: 5,
              ),
            ),
          ),
          SliverFillRemaining(
            hasScrollBody: false,
            child: Column(
              children: [
                Spacer(),
                Container(
                  padding: const EdgeInsets.all(16),
                  width: double.infinity,
                  color: Colors.white,
                  child: ElevatedButton(
                    onPressed: () {},
                    child: Text("Sticky Footer Button"),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}