flutter - How to make SliverAppbar like Scaffold Appbar with extendBodyBehindAppBar = false

Question

Hello I was making sliverAppbar with content that consist of animatedContainer and Listview. I want to remove the space beneath of sliverAppbar so that animatedContainer can be saw completely. How can I achieve this? In Scaffold Appbar it was possible achieve this by default because of the default value extendBodyBehindAppBar = false here's my code

class _TaskPageState extends State<TaskPage> {
  bool selected = true;

  final List<Task> tasks = <Task>[];
  final TextEditingController textEditingController = TextEditingController();
  double expandheight = 0;

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          
          return <Widget>[
            SliverAppBar(
              title: Text('NestedScrollView'),
              leading: GestureDetector(
                onTap: () {
                  setState(() {
                    selected = selected ? false : true;
                  });
                  print(selected);
                },
                child: Text('Tapme'),
              ),
              backgroundColor: Colors.white,
              flexibleSpace:  Placeholder(),
              floating: true,
              pinned: true,
              expandedHeight: 100,
            ),
          ];
        },

        body: Column(
          children: <Widget>[
            AnimatedContainer(width: 300,
              height: selected ? 200.0 : 0.0,
              alignment: selected
                  ? Alignment.bottomCenter
                  : AlignmentDirectional.topCenter,
              duration: Duration(milliseconds: 500),
              decoration: BoxDecoration(
                border: selected
                    ? Border.all(color: Colors.black, width: 3)
                    : Border.all(color: Colors.red, width: 3),
                gradient: new LinearGradient(
                  begin: FractionalOffset.topCenter,
                  end: FractionalOffset.bottomCenter,
                  colors: selected
                      ? [Colors.lightGreen, Colors.redAccent]
                      : [Colors.orange, Colors.deepOrangeAccent],
                  stops: [0.0, 1.0],
                ),
                color: selected ? Colors.red : Colors.blue,
              ),
              curve: Curves.fastOutSlowIn,
              child: FlutterLogo(size: 200),
            ),
            Expanded(
              child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: tasks.length + 1,
                  itemBuilder: (BuildContext context, int index) {
                    if (index >= tasks.length) {
                      return Form(
                          child: TextField(
                            controller: textEditingController,
                            onEditingComplete: () {
                              tasks.add(Task(textEditingController.text));
                              setState(() {});
                            },
                          ));
                    }
                    return ListTile(
                      title: Text(tasks[index].name),
                    );
                  }),
            ),
          ],
        ));
  }
}

I want to achieve something like this when I scrolling down the page.

But because of beneath blank space of sliverappbar it was Impossible

question from:https://stackoverflow.com/questions/65858025/how-to-make-sliverappbar-like-scaffold-appbar-with-extendbodybehindappbar-fals

Answer 1

Waitting for answers