{"id":395946,"date":"2024-06-29T12:32:26","date_gmt":"2024-06-29T12:32:26","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=395946"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=395946","title":{"rendered":"\u041a\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e StateNotifier \u0438 AsyncValue \u0432\u043e Flutter<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figcaption><\/figure>\n

\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445, \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0445 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n

\u0415\u0441\u043b\u0438 \u043c\u044b \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 (UI) \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u0438 \u043d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442, \u0431\u044b\u043b\u0430 \u043b\u0438 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d\u0438 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c, \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439.<\/p>\n

\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430, \u0432\u043e\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043a\u043d\u043e\u043f\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043e\u043f\u043b\u0430\u0442\u0435 \u0442\u043e\u0432\u0430\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Stripe:<\/p>\n

<\/figcaption><\/figure>\n

\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f:\u00a0 \u041f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043f\u043b\u0430\u0442\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Stripe<\/em><\/p>\n

\u041a\u0430\u043a \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 «Pay (\u041e\u043f\u043b\u0430\u0442\u0438\u0442\u044c)» \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0418 \u0441\u0430\u043c\u0430 \u043f\u043b\u0430\u0442\u0435\u0436\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u043b\u0430\u0442\u044b.<\/p>\n

\u0415\u0441\u043b\u0438 \u043f\u043b\u0430\u0442\u0435\u0436 \u043d\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043f\u0440\u0438\u0447\u0438\u043d\u0435, \u043d\u0430\u0434\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e UI \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u043d\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043e\u0431 \u044d\u0442\u043e\u043c.<\/p>\n

\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u0442 \u0432\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0432 \u0441\u0443\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0432 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 Flutter.<\/p>\n

\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c StatefulWidget<\/h2>\n

\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u044b, \u0438 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438\u043b\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n

\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0430 PaymentButton<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u0442\u0435\u0436\u0430:<\/p>\n

class PaymentButton extends StatelessWidget {   @override   Widget build(BuildContext context) {     \/\/ note: this is a *custom* button class that takes an extra `isLoading` argument     return PrimaryButton(       text: 'Pay',       \/\/ this will show a spinner if loading is true       isLoading: false,       onPressed: () {         \/\/ use a service locator or provider to get the checkout service         \/\/ make the payment       },     );   } }<\/code><\/pre>\n
\u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0438\u0434\u0436\u0435\u0442 \u0441\u0442\u0435\u0439\u0442\u0444\u0443\u043b \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0434\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f:<\/p>\n
class _PaymentButtonState extends State<PaymentButton> {   \/\/ loading and error state variables   bool _isLoading = false;   String _errorMessage = '';      Future<void> pay() async {     \/\/ make payment, update state variables, and show an alert on error   }    @override   Widget build(BuildContext context) {     \/\/ same as before,      return PrimaryButton(       text: 'Pay',       \/\/ use _isLoading variable defined above       isLoading: _isLoading,       onPressed: _isLoading ? null : pay,     );   } }<\/code><\/pre>\n
\u042d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e \u043e\u043d \u0432\u0435\u0441\u044c\u043c\u0430 \u0440\u0443\u0442\u0438\u043d\u043d\u044b\u0439 \u0438 \u0447\u0440\u0435\u0432\u0430\u0442 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438.<\/p>\n
\u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u043c\u044b \u0436\u0435 \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0441\u0442\u0435\u0439\u0442\u0444\u0443\u043b \u0438 \u043f\u043e\u0432\u0441\u044e\u0434\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u0432\u0435\u0440\u043d\u043e?<\/p>\n
\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u0441\u0435 \u0431\u043e\u043b\u0435\u0435 DRY<\/h2>\n
\u0427\u0442\u043e \u043d\u0430\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0443\u0436\u043d\u043e, \u0442\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u043e \u0432\u0441\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n
\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f AsyncValue<\/u><\/a> \u0438 StateNotifier<\/u><\/a> \u0438\u0437 \u043f\u0430\u043a\u0435\u0442\u0430 Riverpod<\/u><\/a>.<\/p>\n
\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043c, \u0442\u043e \u0441\u043c\u043e\u0436\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u043a\u043e\u0434\u0430, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0437\u0434\u0435\u0441\u044c:<\/p>\n
class PaymentButton extends ConsumerWidget {   @override   Widget build(BuildContext context, WidgetRef ref) {     \/\/ error handling     ref.listen<AsyncValue<void>>(       paymentButtonControllerProvider,       (_, state) => state.showSnackBarOnError(context),     );     final paymentState = ref.watch(paymentButtonControllerProvider);     \/\/ note: this is a *custom* button class that takes an extra `isLoading` argument     return PrimaryButton(       text: 'Pay',       \/\/ show a spinner if loading is true       isLoading: paymentState.isLoading,       \/\/ disable button if loading is true       onPressed: paymentState.isLoading         ? null         : () => ref.read(paymentButtonControllerProvider.notifier).pay(),     );   } }<\/code><\/pre>\n
\u041d\u043e \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u044d\u0442\u0430\u043f\u043d\u043e.<\/p>\n
\u0411\u0430\u0437\u043e\u0432\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430: \u0432\u0438\u0434\u0436\u0435\u0442 PaymentButton<\/h2>\n
\u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u0430 PaymentButton<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d \u0440\u0430\u043d\u0435\u0435:<\/p>\n
import 'package:flutter_riverpod\/flutter_riverpod.dart';  \/\/ note: this time we subclass from ConsumerWidget so that we can get a WidgetRef below class PaymentButton extends ConsumerWidget {   @override   Widget build(BuildContext context, WidgetRef ref) {     \/\/ note: this is a custom button class that takes an extra `isLoading` argument     return PrimaryButton(       text: 'Pay',       isLoading: false,       onPressed: () => ref.read(checkoutServiceProvider).pay(),     );   } }<\/code><\/pre>\n
\u041a\u043e\u0433\u0434\u0430 \u043a\u043d\u043e\u043f\u043a\u0430 \u043d\u0430\u0436\u0430\u0442\u0430, \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c ref.read()<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u043a\u0430\u0437\u0430 \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043e\u043f\u043b\u0430\u0442\u0443.<\/p>\n
\n
\u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b \u0441 ConsumerWidget<\/code> \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c ref.read()<\/code>, \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u0435\u0441\u044c \u043a \u043c\u043e\u0435\u043c\u0443 Essential Guide to Riverpod<\/u><\/a>.<\/p>\n<\/blockquote>\n
\u0414\u043b\u044f \u0441\u043f\u0440\u0430\u0432\u043a\u0438, \u0432\u043e\u0442 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c CheckoutService<\/code> \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440:<\/p>\n
\/\/ sample interface for the checkout service abstract class CheckoutService {   \/\/ this will succeed or throw an error   Future<void> pay(); }  final checkoutServiceProvider = Provider<CheckoutService>((ref) {   \/\/ return some concrete implementation of CheckoutService });<\/code><\/pre>\n
\u042d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u043e \u043c\u0435\u0442\u043e\u0434 pay()<\/code> \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0442\u044f\u043d\u0443\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0435\u043a\u0443\u043d\u0434, \u0438 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e UI \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n
\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0441 \u044d\u0442\u0438\u043c.<\/p>\n
\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u043e\u0448\u0438\u0431\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e AsyncValue<\/h2>\n
\u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 UI \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0442\u0440\u0435\u043c\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438:<\/p>\n