CODEWITHSUNDEEP
flutterdartnestedscrollview
Biên Nguyễn Văn
Biên Nguyễn Văn

Reputation: 11

AppBar image for NestedScrollView with rounded body

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))),
),
)

Upvotes: 0

Views: 748

Answers (1)

user18309290
user18309290

Reputation: 8370

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(
...
          ),
        ))
  ],
)

Upvotes: 0

Related Questions