Key in listView is causing rebuild in Flutter - flutter

Question

class SupportScreen extends StatefulWidget {
const SupportScreen({Key? key}) : super(key: key);
#override
State<SupportScreen> createState() => _SupportScreenState();
}
class _SupportScreenState extends State<SupportScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
final ScrollController _scrollController = ScrollController();
int? selected;
int page = 1;
#override
void initState() {
super.initState();
updateState();
}
updateState() {
_scrollController.addListener(() {
if (_scrollController.position.pixels >=
_scrollController.position.maxScrollExtent) {
setState(() {
page = page + 1;
});
BlocProvider.of<SupportBloc>(_scaffoldKey.currentState!.context)
.add(SupportGetFaqsWithPagination(page));
}
});
}
#override
void dispose() {
super.dispose();
_scrollController.dispose();
}
#override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => SupportBloc(
SupportService(),
)..add(
SupportGetFaqsWithPagination(1),
),
child: Scaffold(
key: _scaffoldKey,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.only(
top: 16, bottom: 0, left: 16, right: 16),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
title(),
const SizedBox(height: 20),
BlocConsumer<SupportBloc, SupportState>(
listener: (context, state) {
if (state is SupportError) {
if (state.message.toString() == "401") {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text(Constants
.sessionExpiredPleaseLoginAgain)));
Navigator.pushReplacementNamed(
context, AppRouter.loginPath);
}
}
},
builder: (context, state) {
return BlocBuilder<SupportBloc, SupportState>(
builder: (context, state) {
if (state is SupportLoaded) {
return cardView(state.faqs);
} else if (state is SupportLoading) {
return const Expanded(
child: Center(
child: CircularProgressIndicator(),
),
);
} else if (state is SupportInitial) {
return const SizedBox.shrink();
} else {
return Container();
}
});
},
),
],
),
),
)),
);
}
Widget cardView(results) {
return Expanded(
child: Container(
margin: const EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: CommonFunctions.getThemeColor(context,
lightColor: ColorCode.colorWhite,
darkColor: ColorCode.textFieldDark)),
child: cardContainer(results),
),
);
}
Widget cardContainer(results) {
return ListView.builder(
controller: _scrollController,
key: Key('${selected.toString()}'),//here becuase of key it is causing rebuild
itemCount: results.length,
itemBuilder: (context, i) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
lists(i, results),
if (i != results.length - 1)
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0),
child: Divider(
color: CommonFunctions.getThemeColor(context,
lightColor: Color.fromRGBO(0, 0, 0, 0.4),
darkColor: Color.fromRGBO(229, 229, 229, 0.4))),
),
],
);
},
);
}
Text title() {
return const Text(
Constants.support,
style: TextStyle(
fontFamily: 'PublicSans-Medium',
fontWeight: FontWeight.w700,
fontSize: 20),
);
}
Theme lists(int i, results) {
return Theme(
data: ThemeData().copyWith(
dividerColor: Colors.transparent,
cardColor: Colors.white,
shadowColor: Colors.transparent,
primaryColor: ColorCode.secondaryColor),
child: ExpansionTile(
iconColor: ColorCode.secondaryColor,
collapsedIconColor: ColorCode.secondaryColor,
key: Key(i.toString()),
initiallyExpanded: i == selected,
title: Text(
results[i].question as String,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
fontFamily: 'PublicSans-Light',
color: CommonFunctions.getThemeColor(context,
lightColor: ColorCode.black,
darkColor: ColorCode.colorWhite)),
),
children: [
Padding(
padding: const EdgeInsets.only(left: 15.0, bottom: 15, right: 15),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
results[i].answer as String,
style: const TextStyle(
color: ColorCode.grey_600,
fontSize: 14,
fontFamily: 'PublicSans-Thin',
height: 1.5),
textAlign: TextAlign.start,
),
),
),
],
tilePadding: const EdgeInsets.symmetric(vertical: 5, horizontal: 15),
onExpansionChanged: ((newState) {
if (newState) {
setState(() {
selected = i;
});
} else {
setState(() {
selected = -1;
});
}
})),
);
}
}
As soon I expand the Expansion tile the other expansion tile should collapse. It is happening because of the key given to ListView.builder. But as soon as selected value changes it rebuilds the page and the ListView jumps to top as soon as I expand the tiles in the bottom . I want only one Expansion tile to be open at a time and the listView should not jump to top. Here as I scroll I'm fetching the data from server and adding it end of the list. If I remove 'key' in ListView.builder i can open any number of expansion tiles but that is not the desirable output..How to solve this ?