Блог

Я пытаюсь добиться прокрутки в Flutter Web, где у меня есть несколько контейнеров, которые сложены, и я использую SingleChildScrollView для прокрутки виджета. Однако, когда я прокручиваю первый контейнер, все работает нормально, но второй, который является дочерним элементом второго контейнера, реагирует на прокрутку, не завершая начальную. А также есть ли способ сделать липкий заголовок для второго контейнера. Как я могу заставить 3-й контейнер (оранжевый) прокручиваться после завершения прокрутки 2-го (синего)? Вот чего я пытаюсь добиться: https://yobithemes.com/demo/html/freda/dark-video-index.html

И вот что я получил до сих пор:

 class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          IntroScreen(),
          SingleChildScrollView(
            child: Container(
              child: Column(
                children: <Widget>[
                  SizedBox(
                    height: MediaQuery.of(context).size.height - 100,
                  ),
                  Container(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.blue,
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          SizedBox(
                            height: MediaQuery.of(context).size.height,
                          ),
                          Container(
                            padding: EdgeInsets.only(top: 100),
                            height: MediaQuery.of(context).size.height,
                            width: MediaQuery.of(context).size.width,
                            color: Colors.orange,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
 

Вы можете добиться этого с помощью sliver.

SliverToBoxAdapter заполните прозрачную область высотой экрана — высотой панели приложений.

SliverAppBar : сделайте его липким, установив плавающий и закрепив значение true

 class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          IntroScreen(),
          CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Container(
                  height: MediaQuery.of(context).size.height - 50,
                ),
              ),
              SliverAppBar(
                // toolbarHeight: 50,
                floating: true,
                pinned: true,
                title: Container(
                  child: Center(child: Text('Header')),
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (context, index) => Container(
                    height: MediaQuery.of(context).size.height-50,
                    color: Colors.primaries[index % Colors.primaries.length],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}