AnimatedList unnecessary rebuilds - flutter

Question

I'm animating the removal and addition of items to my list using an AnimatedList whose data is from a firestore stream.
I use riverpod to manage my state and noticed my List state rebuilds whenever I navigator to another screen. It also rebuilds on hot reload.
StateNotifier class for Nav bar
class NavigationState extends StateNotifier<Widget> {
NavigationState() : super(_homeScreen);
static const HomeScreen _homeScreen = HomeScreen();
static const SettingScreen _settingScreen = SettingScreen();
static Screens _page = Screens.home;
Screens get page => _page;
void selectPage(Screens page) {
switch (page) {
case Screens.home:
_page = Screens.home;
state = _homeScreen;
break;
case Screens.settings:
_page = Screens.settings;
state = _settingScreen;
}
}
}
Nav bar class
class CustomNav extends ConsumerWidget {
const CustomNav({Key? key}) : super(key: key);
#override
Widget build(BuildContext context, WidgetRef ref) {
final navIndex = ref.watch(navigationStateProvider.notifier);
return AnimatedContainer(
key: UniqueKey(),
curve: Curves.ease,
duration: const Duration(milliseconds: 1000),
padding: const EdgeInsets.only(top: 5),
height: 58,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
NavigationIcon(
icon: "assets/svg/home.svg",
color: navIndex.page == Screens.home
? Colors.green
: const Color.fromRGBO(133, 144, 132, 1),
label: "Home",
onPressed: () {
ref.read(navigationStateProvider.notifier).selectPage(
Screens.home);
},
),
NavigationIcon(
key: UniqueKey(),
icon: "assets/svg/setting.svg",
color: navIndex.page == Screens.settings
? Colors.green
: const Color.fromRGBO(133, 144, 132, 1),
label: "Settings",
onPressed: () {
ref
.read(navigationStateProvider.notifier)
.selectPage(Screens.settings);
}),
],
),
);
}
}
Home Screen
class HomeScreen extends ConsumerStatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
ConsumerState<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends ConsumerState<HomeScreen>
with SingleTickerProviderStateMixin, AutomaticKeepAliveClientMixin {
late final TabController _tabController;
final List<UserProperties> _firebaseList = [];
final pref = Preferences();
final GlobalKey<AnimatedListState> _key = GlobalKey();
#override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
updateKeepAlive();
}
void _addItem(List<QueryDocumentSnapshot> data) {
for (var element in data) {
final userProperties =
UserProperites.fromJson(element.data() as Map<String, dynamic>);
if (!_firebaseList.contains(userProperties)) {
_firebaseList.add(userProperties);
final itemIndex = data.indexOf(element);
_key.currentState
?.insertItem(itemIndex, duration: const Duration(seconds: 5));
}
}
}
#override
void dispose() {
super.dispose();
_tabController.dispose();
}
#override
Widget build(BuildContext context) {
super.build(context);
final selectedIndex = ref.watch(tabIndexProvider.notifier);
final checkBoxState = ref.watch(mainCheckBoxProvider.state);
_tabController.addListener(() {
checkBoxState.update((state) => false);
selectedIndex.state = _tabController.index;
});
final userId = pref.pref.getString("userId");
return Scaffold(
key: UniqueKey(),
body: Column(
key: UniqueKey(),
children: [
const SizedBox(
height: 15,
),
Expanded(
child: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
key: UniqueKey(),
stream: FirebaseFirestore.instance
.collection("users")
.doc(userId!)
.collection("properties")
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Container();
}
var data = snapshot.data!.docs;
_addItem(data);
return AnimatedList(
padding: const EdgeInsets.only(bottom: 100),
key: _key,
initialItemCount: _firebaseList.length,
itemBuilder: (context, index, animation) {
final userPro = _firebaseList.elementAt(index);
return Padding(
padding: const EdgeInsets.all(2.0),
child: GestureDetector(
onTap: () => Navigator.pushNamed(
context, "details"),
child: PropertyTile(
key: ObjectKey(index),
image: user.image,
name: user.name),
),
),
);
});
}),
),
],
),
);
}
#override
bool get wantKeepAlive => true;
}
I've been on this issue for a while, that's part of the reason UniqueKey() is littered everywhere.
I thought of using Provider.select, but I don't really know what to select since I'm using an enum.
Prior to AnimatedList, everything works fine, and no unnecessary rebuilds.