> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/juuaaann456/DMI-Practica06/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

```dart theme={null}
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.

```dart theme={null}
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.

```dart theme={null}
final initialLoading = ref.watch(intialLoadingProvider);
if (initialLoading) return const FullscreenLoader();
```

The `intialLoadingProvider` aggregates the state of all five movie providers:

```dart theme={null}
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;
});
```

<Note>
  The loader remains visible until **all five** categories have returned at least one page of results.
</Note>

## Data loading on init

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

```dart theme={null}
@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](/features/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`:

```dart theme={null}
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:

```dart theme={null}
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'),
  ],
);
```

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