Home Screen

The main screen of Cinemapedia, displaying a scrollable layout with a featured slideshow and multiple horizontal movie category lists.

The HomeScreen is the entry point of the app. It combines a CustomScrollView with a SliverAppBar, an auto-playing MovieSlideshow, five MovieHorizontalListview sections, and a CustomBottomNavigationbar.

Layout structure

The screen is composed of two top-level widgets:

• Scaffold — wraps the scrollable body and the bottom navigation bar.
• _HomeView — a ConsumerStatefulWidget that triggers data loading on init and reacts to provider state changes.

class HomeScreen extends StatelessWidget {
  static const name = 'home-screen';

  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: _HomeView(),
      bottomNavigationBar: CustomBottomNavigationbar(),
    );
  }
}

CustomScrollView and SliverAppBar

The body uses a CustomScrollView with two slivers:

1. A floating SliverAppBar that hosts the CustomAppbar widget.
2. A SliverList with a single child that stacks all content sections vertically.

return CustomScrollView(
  slivers: [
    const SliverAppBar(floating: true, title: CustomAppbar()),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          if (index > 0) return null;
          return Column(
            children: [
              MovieSlideshow(movies: slideShowMovies),
              MovieHorizontalListview( ... ), // En cines
              MovieHorizontalListview( ... ), // Próximamente
              MovieHorizontalListview( ... ), // Populares
              MovieHorizontalListview( ... ), // Mejor valoradas
              MovieHorizontalListview( ... ), // Cine Mexicano
            ],
          );
        },
        childCount: 1,
      ),
    ),
  ],
);

Loading state

Before any content is rendered, the screen checks intialLoadingProvider. This provider returns true as long as any of the five category lists is still empty. While loading, a FullscreenLoader widget is displayed instead of the scroll view.

final initialLoading = ref.watch(intialLoadingProvider);
if (initialLoading) return const FullscreenLoader();

The intialLoadingProvider aggregates the state of all five movie providers:

final intialLoadingProvider = Provider<bool>((ref) {
  final step1 = ref.watch(nowPlayingMoviesProvider).isEmpty;
  final step2 = ref.watch(upcomingMoviesProvider).isEmpty;
  final step3 = ref.watch(popularMoviesProvider).isEmpty;
  final step4 = ref.watch(topratedMoviesProvider).isEmpty;
  final step5 = ref.watch(mexicanMoviesProvider).isEmpty;

  if (step1 || step2 || step3 || step4 || step5) return true;
  return false;
});

The loader remains visible until all five categories have returned at least one page of results.

Data loading on init

Data loading is triggered inside _HomeViewState.initState(). Each category provider’s loadNextPage() is called once to fetch page 1:

@override
void initState() {
  super.initState();

  ref.read(nowPlayingMoviesProvider.notifier).loadNextPage();
  ref.read(popularMoviesProvider.notifier).loadNextPage();
  ref.read(topratedMoviesProvider.notifier).loadNextPage();
  ref.read(upcomingMoviesProvider.notifier).loadNextPage();
  ref.read(mexicanMoviesProvider.notifier).loadNextPage();
}

Subsequent pages are loaded lazily as the user scrolls each horizontal list to the end. See Movie Categories for details on how pagination works.

MovieSlideshow

At the top of the content area, MovieSlideshow displays an auto-playing swipeable banner. It receives the first 6 movies from nowPlayingMoviesProvider via movieSlideShowProvider:

final movieSlideShowProvider = Provider<List<Movie>>((ref) {
  final nowPlayingMovies = ref.watch(nowPlayingMoviesProvider);
  if (nowPlayingMovies.isEmpty) return [];
  return nowPlayingMovies.sublist(0, 6);
});

The MovieSlideshow widget uses the card_swiper package with autoplay: true, a viewportFraction of 0.8, and dot pagination indicators styled with the active theme colors.

MovieHorizontalListview sections

Below the slideshow, five MovieHorizontalListview instances are stacked. Each receives:

Prop	Type	Description
movies	List<Movie>	The list of movies to display
title	String?	Section heading shown on the left
subTitle	String?	Secondary label shown on the right as a tonal button
loadNextPage	VoidCallback?	Called when the list is scrolled near the end

Each card in the list shows the movie poster (150×215 px), title, star rating, and popularity score. Tapping a poster navigates to /movie/:id.

CustomBottomNavigationbar

The CustomBottomNavigationbar renders a standard BottomNavigationBar with three items:

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home_max),        label: 'Inicio'),
    BottomNavigationBarItem(icon: Icon(Icons.label_outline),   label: 'Categoria'),
    BottomNavigationBarItem(icon: Icon(Icons.favorite_outline),label: 'Favoritos'),
  ],
);

The bottom navigation bar is currently a static widget. Tab switching logic has not yet been implemented.