Handling 2 different sliverlist state on a single page in flutter

Question

I am trying to create Instagram clone with a different design. So I was trying to add option between 2 different sliverlist, as per the selection of a user to view either their posts or the posts they have been tagged in. Following are different widgets that I am using.

profile.dart

import 'package:bwitch/widgets/profile/personal_detail.dart';
import 'package:bwitch/widgets/profile/posts.dart';
import 'package:bwitch/widgets/profile/tags.dart';
import 'package:flutter/material.dart';

class Profile extends StatefulWidget {
  const Profile({super.key});

  @override
  State<Profile> createState() => _ProfileState();
}

class _ProfileState extends State<Profile> {
  bool _isPosts = true;
  callback(bool isPosts) {
    setState(() {
      _isPosts = isPosts;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildListDelegate(
              [
                const ListTile(
                  horizontalTitleGap: 0, minVerticalPadding: 0,
                  title: Text('Your Text Bar'),
                  // Add any other desired properties, such as leading, trailing, onTap, etc.
                ),
              ],
            ),
          ),
          PersonalDetail(isPosts: _isPosts, callback: callback),
          _isPosts ? const Posts() : const Tags(),
        ],
        // child: Column(
        //   children: [
        //     PersonalDetail(),
        //   ],
        //
      ),
    );
  }
}

posts.dart

import 'package:flutter/material.dart';

class Posts extends StatelessWidget {
  const Posts({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverList(
      key: const PageStorageKey<String>('posts'),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
            // Customize the ListTile as desired
          );
        },
        childCount: 40,
      ),
    );
  }
}

tags.dart

import 'package:flutter/material.dart';

class Tags extends StatelessWidget {
  const Tags({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverList(
      key: const PageStorageKey<String>('tags'),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
            // Customize the ListTile as desired
          );
        },
        childCount: 50,
      ),
    );
  }
}

Even after using PageStorageKey, if I scroll down to the bottom in tags, it scrolls down to the bottom in posts and vice versa. How can I retain their states even when I switch to the other tab and come back?

Handling 2 different sliverlist state on a single page in flutter

0 Answers0