Managing state for onBackPressed in Flutter bloc - flutter

Question

So I have a simple list that's clickable and goes to DetailScreen, issue I have is when I click back from the DetailScreen, how can I manage this state to save the last list?
Bloc
if (event is GetNews && !_hasReachedMax(state)) {
try {
if (currentState is NewsInitial) {
final news = await fetchNews(event.cat, pageNumber);
yield NewsLoaded(news, false);
}
if (currentState is NewsLoaded) {
pageNumber++;
final news = await fetchNews(event.cat, pageNumber);
yield news.isEmpty
? currentState.copyWith(hasReachedMax: true)
: NewsLoaded(currentState.node + news, false);
}
} catch (error) {
print(error);
yield NewsError("Error fetching news" + error);
}
} else if (event is GetDetailedNews) {
try {
final filter = await fetchDetailedNews(event.id);
yield DetailedNewsLoaded(filter);
} catch (error) {
yield NewsError("Couldn't fetch news : $error");
}
}
Attaching the event to the bloc
#override
void initState() {
super.initState();
_postBloc = BlocProvider.of<NewsBloc>(context)
..add(GetNews(widget.cat));
}
BlocBuilder
OnBackPressed I'm just stick in the else since I don't know how to manage the state
return BlocBuilder<NewsBloc, NewsState>(builder: (context, state) {
if (state is NewsLoaded) {
return ListView.builder(
controller: _scrollController,
itemCount: state.hasReachedMax
? state.node.length
: state.node.length + 1,
itemBuilder: (context, index) {
fullList = state.node;
print("list: ${state.node} \nlength: ${state.node
.length} \nindex: $index \n--------------");
return index >= state.node.length ?
BottomLoader() :
listViews(context, state.node[index], index);
});
}
else if (state is NewsError) {
return Center(
child: Container(
child: Text(state.message),
));
}
else {
return Center(child: CircularProgressIndicator(),);
}
});
States
abstract class NewsState extends Equatable {
const NewsState();
#override
List<Object> get props => [];
}
class NewsInitial extends NewsState {
const NewsInitial();
#override
List<Object> get props => [];
}
class NewsLoading extends NewsState {
const NewsLoading();
#override
List<Object> get props => [];
}
class NewsLoaded extends NewsState {
final List<Node> node;
final bool hasReachedMax;
NewsLoaded(this.node, this.hasReachedMax);
NewsLoaded copyWith({List<Node> node, bool hasReachedMax}) {
return NewsLoaded(node ?? this.node, hasReachedMax ?? this.hasReachedMax);
}
#override
List<Object> get props => [node];
}
class DetailedNewsLoaded extends NewsState {
final List<Node> node;
DetailedNewsLoaded(this.node);
#override
List<Object> get props => [node];
}
}
In the detail screen i add the GetDetailScreen event, and this event stays when onBackPressed
#override
void initState() {
BlocProvider.of<NewsBloc>(context)
..add(GetDetailedNews(widget.id));
super.initState();
}

Answer 1

I believe the problem is that your state when you press to see the article changes to DetailedNewsLoaded. So when you press back BlocBuilder<NewsBloc, NewsState> goes to the else state which returns the CircularProgressIndicator.
As i understand in your case you don't need the DetailedNewsLoaded state. You can just need to pass the state.node to DetailsScreen as a simple argument.

Answer 2

Why to do so much when you already have the hero widget in Flutter.
Make a List.
Use Hero animation for both list items and their details view.
Whenever the list item is clicked the details view will be shown.
When user presses back button, he/she will come to the position where that particular list item was.
So, basically you don't have to much.
I was going through some projects and I found this on github: https://github.com/whatsupcoders/Flutter-Hero-Widget
This project is walked through in this video that I found on YouTube: https://www.youtube.com/watch?v=mgSB5r11_Xw&t=15s
this project uses Hero widget, I hope it helps you.