mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
Add provider_shopper (#87)
This is the code for the sample at https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple.
This commit is contained in:
Filip Hracek
GitHub
17
provider_shopper/lib/common/theme.dart
Normal file
17
provider_shopper/lib/common/theme.dart
Normal file
@@ -0,0 +1,17 @@
|
||||
// Copyright 2019 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
final appTheme = ThemeData(
|
||||
primarySwatch: Colors.yellow,
|
||||
textTheme: TextTheme(
|
||||
display4: TextStyle(
|
||||
fontFamily: 'Corben',
|
||||
fontWeight: FontWeight.w700,
|
||||
fontSize: 24,
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
);
|
||||
44
provider_shopper/lib/main.dart
Normal file
44
provider_shopper/lib/main.dart
Normal file
@@ -0,0 +1,44 @@
|
||||
// Copyright 2019 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:provider_shopper/common/theme.dart';
|
||||
import 'package:provider_shopper/models/cart.dart';
|
||||
import 'package:provider_shopper/models/catalog.dart';
|
||||
import 'package:provider_shopper/screens/cart.dart';
|
||||
import 'package:provider_shopper/screens/catalog.dart';
|
||||
|
||||
void main() {
|
||||
runApp(MyApp());
|
||||
}
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Using MultiProvider is convenient when providing multiple objects.
|
||||
return MultiProvider(
|
||||
providers: [
|
||||
// In this sample app, CatalogModel never changes, so a simple Provider
|
||||
// is sufficient.
|
||||
Provider(builder: (context) => CatalogModel()),
|
||||
// CartModel is implemented as a ChangeNotifier, which calls for the use
|
||||
// of ChangeNotifierProvider. Moreover, CartModel depends
|
||||
// on CatalogModel, so a ProxyProvider is needed.
|
||||
ChangeNotifierProxyProvider<CatalogModel, CartModel>(
|
||||
builder: (context, catalog, previousCart) =>
|
||||
CartModel(catalog, previousCart)),
|
||||
],
|
||||
child: MaterialApp(
|
||||
title: 'Provider Demo',
|
||||
theme: appTheme,
|
||||
initialRoute: '/',
|
||||
routes: {
|
||||
'/': (context) => MyCatalog(),
|
||||
'/cart': (context) => MyCart(),
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
38
provider_shopper/lib/models/cart.dart
Normal file
38
provider_shopper/lib/models/cart.dart
Normal file
@@ -0,0 +1,38 @@
|
||||
// Copyright 2019 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:provider_shopper/models/catalog.dart';
|
||||
|
||||
class CartModel extends ChangeNotifier {
|
||||
/// The current catalog. Used to construct items from numeric ids.
|
||||
final CatalogModel _catalog;
|
||||
|
||||
/// Internal, private state of the cart. Stores the ids of each item.
|
||||
final List<int> _itemIds;
|
||||
|
||||
/// Construct a CartModel instance that is backed by a [CatalogModel] and
|
||||
/// an optional previous state of the cart.
|
||||
///
|
||||
/// If [previous] is not `null`, it's items are copied to the newly
|
||||
/// constructed instance.
|
||||
CartModel(this._catalog, CartModel previous)
|
||||
: assert(_catalog != null),
|
||||
_itemIds = previous?._itemIds ?? [];
|
||||
|
||||
/// List of items in the cart.
|
||||
List<Item> get items => _itemIds.map((id) => _catalog.getById(id)).toList();
|
||||
|
||||
/// The current total price of all items.
|
||||
int get totalPrice =>
|
||||
items.fold(0, (total, current) => total + current.price);
|
||||
|
||||
/// Adds [item] to cart. This is the only way to modify the cart from outside.
|
||||
void add(Item item) {
|
||||
_itemIds.add(item.id);
|
||||
// This line tells [Model] that it should rebuild the widgets that
|
||||
// depend on it.
|
||||
notifyListeners();
|
||||
}
|
||||
}
|
||||
63
provider_shopper/lib/models/catalog.dart
Normal file
63
provider_shopper/lib/models/catalog.dart
Normal file
@@ -0,0 +1,63 @@
|
||||
// Copyright 2019 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// A proxy of the catalog of items the user can buy.
|
||||
///
|
||||
/// In a real app, this might be backed by a backend and cached on device.
|
||||
/// In this sample app, the catalog is procedurally generated and infinite.
|
||||
///
|
||||
/// For simplicity, the catalog is expected to be immutable (no products are
|
||||
/// expected to be added, removed or changed during the execution of the app).
|
||||
class CatalogModel {
|
||||
static const _itemNames = [
|
||||
'Code Smell',
|
||||
'Control Flow',
|
||||
'Interpreter',
|
||||
'Recursion',
|
||||
'Sprint',
|
||||
'Heisenbug',
|
||||
'Spaghetti',
|
||||
'Hydra Code',
|
||||
'Off-By-One',
|
||||
'Scope',
|
||||
'Callback',
|
||||
'Closure',
|
||||
'Automata',
|
||||
'Bit Shift',
|
||||
'Currying',
|
||||
];
|
||||
|
||||
/// Get item by [id].
|
||||
///
|
||||
/// In this sample, the catalog is infinite, looping over [_itemNames].
|
||||
Item getById(int id) => Item(id, _itemNames[id % _itemNames.length]);
|
||||
|
||||
/// Get item by its position in the catalog.
|
||||
Item getByPosition(int position) {
|
||||
// In this simplified case, an item's position in the catalog
|
||||
// is also its id.
|
||||
return getById(position);
|
||||
}
|
||||
}
|
||||
|
||||
@immutable
|
||||
class Item {
|
||||
final int id;
|
||||
final String name;
|
||||
final Color color;
|
||||
final int price = 42;
|
||||
|
||||
Item(this.id, this.name)
|
||||
// To make the sample app look nicer, each item is given one of the
|
||||
// Material Design primary colors.
|
||||
: color = Colors.primaries[id % Colors.primaries.length];
|
||||
|
||||
@override
|
||||
int get hashCode => id;
|
||||
|
||||
@override
|
||||
bool operator ==(Object other) => other is Item && other.id == id;
|
||||
}
|
||||
83
provider_shopper/lib/screens/cart.dart
Normal file
83
provider_shopper/lib/screens/cart.dart
Normal file
@@ -0,0 +1,83 @@
|
||||
// Copyright 2019 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:provider_shopper/models/cart.dart';
|
||||
|
||||
class MyCart extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Cart', style: Theme.of(context).textTheme.display4),
|
||||
backgroundColor: Colors.white,
|
||||
),
|
||||
body: Container(
|
||||
color: Colors.yellow,
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: _CartList(),
|
||||
),
|
||||
),
|
||||
Divider(height: 4, color: Colors.black),
|
||||
_CartTotal()
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CartList extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var itemNameStyle = Theme.of(context).textTheme.title;
|
||||
var cart = Provider.of<CartModel>(context);
|
||||
|
||||
return ListView.builder(
|
||||
itemCount: cart.items.length,
|
||||
itemBuilder: (context, index) => ListTile(
|
||||
leading: Icon(Icons.done),
|
||||
title: Text(
|
||||
cart.items[index].name,
|
||||
style: itemNameStyle,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _CartTotal extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var hugeStyle = Theme.of(context).textTheme.display4.copyWith(fontSize: 48);
|
||||
|
||||
return SizedBox(
|
||||
height: 200,
|
||||
child: Center(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Consumer<CartModel>(
|
||||
builder: (context, cart, child) =>
|
||||
Text('\$${cart.totalPrice}', style: hugeStyle)),
|
||||
SizedBox(width: 24),
|
||||
FlatButton(
|
||||
onPressed: () {
|
||||
Scaffold.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Buying not supported yet.')));
|
||||
},
|
||||
color: Colors.white,
|
||||
child: Text('BUY'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
97
provider_shopper/lib/screens/catalog.dart
Normal file
97
provider_shopper/lib/screens/catalog.dart
Normal file
@@ -0,0 +1,97 @@
|
||||
// Copyright 2019 The Flutter team. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:provider_shopper/models/cart.dart';
|
||||
import 'package:provider_shopper/models/catalog.dart';
|
||||
|
||||
class MyCatalog extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
_MyAppBar(),
|
||||
SliverToBoxAdapter(child: SizedBox(height: 12)),
|
||||
SliverList(
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) => _MyListItem(index)),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _AddButton extends StatelessWidget {
|
||||
final Item item;
|
||||
|
||||
const _AddButton({Key key, @required this.item}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var cart = Provider.of<CartModel>(context);
|
||||
|
||||
return FlatButton(
|
||||
onPressed: cart.items.contains(item) ? null : () => cart.add(item),
|
||||
splashColor: Theme.of(context).primaryColor,
|
||||
child: cart.items.contains(item)
|
||||
? Icon(Icons.check, semanticLabel: 'ADDED')
|
||||
: Text('ADD'),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MyAppBar extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SliverAppBar(
|
||||
title: Text('Catalog', style: Theme.of(context).textTheme.display4),
|
||||
floating: true,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: Icon(Icons.shopping_cart),
|
||||
onPressed: () => Navigator.pushNamed(context, '/cart'),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MyListItem extends StatelessWidget {
|
||||
final int index;
|
||||
|
||||
_MyListItem(this.index, {Key key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var catalog = Provider.of<CatalogModel>(context);
|
||||
var item = catalog.getByPosition(index);
|
||||
var textTheme = Theme.of(context).textTheme.title;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
child: LimitedBox(
|
||||
maxHeight: 48,
|
||||
child: Row(
|
||||
children: [
|
||||
AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: Container(
|
||||
color: item.color,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 24),
|
||||
Expanded(
|
||||
child: Text(item.name, style: textTheme),
|
||||
),
|
||||
SizedBox(width: 24),
|
||||
_AddButton(item: item),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user