코딩강의/meals_app(플러터-유데미) (20) 썸네일형 리스트형 200. Adding Multi-Screen Transitions (meals앱 애니메이션 마지막 강의) 1. 화면과 화면 이동할 때 이미지가 그대로 이동되게끔 하는 애니메이션 구현 이전 노마드코더에서도 배웠던 Hero 위젯을 사용 하면 된다. 개념은, 1번째 화면의 사진 위젯을 Hero로 감싸주고 tag로 특정 값을 지정해준 후 (id값) 2번째 화면에서 같은 사진에 대해 Hero로 감싸주고 똑같이 tag로 동일 특정값을 사용해주면 된다. 여기서는 - meal_item.dart Hero( tag: meal.id, child: FadeInImage( placeholder: MemoryImage(kTransparentImage), image: NetworkImage(meal.imageUrl), fit: BoxFit.cover, height: 200, width: double.infinity, ), ), 1) .. ~199. Configuring Implicit Animations 1. 암묵적 애니메이션을 구현해보자. 세부화면2에 별 모양을 애니메이션화 해보자. (기본적인 암묵적 애니메이션 위젯은 아래 주소 참조) https://docs.flutter.dev/ui/widgets/animation - meal_details.dart import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:meals/models/meal.dart'; import 'package:meals/providers/favorites_provider.dart'; class MealDetailsScreen extends ConsumerWidget { const MealD.. 197. Finetuning Explicit Animations 1. 명시적 애니메이션을 조금 더 세부조정하는 방법을 알아보자. - categories.dart import 'package:flutter/material.dart'; import 'package:meals/data/dummy_data.dart'; import 'package:meals/models/meal.dart'; import 'package:meals/widgets/category_grid_item.dart'; import 'package:meals/screens/meals.dart'; import 'package:meals/models/category.dart'; class CategoriesScreen extends StatefulWidget { const CategoriesScreen({ s.. ~196. Explicit Animations: Playing the Animation with AnimatedBuilder 1. 애니메이션을 구현해보자. 애니메이션에는 explicit(명시적), implicit(암묵적) 2가지의 종류가 있다. 아래 내용이 잘 정리되어있다. https://velog.io/@broccolism/Flutter-%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%A0%84%EC%B2%B4%EB%B3%B4%EA%B8%B0 [Flutter] 플러터 애니메이션 전체보기 플러터에서는 2가지 방법으로 애니메이션을 구현할 수 있다. velog.io 명시적은 매뉴얼로 사용자가 직접 만드는 것이고, 암묵적인 방법은 플러터에서 제공하는 애니메이션을 가져다 쓰는 것이다. 먼저 명시적 방법을 알아보자. - categories.dar.. 190. Swapping The "Favorite Button" Based On Provider State (State부분 마지막 강의) 1. 즐겨찾기 버튼 (별 모양)에 상태값에 따라 바꿔보자. - meal_detail.dart import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:meals/models/meal.dart'; import 'package:meals/providers/favorites_provider.dart'; class MealDetailsScreen extends ConsumerWidget { const MealDetailsScreen({ super.key, required this.meal, }); final Meal meal; @override Widget build(.. 189. Connecting Multiple Providers With Each Other (Dependent Providers) 1. provider들간에 값 연동이 가능하고, 1개 내의 provider파일안에 여러개의 provider를 생성 및 연동시킬 수 있다. filters_provider부분에 연동해보자. - filters_provider.dart import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:meals/providers/meals_provider.dart'; enum Filter { glutenFree, lactoseFree, vegetarian, vegan, } class FiltersNotifier extends StateNotifier { FiltersNotifier() : super({ Filter.glutenFree: false,.. 188. Outsourcing State Into The Provider 1. filters 화면에 초기값을 provider에서 가져오자. - filters.dart import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; // import 'package:meals/screens/tabs.dart'; // import 'package:meals/widgets/main_drawer.dart'; import 'package:meals/providers/filters_provider.dart'; class FiltersScreen extends ConsumerWidget { const FiltersScreen({super.key}); @override Widget .. ~187. Combining Local & Provider-managed State 1. filter 상태값도 provider로 설정해보자. - providers/filters_provider.dart(new) import 'package:flutter_riverpod/flutter_riverpod.dart'; enum Filter { glutenFree, lactoseFree, vegetarian, vegan, } class FiltersNotifier extends StateNotifier { FiltersNotifier() : super({ Filter.glutenFree: false, Filter.lactoseFree: false, Filter.vegetarian: false, Filter.vegan: false }); void setFilters(Map chosenFilters.. ~185. Triggering a Notifier Method 1. Provider를 다른 형식으로 사용해보자. 이전에는 단순 meal 데이터를 전역 상태 값으로 전달해주는 것이었다면, 이번에는 조금 더 동적인 상태값으로 전달해보자. (함수 사용) - providers/favorites_provider.dart(new) import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:meals/models/meal.dart'; class FavoriteMealsNotifier extends StateNotifier { FavoriteMealsNotifier() : super([]); bool toggleMealFavoriteStatus(Meal meal) { final mealIsFavorite = .. ~182. Using a Provider 1. 기존 앱에서 Provider를 적용해보자. 사용해보자. 기존 앱에는 다중 화면, 다중 위젯에서 데이터 이동하는데 불편한 점이 많았다. 이러한 문제를 해결하기 위해 App 전역에 상태 값을 관리 할 수 있는 방법을 살펴보자. riverpod이 그 도구이다. --> flutter pub add flutter_riverpod설치 - main.dart import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:meals/screens/tabs.dart'; final theme =.. 이전 1 2 다음
