162. Adding Navigation to the MealDetails Screen

1. 세부 화면1 -> 세부 화면2로 넘어가는 네비게이션을 만들어보자.

 

- meal_detail.dart(new)

import 'package:flutter/material.dart';

import 'package:meals/models/meal.dart';

class MealDetailsScreen extends StatelessWidget {

  const MealDetailsScreen({super.key, required this.meal});

  final Meal meal;

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text(meal.title),

      ),

      body: Image.network(

        meal.imageUrl,

        height: 300,

        width: double.infinity,

        fit: BoxFit.cover,

      ),

    );

  }

}

1) 세부 화면2 부분이다. 세부 화면1에서 이미지를 클릭하면 세부 화면2로 가게끔 만들려고 한다.

 

- meal_item.dart

import 'package:flutter/material.dart';

import 'package:meals/models/meal.dart';

import 'package:meals/widgets/meal_item_trait.dart';

import 'package:transparent_image/transparent_image.dart';

class MealItem extends StatelessWidget {

  const MealItem({

    super.key,

    required this.meal,

    required this.onSelectMeal,

  });

  final Meal meal;

  final void Function(Meal meal) onSelectMeal;

  String get complexityText {

    return meal.complexity.name[0].toUpperCase() +

        meal.complexity.name.substring(1);

  }

  String get affordabilityText {

    return meal.affordability.name[0].toUpperCase() +

        meal.affordability.name.substring(1);

  }

  @override

  Widget build(BuildContext context) {

    return Card(

      margin: const EdgeInsets.all(8),

      shape: RoundedRectangleBorder(

        borderRadius: BorderRadius.circular(8),

      ),

      clipBehavior: Clip.hardEdge,

      elevation: 2,

      child: InkWell(

        onTap: () {

          onSelectMeal(meal);

        },

        child: Stack(

          children: [

            FadeInImage(

              placeholder: MemoryImage(kTransparentImage),

              image: NetworkImage(meal.imageUrl),

              fit: BoxFit.cover,

              height: 200,

              width: double.infinity,

            ),

            Positioned(

              bottom: 0,

              left: 0,

              right: 0,

              child: Container(

                color: Colors.black54,

                padding: const EdgeInsets.symmetric(

                  vertical: 6,

                  horizontal: 44,

                ),

                child: Column(

                  children: [

                    Text(

                      meal.title,

                      maxLines: 2,

                      textAlign: TextAlign.center,

                      softWrap: true,

                      overflow: TextOverflow.ellipsis,

                      style: const TextStyle(

                        fontSize: 20,

                        fontWeight: FontWeight.bold,

                        color: Colors.white,

                      ),

                    ),

                    const SizedBox(height: 12),

                    Row(

                      mainAxisAlignment: MainAxisAlignment.center,

                      children: [

                        MealItemTrait(

                          icon: Icons.schedule,

                          label: '${meal.duration} min',

                        ),

                        const SizedBox(

                          width: 12,

                        ),

                        MealItemTrait(

                          icon: Icons.work,

                          label: complexityText,

                        ),

                        const SizedBox(

                          width: 12,

                        ),

                        MealItemTrait(

                          icon: Icons.attach_money,

                          label: affordabilityText,

                        ),

                      ],

                    )

                  ],

                ),

              ),

            )

          ],

        ),

      ),

    );

  }

}

1) onSelectMeal 함수를 추가해주었다. 해당 함수를 누르면 다른 세부화면1 -> 세부화면2로 넘어가게 된다.

 

- meals.dart

import 'package:flutter/material.dart';

import 'package:meals/models/meal.dart';

import 'package:meals/screens/meal_details.dart';

import 'package:meals/widgets/meal_item.dart';

class MealsScreen extends StatelessWidget {

  const MealsScreen({

    super.key,

    required this.title,

    required this.meals,

  });

  final String title;

  final List<Meal> meals;

  void selectMeal(BuildContext context, Meal meal) {

    Navigator.of(context).push(

      MaterialPageRoute(

        builder: (ctx) => MealDetailsScreen(

          meal: meal,

        ),

      ),

    );

  }

  @override

  Widget build(BuildContext context) {

    Widget content = Center(

      child: Column(

        mainAxisSize: MainAxisSize.min,

        children: [

          Text(

            'Uh oh ... nothing here!',

            style: Theme.of(context).textTheme.headlineLarge!.copyWith(

                  color: Theme.of(context).colorScheme.onBackground,

                ),

          ),

          const SizedBox(height: 16),

          Text(

            'Try selecting a different category!',

            style: Theme.of(context).textTheme.bodyLarge!.copyWith(

                  color: Theme.of(context).colorScheme.onBackground,

                ),

          ),

        ],

      ),

    );

    if (meals.isNotEmpty) {

      content = ListView.builder(

        itemCount: meals.length,

        itemBuilder: (ctx, index) => MealItem(

          meal: meals[index],

          onSelectMeal: (meal) {

            selectMeal(context, meal);

          },

        ),

      );

    }

    return Scaffold(

      appBar: AppBar(

        title: Text(title),

      ),

      body: content,

    );

  }

}

1) MealItem 위젯에서 설정한 onSelectMeal함수를 selectMeal 함수로 연결해주었다. onSelectMeal 함수를 누르게 되면

selectMeal이 작동이 되고, 네비게이터를 통해 맨 처음에 설정한 MealDetailScreen(세부화면2)로 이동하게 되는 로직이다.

 

이 때 헷갈릴 수 있는게, meal의 값은 어디서 갑자기 나온게 아니고, MealItem 위젯에서 onSelectMeal함수의 인자로 쓰인 meal이 사용 되는 것이다.