Joe
Joe

Reputation: 500

Flutter SliverAppBar with custom scrolling

I have a SliverAppBar with an image background, and on top of that some rainbow persistent header as an image. I would like to achieve a situation when I scroll the list of items the image fades away as it is now and for the name and description text to stay below that rainbow image pinned, while things can continue scrolling below that.

Any idea how to achieve this?

import 'package:consumerapp/core/constants.dart';
import 'package:flutter/material.dart';

class ProductPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          NestedScrollView(
            headerSliverBuilder: (_, __) {
              return [
                SliverAppBar(
                  automaticallyImplyLeading: false,
                  flexibleSpace: FlexibleSpaceBar(
                    background: Image.network(
                      'https://webimages.we2p.de/2/starnbergammersee/entity/gallery/6076aca107bca56b2082f52a/CThomasMarufke-DSC00603-Bearbeitet3_80dpi.jpg',
                      fit: BoxFit.cover,
                    ),
                  ),
                  expandedHeight: 200,
                ),
              ];
            },
            body: Container(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.fromLTRB(24, 20, 24, 5),
                      child: Text('Name'),
                    ),
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 24),
                      child: Text('Description'),
                    ),
                    ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      padding: EdgeInsets.zero,
                      itemBuilder: (_, int index) => Text(
                        'Item ' + index.toString(),
                        textAlign: TextAlign.center,
                      ),
                      itemCount: 200,
                    ),
                  ],
                ),
              ),
            ),
          ),
          Positioned.fill(
            bottom: MediaQuery.of(context).size.height / 3,
            child: IgnorePointer(
              child: Image.asset(
                ImagesPaths.backgroundImage,
                width: double.infinity,
                height: double.infinity,
                fit: BoxFit.cover,
                alignment: Alignment.center,
              ),
            ),
          ),
        ],
      ),
      extendBodyBehindAppBar: true,
    );
  }
}

enter image description here enter image description here

Upvotes: 0

Views: 71

Answers (0)

Related Questions