How to create a sticky header from the container that is in the middle-CodePudding

import 'package:flutter/material.dart';

void main() {
  runApp(Test());
}

class Test extends StatelessWidget {
  @override
  Widget build(context) {
    return SingleChildScrollView(
      child: Column(children: [
        Container(
          height: 100,
          color: Colors.white,
          child: const Text("Titleeeee"),
        ),
        Container(
          height: 300,
          color: Colors.blue,
          child: const Text("STICKEEEYYYY"),
        ),
        Container(
          height: 100,
          color: Colors.orange,
          child: const Text("CCCCCCC"),
        ),
        Container(
          height: 100,
          color: Colors.orange,
          child: const Text("CCCCCCC"),
        ),
      ]),
    );
  }
}

I have this Column widget. Trying to make the second container - Text('STICKEEEY') the sticky header. I've been trying to use the sticky_header package.

Container(
  child: SingleChildScrollView(
    child: Column(
      children: [
        Container(
          height: 100,
          color: Colors.white,
          child: const Text("Titleeeee"),
        ),
        StickyHeader(
          header: Container(
            height: 300,
            color: Colors.blue,
            child: const Text("STICKEEEYYYY"),
          ),
          content: Column(children: [
            Container(
              height: 100,
              color: Colors.orange,
              child: const Text("CCCCCCC"),
            ),
            Container(
              height: 100,
              color: Colors.orange,
              child: const Text("CCCCCCC"),
            ),
          ]),
        ),
      ],
    ),
  ),
)

However, this does not hold the second container at the top. It bypasses when it scrolls down. How can I make it stick to the top in this case?

CodePudding user response：

You can use SilverAppBar

Doc : https://api.flutter.dev/flutter/material/SliverAppBar-class.html

CodePudding user response：

Slives maybe are what you are looking for.

Doc: https://docs.flutter.dev/development/ui/advanced/slivers