AppBar image for NestedScrollView with rounded body

Question

I use NestedScrollView to make scrollable AppBar like the picture. The problem is, AppBar background picture doesn't expand enough to cover blank space (the arrows describe in the picture). Can anyone help me please? Thanks.

NestedScrollView(
 headerSliverBuilder: (context, innerBoxIsScrolled) {
  return [
    SliverAppBar(
      title: Text(
        "hehe",
        style: TextStyle(color: Colors.white),
      ),
      floating: true,
      expandedHeight: 100,
      forceElevated: innerBoxIsScrolled,
      flexibleSpace: Stack(
        children: <Widget>[
          Positioned.fill(
              child: Image.network(
            "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
            fit: BoxFit.cover,
          ))
        ],
      ),
    )
  ];
},
// Team Dashboard
body: Container(
  width: DataInstance().screenW,
  padding: const EdgeInsets.symmetric(vertical: kDouble_20),
  decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(kDouble_20),
          topRight: Radius.circular(kDouble_20))),
),
)

user18309290 · Accepted Answer · 2022-07-21 04:33:14Z

0

Move Stack with the background image at the top of the widget tree to cover the whole space and set backgroundColor transparent for both Scaffold and SliverAppBar.

Stack(
  children: <Widget>[
    Positioned.fill(
        child: Image.network(
      "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
      fit: BoxFit.cover,
    )),
    Scaffold(
        backgroundColor: Colors.transparent,
        body: NestedScrollView(
          headerSliverBuilder: (context, innerBoxIsScrolled) {
            return [
              SliverAppBar(
                backgroundColor: Colors.transparent,
...
              )
            ];
          },
          // Team Dashboard
          body: Container(
...
          ),
        ))
  ],
)

answered Jul 21, 2022 at 4:33

user18309290

8,5003 gold badges9 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Biên Nguyễn Văn Over a year ago

Thanks for you comment. I use Stack as a child of Scaffold and display image on it.

Collectives™ on Stack Overflow

AppBar image for NestedScrollView with rounded body

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related