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.

Cinemapedia uses GoRouter for declarative, URL-based navigation. The router configuration is defined in lib/config/router/app_router.dart and exported as the appRouter instance.

​
Router configuration

final appRouter = GoRouter(
  initialLocation: '/',

  routes: [
    GoRoute(
      path: '/',
      name: HomeScreen.name,
      builder: (context, state) => const HomeScreen(),
      routes: [
        GoRoute(
          path: 'movie/:id',
          name: MovieScreen.name,
          builder: (context, state) {
            final movieId = state.pathParameters['id'] ?? 'no-id';
            return MovieScreen(movieId: movieId);
          },
        ),
      ],
    ),
  ],
);
The MovieScreen route is nested under HomeScreen, making its full resolved path /movie/:id.

​
Routes

RouteName constantScreenDescription
/HomeScreen.name ('home-screen')HomeScreenMain screen with all movie categories
/movie/:idMovieScreen.name ('movie-screen')MovieScreenMovie detail screen for a specific film

​
The movieId path parameter

The :id segment in /movie/:id is a named path parameter. GoRouter extracts it from state.pathParameters: 
final movieId = state.pathParameters['id'] ?? 'no-id';
return MovieScreen(movieId: movieId);
The movieId string is passed directly to MovieScreen as a required constructor parameter: 
class MovieScreen extends StatelessWidget {
  static const name = 'movie-screen';
  final String movieId;

  const MovieScreen({
    super.key,
    required this.movieId,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MovieID: $movieId'),
      ),
    );
  }
}
If the :id parameter is missing or cannot be parsed, the router falls back to the string 'no-id'.
Navigation from a list item to the detail screen is triggered by a GestureDetector tap inside MovieHorizontalListview. It uses GoRouter’s context.push() with the movie’s ID interpolated into the path: 
GestureDetector(
  onTap: () => context.push('/movie/${movie.id}'),
  child: FadeIn(child: child),
)
1

User taps a movie poster

The GestureDetector in _Slide (inside MovieHorizontalListview) fires its onTap callback.
2

GoRouter pushes the detail route

context.push('/movie/${movie.id}') adds /movie/:id on top of the current navigation stack, keeping HomeScreen in the back stack.
3

MovieScreen receives the ID

GoRouter extracts the :id segment and passes it to MovieScreen as movieId.

​
Route name constants

Both screens define a static name constant that is referenced in the router config. Using the constant instead of a raw string prevents typos and makes renaming safer: 
// In HomeScreen
static const name = 'home-screen';

// In MovieScreen
static const name = 'movie-screen';

// In appRouter
GoRoute(
  path: '/',
  name: HomeScreen.name,   // 'home-screen'
  ...
)

Build docs developers (and LLMs) love

Get started for freeTalk to us