sliverAppBar的圆形底部

时间:2020-07-05 14:55:53

标签: flutter

我想像这样舍入sliverAppBar的底部: enter image description here

但是我不能...这是我的代码:

Scaffold(
    body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool boxIsControlled) {
          return <Widget>[
            SliverAppBar(
              
              title: null,
              expandedHeight: MediaQuery.of(context).size.height*0.35,
              floating: true,
              pinned: false,
              snap: true,
              flexibleSpace: Stack(
                children: <Widget>[
                  Positioned.fill(
                      child: Image(
                    image: AssetImage('assets/cafe1.png'),
                    fit: BoxFit.cover,
                  ))
                ],
              ),
            ),
          ];
        },
        body: SingleChildScrollView(
          child: Container(
               ...
        ))));

这是我现在的结果:

enter image description here

:(

2 个答案:

答案 0 :(得分:0)

将此添加到SliverAppBar。

 shape: ContinuousRectangleBorder(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30), topRight: Radius.circular(30))),

答案 1 :(得分:0)

您可以在Stack中使用DraggableScrollableSheet做出类似的结果。 Example as gif

Stack(
        children: [
          Image(
            width: double.infinity,
            image: NetworkImage("https://picsum.photos/200/300"),
            fit: BoxFit.contain,
          ),
          DraggableScrollableSheet(
              maxChildSize: 0.75,
              minChildSize: 0.2,
              builder: (context, scrollController) {
                return Container(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.vertical(
                          top: Radius.circular(30))),
                  child: SingleChildScrollView(
                    controller: scrollController,
                    child: Column(
                      children: [
                        MovieTitle(),
                        BadgesList(),
                        RatingContainer(),
                        DirectorText(),
                        SizedBox(height: 30),
                        ActorContianer(),
                        Introduction(),
                      ],
                    ),
                  ),
                );
              })
        ],
      ),