我们使用此列表有虚拟类别，我们将有类别页面，其中包含用于类别的网格视图，还有一个用于具有相同类别的膳食的页面列表视图。要创建一个用于添加到购物车页面的应用程序，但问题是我想修改它使用提供者的代码我该怎么做？
//ignore_for_file：constant_identifier_names，unknown_const
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class Cart {
List<Meal> _items = [];
void addToCart(Meal meal) {
_items.add(meal);
}
void removeFromCart(Meal meal) {
_items.remove(meal);
}
List<Meal> get items {
return [..._items];
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Cart cart = Cart();
return MaterialApp(
title: 'Meals App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CategoryScreen(cart: cart),
);
}
}
class CategoryScreen extends StatelessWidget {
final Cart cart;
CategoryScreen({required this.cart});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Meals App'),
),
body: GridView(
children: DUMMY_CATEGORIES.map((catData) => CategoryItem(catData.id, catData.title, catData.color, cart)).toList(),
gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200, //WE NEED TO DETERMINE THIS FOR SURE SINCE IT'S MENTIONED IN METHOD. sets the maximum cross-axis extent (width or height, depending on the scrolling direction) of each grid item (height in this case).
childAspectRatio: 3 / 2, //the ratio of the cross-axis to the main axis for each grid item. each item'S width is 300px
crossAxisSpacing: 20, //x ekseni boyunca yatay olarak boşluk
mainAxisSpacing: 20, //y exseni boyunca yatay olarak boşluk
),
),
);
}
}
class Category {
final String id;
final String title;
final Color color;
Category({required this.id, required this.title, this.color = Colors.orange});
}
class CategoryItem extends StatelessWidget {
final String id;
final String title;
final Color color;
final Cart cart;
CategoryItem(this.id, this.title, this.color, this.cart);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => CategoryMealsScreen(id, title, cart),
),
);
},
child: Container(
padding: const EdgeInsets.all(10),
child: Text(title),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
color.withOpacity(0.7),
color,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(15),
),
),
);
}
}
class CategoryMealsScreen extends StatelessWidget {
final String categoryId;
final String categoryTitle;
final Cart cart;
CategoryMealsScreen(this.categoryId, this.categoryTitle, this.cart);
@override
Widget build(BuildContext context) {
final categoryMeals = DUMMY_MEALS.where((meal) {
return meal.categories.contains(categoryId);
}).toList();
return Scaffold(
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Meals - $categoryTitle'),
IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => CartScreen(cart),
),
);
},
),
],
),
),
body: ListView.builder(
itemCount: categoryMeals.length,
itemBuilder: (ctx, index) {
return MealItem(categoryMeals[index], cart);
},
),
);
}
}
class MealItem extends StatelessWidget {
final Meal meal;
final Cart cart;
MealItem(this.meal, this.cart);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => MealDetailScreen(meal, cart),
),
);
},
child: Card(
child: Column(
children: [
Image.network(
meal.imageUrl,
width: double.infinity,
height: 150,
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(meal.title),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text('Duration: ${meal.duration} min'),
Text(meal.complexity.toString().split('.').last),
IconButton(
icon: Icon(Icons.add_shopping_cart),
onPressed: () {
cart.addToCart(meal);
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Added to Cart'),
duration: Duration(seconds: 2),
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
cart.removeFromCart(meal);
},
),
),
);
},
),
],
),
],
),
),
);
}
}
class CartScreen extends StatelessWidget {
final Cart cart;
CartScreen(this.cart);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shopping Cart'),
),
body: ListView.builder(
itemCount: cart.items.length,
itemBuilder: (ctx, index) {
return ListTile(
title: Text(cart.items[index].title),
);
},
),
);
}
}
List<Category> DUMMY_CATEGORIES = [
Category(
id: 'c1',
title: 'Italian',
color: Colors.purple,
),
Category(
id: 'c2',
title: 'Quick & Easy',
color: Colors.red,
),
Category(
id: 'c3',
title: 'Hamburgers',
color: Colors.orange,
),
Category(
id: 'c4',
title: 'German',
color: Colors.amber,
),
Category(
id: 'c5',
title: 'Light & Lovely',
color: Colors.blue,
),
Category(
id: 'c6',
title: 'Exotic',
color: Colors.green,
),
Category(
id: 'c7',
title: 'Breakfast',
color: Colors.lightBlue,
),
Category(
id: 'c8',
title: 'Asian',
color: Colors.lightGreen,
),
Category(
id: 'c9',
title: 'French',
color: Colors.pink,
),
Category(
id: 'c10',
title: 'Summer',
color: Colors.teal,
),
];
class Meal {
final String id;
final List<String> categories;
final String title;
final String imageUrl;
final List<String> ingredients;
final List<String> steps;
final int duration;
final Complexity complexity;
final Affordability affordability;
final bool isGlutenFree;
final bool isLactoseFree;
final bool isVegan;
final bool isVegetarian;
const Meal({
required this.id,
required this.categories,
required this.title,
required this.imageUrl,
required this.ingredients,
required this.steps,
required this.duration,
required this.complexity,
required this.affordability,
required this.isGlutenFree,
required this.isLactoseFree,
required this.isVegan,
required this.isVegetarian,
});
}
enum Complexity {
Simple,
Challenging,
Hard,
}
enum Affordability {
Affordable,
Pricey,
Luxurious,
}
const DUMMY_MEALS = const [
Meal(
id: 'm1',
categories: [
'c1',
'c2',
],
title: 'Spaghetti with Tomato Sauce',
affordability: Affordability.Affordable,
complexity: Complexity.Simple,
imageUrl:
'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/800px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
duration: 20,
ingredients: ['4 Tomatoes', '1 Tablespoon of Olive Oil', '1 Onion', '250g Spaghetti', 'Spices', 'Cheese (optional)'],
steps: [
'Cut the tomatoes and the onion into small pieces.',
'Boil some water - add salt to it once it boils.',
'Put the spaghetti into the boiling water - they should be done in about 10 to 12 minutes.',
'In the meantime, heaten up some olive oil and add the cut onion.',
'After 2 minutes, add the tomato pieces, salt, pepper and your other spices.',
'The sauce will be done once the spaghetti are.',
'Feel free to add some cheese on top of the finished dish.'
],
isGlutenFree: false,
isVegan: true,
isVegetarian: true,
isLactoseFree: true,
),
Meal(
id: 'm2',
categories: [
'c2',
],
title: 'Toast Hawaii',
affordability: Affordability.Affordable,
complexity: Complexity.Simple,
imageUrl: 'https://cdn.pixabay.com/photo/2018/07/11/21/51/toast-3532016_1280.jpg',
duration: 10,
ingredients: ['1 Slice White Bread', '1 Slice Ham', '1 Slice Pineapple', '1-2 Slices of Cheese', 'Butter'],
steps: [
'Butter one side of the white bread',
'Layer ham, the pineapple and cheese on the white bread',
'Bake the toast for round about 10 minutes in the oven at 200°C'
],
isGlutenFree: false,
isVegan: false,
isVegetarian: false,
isLactoseFree: false,
),
Meal(
id: 'm3',
categories: [
'c2',
'c3',
],
title: 'Classic Hamburger',
affordability: Affordability.Pricey,
complexity: Complexity.Simple,
imageUrl: 'https://cdn.pixabay.com/photo/2014/10/23/18/05/burger-500054_1280.jpg',
duration: 45,
ingredients: ['300g Cattle Hack', '1 Tomato', '1 Cucumber', '1 Onion', 'Ketchup', '2 Burger Buns'],
steps: [
'Form 2 patties',
'Fry the patties for c. 4 minutes on each side',
'Quickly fry the buns for c. 1 minute on each side',
'Bruch buns with ketchup',
'Serve burger with tomato, cucumber and onion'
],
isGlutenFree: false,
isVegan: false,
isVegetarian: false,
isLactoseFree: true,
),
Meal(
id: 'm4',
categories: [
'c4',
],
title: 'Wiener Schnitzel',
affordability: Affordability.Luxurious,
complexity: Complexity.Challenging,
imageUrl: 'https://cdn.pixabay.com/photo/2018/03/31/19/29/schnitzel-3279045_1280.jpg',
duration: 60,
ingredients: [
'8 Veal Cutlets',
'4 Eggs',
'200g Bread Crumbs',
'100g Flour',
'300ml Butter',
'100g Vegetable Oil',
'Salt',
'Lemon Slices'
],
steps: [
'Tenderize the veal to about 2–4mm, and salt on both sides.',
'On a flat plate, stir the eggs briefly with a fork.',
'Lightly coat the cutlets in flour then dip into the egg, and finally, coat in breadcrumbs.',
'Heat the butter and oil in a large pan (allow the fat to get very hot) and fry the schnitzels until golden brown on both sides.',
'Make sure to toss the pan regularly so that the schnitzels are surrounded by oil and the crumbing becomes ‘fluffy’.',
'Remove, and drain on kitchen paper. Fry the parsley in the remaining oil and drain.',
'Place the schnitzels on awarmed plate and serve garnishedwith parsley and slices of lemon.'
],
isGlutenFree: false,
isVegan: false,
isVegetarian: false,
isLactoseFree: false,
),
Meal(
id: 'm5',
categories: [
'c2'
'c5',
'c10',
],
title: 'Salad with Smoked Salmon',
affordability: Affordability.Luxurious,
complexity: Complexity.Simple,
imageUrl: 'https://cdn.pixabay.com/photo/2016/10/25/13/29/smoked-salmon-salad-1768890_1280.jpg',
duration: 15,
ingredients: [
'Arugula',
'Lamb\'s Lettuce',
'Parsley',
'Fennel',
'200g Smoked Salmon',
'Mustard',
'Balsamic Vinegar',
'Olive Oil',
'Salt and Pepper'
],
steps: [
'Wash and cut salad and herbs',
'Dice the salmon',
'Process mustard, vinegar and olive oil into a dessing',
'Prepare the salad',
'Add salmon cubes and dressing'
],
isGlutenFree: true,
isVegan: false,
isVegetarian: true,
isLactoseFree: true,
),
Meal(
id: 'm6',
categories: [
'c6',
'c10',
],
title: 'Delicious Orange Mousse',
affordability: Affordability.Affordable,
complexity: Complexity.Hard,
imageUrl: 'https://cdn.pixabay.com/photo/2017/05/01/05/18/pastry-2274750_1280.jpg',
duration: 240,
ingredients: [
'4 Sheets of Gelatine',
'150ml Orange Juice',
'80g Sugar',
'300g Yoghurt',
'200g Cream',
'Orange Peel',
],
steps: [
'Dissolve gelatine in pot',
'Add orange juice and sugar',
'Take pot off the stove',
'Add 2 tablespoons of yoghurt',
'Stir gelatin under remaining yoghurt',
'Cool everything down in the refrigerator',
'Whip the cream and lift it under die orange mass',
'Cool down again for at least 4 hours',
'Serve with orange peel',
],
isGlutenFree: true,
isVegan: false,
isVegetarian: true,
isLactoseFree: false,
),
Meal(
id: 'm7',
categories: [
'c7',
],
title: 'Pancakes',
affordability: Affordability.Affordable,
complexity: Complexity.Simple,
imageUrl: 'https://cdn.pixabay.com/photo/2018/07/10/21/23/pancake-3529653_1280.jpg',
duration: 20,
ingredients: [
'1 1/2 Cups all-purpose Flour',
'3 1/2 Teaspoons Baking Powder',
'1 Teaspoon Salt',
'1 Tablespoon White Sugar',
'1 1/4 cups Milk',
'1 Egg',
'3 Tablespoons Butter, melted',
],
steps: [
'In a large bowl, sift together the flour, baking powder, salt and sugar.',
'Make a well in the center and pour in the milk, egg and melted butter; mix until smooth.',
'Heat a lightly oiled griddle or frying pan over medium high heat.',
'Pour or scoop the batter onto the griddle, using approximately 1/4 cup for each pancake. Brown on both sides and serve hot.'
],
isGlutenFree: true,
isVegan: false,
isVegetarian: true,
isLactoseFree: false,
),
Meal(
id: 'm8',
categories: [
'c8',
],
title: 'Creamy Indian Chicken Curry',
affordability: Affordability.Pricey,
complexity: Complexity.Challenging,
imageUrl: 'https://cdn.pixabay.com/photo/2018/06/18/16/05/indian-food-3482749_1280.jpg',
duration: 35,
ingredients: [
'4 Chicken Breasts',
'1 Onion',
'2 Cloves of Garlic',
'1 Piece of Ginger',
'4 Tablespoons Almonds',
'1 Teaspoon Cayenne Pepper',
'500ml Coconut Milk',
],
steps: [
'Slice and fry the chicken breast',
'Process onion, garlic and ginger into paste and sauté everything',
'Add spices and stir fry',
'Add chicken breast + 250ml of water and cook everything for 10 minutes',
'Add coconut milk',
'Serve with rice'
],
isGlutenFree: true,
isVegan: false,
isVegetarian: false,
isLactoseFree: true,
),
Meal(
id: 'm9',
categories: [
'c9',
],
title: 'Chocolate Souffle',
affordability: Affordability.Affordable,
complexity: Complexity.Hard,
imageUrl: 'https://cdn.pixabay.com/photo/2014/08/07/21/07/souffle-412785_1280.jpg',
duration: 45,
ingredients: [
'1 Teaspoon melted Butter',
'2 Tablespoons white Sugar',
'2 Ounces 70% dark Chocolate, broken into pieces',
'1 Tablespoon Butter',
'1 Tablespoon all-purpose Flour',
'4 1/3 tablespoons cold Milk',
'1 Pinch Salt',
'1 Pinch Cayenne Pepper',
'1 Large Egg Yolk',
'2 Large Egg Whites',
'1 Pinch Cream of Tartar',
'1 Tablespoon white Sugar',
],
steps: [
'Preheat oven to 190°C. Line a rimmed baking sheet with parchment paper.',
'Brush bottom and sides of 2 ramekins lightly with 1 teaspoon melted butter; cover bottom and sides right up to the rim.',
'Add 1 tablespoon white sugar to ramekins. Rotate ramekins until sugar coats all surfaces.',
'Place chocolate pieces in a metal mixing bowl.',
'Place bowl over a pan of about 3 cups hot water over low heat.',
'Melt 1 tablespoon butter in a skillet over medium heat. Sprinkle in flour. Whisk until flour is incorporated into butter and mixture thickens.',
'Whisk in cold milk until mixture becomes smooth and thickens. Transfer mixture to bowl with melted chocolate.',
'Add salt and cayenne pepper. Mix together thoroughly. Add egg yolk and mix to combine.',
'Leave bowl above the hot (not simmering) water to keep chocolate warm while you whip the egg whites.',
'Place 2 egg whites in a mixing bowl; add cream of tartar. Whisk until mixture begins to thicken and a drizzle from the whisk stays on the surface about 1 second before disappearing into the mix.',
'Add 1/3 of sugar and whisk in. Whisk in a bit more sugar about 15 seconds.',
'whisk in the rest of the sugar. Continue whisking until mixture is about as thick as shaving cream and holds soft peaks, 3 to 5 minutes.',
'Transfer a little less than half of egg whites to chocolate.',
'Mix until egg whites are thoroughly incorporated into the chocolate.',
'Add the rest of the egg whites; gently fold into the chocolate with a spatula, lifting from the bottom and folding over.',
'Stop mixing after the egg white disappears. Divide mixture between 2 prepared ramekins. Place ramekins on prepared baking sheet.',
'Bake in preheated oven until scuffles are puffed and have risen above the top of the rims, 12 to 15 minutes.',
],
isGlutenFree: true,
isVegan: false,
isVegetarian: true,
isLactoseFree: false,
),
Meal(
id: 'm10',
categories: [
'c2',
'c5',
'c10',
],
title: 'Asparagus Salad with Cherry Tomatoes',
affordability: Affordability.Luxurious,
complexity: Complexity.Simple,
imageUrl: 'https://cdn.pixabay.com/photo/2018/04/09/18/26/asparagus-3304997_1280.jpg',
duration: 30,
ingredients: ['White and Green Asparagus', '30g Pine Nuts', '300g Cherry Tomatoes', 'Salad', 'Salt, Pepper and Olive Oil'],
steps: [
'Wash, peel and cut the asparagus',
'Cook in salted water',
'Salt and pepper the asparagus',
'Roast the pine nuts',
'Halve the tomatoes',
'Mix with asparagus, salad and dressing',
'Serve with Baguette'
],
isGlutenFree: true,
isVegan: true,
isVegetarian: true,
isLactoseFree: true,
),
];
class MealDetailScreen extends StatelessWidget {
final Meal meal;
final Cart cart;
MealDetailScreen(this.meal, this.cart);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(meal.title),
),
body: SingleChildScrollView(
child: Column(
children: [
Image.network(
meal.imageUrl,
width: double.infinity,
height: 300,
fit: BoxFit.cover,
),
_buildSectionTitle(context, 'Ingredients'),
_buildSectionContainer(
ListView.builder(
itemCount: meal.ingredients.length,
itemBuilder: (ctx, index) => Card(
child: Padding(
padding: EdgeInsets.symmetric(
vertical: 5,
horizontal: 10,
),
child: Text(meal.ingredients[index]),
),
),
),
),
_buildSectionTitle(context, 'Steps'),
_buildSectionContainer(
ListView.builder(
itemCount: meal.steps.length,
itemBuilder: (ctx, index) => Column(
children: [
ListTile(
leading: CircleAvatar(
child: Text('# ${(index + 1)}'),
),
title: Text(meal.steps[index]),
),
Divider(),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
cart.addToCart(meal);
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Added to Cart'),
duration: Duration(seconds: 2),
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
cart.removeFromCart(meal);
},
),
),
);
},
child: Text('Add to Cart'),
),
],
),
],
),
),
);
}
Widget _buildSectionTitle(BuildContext context, String title) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Text(
title,
style: Theme.of(context).textTheme.headline6,
),
);
}
Widget _buildSectionContainer(Widget child) {
return Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.all(10),
height: 200,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.circular(10),
),
child: child,
);
}}
执行以下操作：
将提供商添加到您的
pubspec.yamlpubspec.yamldependencies:
flutter:
sdk: flutter
provider: ^x.x.x # Use the latest version of provider
更新购物车类： 更改您的
CartChangeNotifiernotifyListeners()class Cart with ChangeNotifier {
List<Meal> _items = [];
void addToCart(Meal meal) {
_items.add(meal);
notifyListeners();
}
void removeFromCart(Meal meal) {
_items.remove(meal);
notifyListeners();
}
List<Meal> get items {
return [..._items];
}
}
使用提供程序小部件包装您的应用程序： 在您的
mainChangeNotifierProviderMyAppvoid main() => runApp(ChangeNotifierProvider(
create: (context) => Cart(),
child: MyApp(),
));
在小部件中使用购物车提供程序： 无论您需要在何处访问购物车，请使用
Provider.of<Cart>(context)Consumer<Cart>IconButton(
icon: Icon(Icons.add_shopping_cart),
onPressed: () {
Provider.of<Cart>(context, listen: false).addToCart(meal);
// Other code...
},
),
如果购物车更改时小部件需要重建，请用
Consumer<Cart>删除直接购物车通行证： 由于购物车现在是通过 Provider 提供的，因此您不需要通过构造函数将其传递下去。
您需要访问购物车的每个小部件都将使用
Provider.of<Cart>(context)Consumer<Cart>