19.7 费用小计
实现步骤:
第 1 步:组件 BuildTotalItemlib/pages/my/order_details/widgets/total_item.dart
12345678910111213141516171819202122232425262728293031323334353637import 'package:flutter/material.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';/// 小计项class BuildTotalItem extends StatelessWidget { const BuildTotalItem({ Key? key, this.title, this.price, this.currencySymbol, }) : super(key: key); /// 标题 f ...
2.1 主题配置(明亮、黑暗)主题样式配置,实现步骤:
第 1 步:下载颜色配置https://material-foundation.github.io/material-theme-builder/#/custom
吸取设计稿中的主色
lib/common/style/lib_color_schemes.g.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465import 'package:flutter/material.dart';const seed = Color(0xFF5F84FF);const lightColorScheme = ColorScheme( brightness: Brightness.light, primary: seed, onPrimary: Color(0xFFFFFFFF), p ...
18.1 下单界面编写
实现步骤:
第 1 步:i18nlib/common/i18n/locale_keys.dart
123456789101112131415161718// 下单 checkoutstatic const placeOrderTitle = "place_order_title";static const placeOrderPayment = "place_order_payment";static const placeOrderShippingAddress = "place_order_shipping_address";static const placeOrderQuantity = "place_order_quantity";static const placeOrderPrice = "place_order_price";static const placeOrderPriceShipping = "p ...
2.2 字体、颜色、圆角、间隙配置样式配置,实现步骤:
整个 app 的样式需要统一规范的管理,你可以理解成常量抽取定义。
第 1 步:颜色一个 app 在生产的时候不会只有 md3 定义的那么几种颜色,毕竟每家都有自己的一套设计系统。
如 饿了么
这里就有 成功、警告、失败、提示 几个颜色
lib/common/style/colors.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import 'package:flutter/material.dart';import 'package:get/get.dart';/// 应用颜色class AppColors { /// *********************** ...
18.2 送货地址栏位
实现步骤:
第 1 步:UserService 加入送货地址简述lib/common/services/user.dart
123/// 送货地址String get shipping => "${profile.shipping?.address1}, ${profile.shipping?.postcode}, ${profile.shipping?.state}, ${profile.shipping?.country}";
第 2 步:控制器lib/pages/cart/buy_now/controller.dart
12// 送货地址String shippingAddress = "";
123456// 初始_initData() { shippingAddress = UserService.to.shipping; updat ...
18.3 数量修改, 小计栏位
实现步骤:
第 1 步:控制器lib/pages/cart/buy_now/controller.dart
12345678// 数量int quantity = 1;// 运费double get shipping => 0;// 折扣double get discount => 0;// 商品合计价格double get totalPrice => double.parse(product.price!) * quantity;
12345678// 修改数量void onQuantityChange(int value) { if (value <= 0) { value = 1; } quantity = value; update(["buy_now"]);}
第 2 步:价格行组件lib/pages/cart/buy_now/widgets/price ...
18.4 优惠券栏位
实现步骤:
第 1 步:i18n 多语言lib/common/i18n/locale_keys.dart
1234// 优惠码static const promoCode = "promo_code";static const promoDesc = "promo_desc";static const promoEnterCodeTip = "promo_enter_code_tip";
lib/common/i18n/locales/locale_en.dart
12345// 优惠码LocaleKeys.promoCode: 'Apply Promo Code',LocaleKeys.promoDesc: 'Promo Code is simply dummy text the printing and typesetting industry',LocaleKeys.promoEn ...
19.5 发件人、收件人栏位
实现步骤:
第 1 步:BuildBillAddress 组件lib/pages/my/order_details/widgets/bill_address.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import 'package:flutter/material.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';/// 订单地址项class BuildBillAddress extends StatelessWidget { const BuildBillAddress({ Key? key, this.title, this.address, ...
20.1 修改我的信息页面
实现步骤:
第 1 步:i18nlib/common/i18n/locale_keys.dart
1234567891011121314 // 拍照、相册 static const pickerTakeCamera = 'picker_take_camera'; static const pickerSelectAlbum = 'picker_select_album';// 个人信息修改 static const profileEditTitle = "profile_edit_title"; static const profileEditMyPhoto = "profile_edit_my_photo"; static const profileEditFirstName = "profile_edit_first_name"; static const profileEditLastName = "profil ...
18.5 下单成功界面
实现步骤:
第 1 步:api 接口接口地址 post /orders
数据格式
12345678910111213141516171819202122232425262728293031323334{ "billing": { "first_name": "ducafe", "last_name": "cat", "company": "", "address_1": "bj", "address_2": "", "city": "bj", "state": "CN2", "postcode": ...