Как сделать прозрачный sliverappbar в флаттере?

Question

Я пытаюсь сделать приложение электронной коммерции в трепетании. Я хотел сделать Appbar прозрачным и иметь анимацию, поэтому я использую Sliverappbar, но я не могу сделать его прозрачным без прокрутки вниз.

Я пытался использовать стек, но он не работает и имеет ошибку. Я хочу, чтобы панель приложений была прозрачной, когда она сверху, и меняла белый цвет, когда я прокручивал вниз.

Это мой код флаттера

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        leading: Icon(
          Icons.menu,
          size: 30,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.tune, color: Colors.black, size: 30),
          )
        ],
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          leading: Icon(
            Icons.menu,
            size: 30,
          ),
          backgroundColor: Colors.transparent,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.tune,
                color: Colors.black,
                size: 30,
              ),
            )
          ],
          floating: true,
          elevation: 0.0,
          snap: false,
        ),
        SliverToBoxAdapter(
          child: SizedBox(
              height: MediaQuery.of(context).size.height * 0.7,
              width: MediaQuery.of(context).size.width,
              child: Carousel(
                images: [
                  Image.network(
                      'https://i.pinimg.com/564x/83/32/37/8332374f18162612dd9f2a4af2fda794.jpg',
                      fit: BoxFit.cover),
                  Image.network(
                      'https://i.pinimg.com/originals/e2/8e/50/e28e5090b7193ec9b2d5b5c6dfaf501c.jpg',
                      fit: BoxFit.cover),
                  Image.network(
                      'https://image-cdn.hypb.st/https%3A%2F%2Fhypebeast.com%2Fwp-content%2Fblogs.dir%2F6%2Ffiles%2F2019%2F09%2Fmschf-fall-winter-lookbook-streetwear-seoul-korea-47.jpg?q=75&w=800&cbr=1&fit=max',
                      fit: BoxFit.cover)
                ],
                showIndicator: false,
              )),
        ),
        SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.only(
                left: 25.0, top: 20.0, right: 0.0, bottom: 20.0),
            child: Text('Recommended for You',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
          ),
        ),
        SliverPadding(
            padding: EdgeInsets.only(left: 35.0, right: 35.0),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 20.0,
                crossAxisSpacing: 25.0,
                childAspectRatio: 0.67,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return _buildListItem(context, index);
                },
                childCount: 13,
              ),
            ))
      ],
    );

Answer 1

Лучшее решение, которое я могу найти, вместо использования SliverAppBar, использовать обычный AppBar в SliverToBoxAdapter. Вы должны установить свойство FlexibleSpace для вашей карусели или поместить AppBar и карусель в стек.

Свойство FlexibleSpace, насколько я могу судить, ведет себя по-разному в SliverAppBar и обычном AppBar. Он не рухнет в обычном AppBar, и вам также не нужно будет помещать свою карусель в FlexibleSpaceBar ().

Возможно, вам придется сделать несколько дополнительных вещей, чтобы получить точный вид, который вы собираетесь ( например, изменить высоту).