Question 248176 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – how to add Positioned stack inside SliverList and make it scrollable , like when we scroll the top image part will hide and only see appBar&scroll

here i am pasting the video link i want to achieve , please helphi here i want to add a container at the top of the scrollable side and also some part of the container should be at the end of app bar and it should be scrollable

class HomePage extends StatelessWidget {
  const HomePage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            leading:IconButton(onPressed: (){},
              icon:const Icon(Icons.arrow_back) ,
              color: Colors.white,
            ),
            actions: [
              Align(
                alignment: Alignment.centerLeft,
                child: IconButton(onPressed: (){},
                  icon:const Icon(Icons.notifications_none_outlined) ,
                  color: Colors.white,
                ),
              ),
              Align(
                alignment: Alignment.centerLeft,
                child: IconButton(onPressed: (){},
                  icon:const Icon(Icons.more_vert_outlined) ,
                  color: Colors.white,
                ),
              ),
            ],
            backgroundColor: ThemeManager.sliverAppBarColor,
            expandedHeight: 350.0,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Padding(
                padding:  const EdgeInsets.symmetric(horizontal: 20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const SizedBox(height: 60,),
                    ClipOval(
                      child: Container(
                        child: Image.asset(
                          '',
                          fit: BoxFit.cover,
                          width: 120,
                          height: 120,
                        ),
                      ),
                    ),
                    const Text('',
                    style: TextStyle(color: ThemeManager.profileNameTextColor,
                      fontSize: 24,
                      fontWeight: FontWeight.w600,
                    ),),
                    const Center(
                      child: Text('',
                        style: TextStyle(color:
                        ThemeManager.profileNameTextColor,
                          fontSize: 16,
                          fontWeight: FontWeight.w400,
                        ),

                      ),
                    ),
                    const SizedBox(height: 3,),
                    // const EmployeeIdContainer(),
                    const SizedBox(height: 8,),
                    const SizedBox(height: 10,),
                    const SizedBox(height: 10,),
                  ],
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Stack(
                      children: [
                        Positioned(
                          top:-10,
                          left: 0,
                          right: 0,
                          bottom: 0,
                          child: Container(
                            width: 400,
                            height: 500,
                          ),
                        ),
                      ],
                    );
              },
              childCount: 50, // Number of list items
            ),
          ),
        ],
      ),
    );
  }
}

here i want to acheive is when we scroll the appbar the scollable container top end must be in FlexibleSpaceBar means the container should be stacked in top -10 position.

Tags:

2

Answers


  1. 0

    You can use SliverPersistentHeaderDelegate and little math for visualization.

    final double bottom = lerpDouble(-100, 10, shrinkOffset / expandedHeight)!;

    Here is the snippet

    class AppSliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  AppSliverPersistentHeaderDelegate({
    required this.expandedHeight,
  });

  final double expandedHeight;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    final double bottom = lerpDouble(-100, 10, shrinkOffset / expandedHeight)!; // play with your values here
    return ColoredBox(
      // you may use ImageFilter instead
      color: Colors.red.withOpacity(.1),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
            left: 0,
            right: 0,
            bottom: bottom,
            child: Placeholder(
              //replace with image and increase height>maxExtent
              fallbackHeight: maxExtent * 1.5,
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              height: kToolbarHeight,
              color: Colors.deepPurple.withAlpha(100),
              alignment: Alignment.center,
              child: Text('Title'),
            ),
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => expandedHeight;

  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(covariant AppSliverPersistentHeaderDelegate oldDelegate) => oldDelegate.expandedHeight != expandedHeight;
}

    And use

    slivers: [
  SliverPersistentHeader(
    pinned: true,
    delegate: AppSliverPersistentHeaderDelegate(expandedHeight: 200),
  ),

    Initial look

    enter image description here

    And on scroll

    enter image description here

    Login or Signup to reply.
  2. 0

    To achieve the desired behavior of having a Positioned stack inside a SliverList that can be scrolled, you can modify your code as follows:

    import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        leading: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.arrow_back),
          color: Colors.white,
        ),
        actions: [
          Align(
            alignment: Alignment.centerLeft,
            child: IconButton(
              onPressed: () {},
              icon: const Icon(Icons.notifications_none_outlined),
              color: Colors.white,
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: IconButton(
              onPressed: () {},
              icon: const Icon(Icons.more_vert_outlined),
              color: Colors.white,
            ),
          ),
        ],
        backgroundColor: Colors.blue, // Replace with your desired color
        expandedHeight: 350.0,
        pinned: true,
        flexibleSpace: FlexibleSpaceBar(
          background: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const SizedBox(height: 60),
                ClipOval(
                  child: Container(
                    child: Image.asset(
                      'your_image_asset_path', // Replace with your 
                      image asset
                      fit: BoxFit.cover,
                      width: 120,
                      height: 120,
                    ),
                  ),
                ),
                const Text(
                  'Your Name', // Replace with your name
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                const Center(
                  child: Text(
                    'Your Job Title', // Replace with your job title
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
                const SizedBox(height: 3),
                const SizedBox(height: 8),
                const SizedBox(height: 10),
                const SizedBox(height: 10),
              ],
            ),
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Stack(
              children: [
                Positioned(
                  top: -10,
                  left: 0,
                  right: 0,
                  bottom: 0,
                  child: Container(
                    width: 400,
                    height: 500,
                    color: Colors.grey, // Replace with your desired 
                       
                    // Add your content for the stack here
                  ),
                ),
              ],
            );
          },
          childCount: 50, // Number of list items
        ),
      ),
    ],
  ),
);}}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search