flutter - 如何在 SliverAppBar 和 SliverList 上堆叠 Circle Avatar？

Question

我想实现上面的设计

我用条子做了一些这样的事情

import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
              child: DefaultTabController(
          length: 4,
          child: NestedScrollView(
            body: TabBarView(children: [
             //pages of tabBar
            ]),
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return [
              SliverAppBar(
//for the pinned appBar
               
                                elevation: 0.0,
                                backgroundColor: Colors.red,
                                leading:   Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: CircleAvatar(backgroundColor: Colors.red.withOpacity(0.4),
                                  child: Icon(Icons.arrow_back,color: Colors.white,),
                                  ),
                                ),
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                      background: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  ),
                
                ),
                expandedHeight: 150,
              ),
            
                SliverList(delegate: SliverChildListDelegate([
                 // for bio and other stuff
                ])),
                SliverAppBar(
                  toolbarHeight: 0.0,
                  primary: false,
                  pinned: true,
                  bottom: TabBar(tabs: [
                  // tab bars
                  ],),
                )
              ];
            },
          ),
        ),
      ),
    );
  }
}

我尝试在我的 sliver 列表中添加堆栈，但 Circle Avatar 显示在应用栏后面。
我们如何才能实现这样的设计或实现它的替代方法。

标签： flutterflutter-layoutflutter-animationflutter-sliversliverappbar