Skip to main content

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.

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:
PropTypeDescription
moviesList<Movie>The list of movies to display
titleString?Section heading shown on the left
subTitleString?Secondary label shown on the right as a tonal button
loadNextPageVoidCallback?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.

Build docs developers (and LLMs) love

Get started for freeTalk to us