The Headline Details page provides an immersive view of a single news article. It is responsible for fetching and displaying the full content of a headline, as well as suggesting related articles to keep users engaged.
This feature is primarily managed by two BLoCs that work together to populate the page.
HeadlineDetailsBloc: This BLoC is responsible for the main content of the page. It handles fetching the full Headline object from the repository, either by its ID (FetchHeadlineById) or by receiving the full object directly (HeadlineProvided). It manages the loading, success, and failure states for the primary article.
SimilarHeadlinesBloc: Once the main headline is loaded, this BLoC is triggered to find and display a list of related articles. It dispatches a FetchSimilarHeadlines event, using the topic of the current headline to query the repository for other articles with the same topic, excluding the current one.
HeadlineDetailsPage: The main UI widget for this feature. It orchestrates the two BLoCs and builds the user interface, which includes the article’s image, title, excerpt, and metadata. It also contains the logic for user actions like saving/unsaving an article and sharing it.
Content Loading
The page can be loaded in two ways: by passing a full Headline object (e.g., from a list view) for an instant display, or by passing just a headlineId, which triggers the HeadlineDetailsBloc to fetch the full data from the repository.
User Actions
The page provides users with key actions. They can save or unsave an article, which is handled by the AccountBloc. They can also share the article using the share_plus package, which provides a native sharing dialog.
Metadata Chips
Interactive metadata chips are displayed below the article image, showing the publication date, source, and topic. Tapping on the source or topic chip navigates the user to the respective EntityDetailsPage for that source or topic.
Similar Headlines
At the bottom of the page, a list of similar headlines is displayed to encourage further reading. This list is populated by the SimilarHeadlinesBloc and reuses the shared HeadlineTile widgets for a consistent look and feel.