ListTile's tileColor is Sticked to UI

54 Views Asked by At

I have used ListView.builder() and when I try to scroll the list, the tileColor is stuck to the screen(Until we click on the screen), and the content returns to its position.
I can solve this by changing the physics to BouncingScrollPhysics() but I want to use the default physics.

Check Video of Output Here <- Focus on Tile 6 and 7

Here is the code:
DashboardScreen

import 'package:animations/animations.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc_example/CounterExample/friend.dart';
import 'package:flutter_bloc_example/CounterExample/history.dart';
import 'package:flutter_bloc_example/CounterExample/listScreen.dart';

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

  @override
  State<DemoDashboard> createState() => _DemoDashboardState();
}

class _DemoDashboardState extends State<DemoDashboard> {
  final List<Widget> pages = const [
    GroupPage(),
    FriendsPage(),
    ActivitiesPage(),
  ];
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('StickyColorIssue'),
      ),
      body: PageTransitionSwitcher(
        child: pages[_currentIndex],
        transitionBuilder: (child, primaryAnimation, secondaryAnimation) {
          return FadeThroughTransition(
            fillColor: Colors.transparent,
            animation: primaryAnimation,
            secondaryAnimation: secondaryAnimation,
            child: child,
          );
        },
      ),
      bottomNavigationBar: NavigationBar(
        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
        selectedIndex: _currentIndex,
        onDestinationSelected: (value) => setState(() {
          _currentIndex = value;
        }),
        destinations: const [
          NavigationDestination(
            icon: Icon(Icons.group_outlined),
            selectedIcon: Icon(Icons.group_rounded),
            label: 'Groups',
          ),
          NavigationDestination(
            icon: Icon(Icons.person_outline_rounded),
            selectedIcon: Icon(Icons.person_rounded),
            label: 'Friends',
          ),
        ],
      ),
    );
  }
}

GroupPage

import 'package:flutter/material.dart';
import 'package:flutter_bloc_example/constants/app_colos.dart';

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 15,
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.only(left: 16, right: 16, bottom: 7),
          child: ListTile(
            tileColor: Colors.grey[200],
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
            contentPadding:
                const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
            leading: const CircleAvatar(
              child: Icon(Icons.group),
            ),
            title: Text(
              'Group $index',
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        );
      },
    );
  }
}

FriendPage

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Welcome to the Friends Page'),
    );
  }
}
0

There are 0 best solutions below