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

Answer 1

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