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 ...
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 ...
2.2 字体、颜色、圆角、间隙配置样式配置,实现步骤:
整个 app 的样式需要统一规范的管理,你可以理解成常量抽取定义。
第 1 步:颜色一个 app 在生产的时候不会只有 md3 定义的那么几种颜色,毕竟每家都有自己的一套设计系统。
如 饿了么
这里就有 成功、警告、失败、提示 几个颜色
lib/common/style/colors.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283import 'package:flutter/material.dart';import 'package:get/get.dart';/// 应用颜色class AppColors { /// *********************** ...
20.2 设备动态权限查询
实现步骤:
第 1 步:安装插件 permission_handlerpubspec.yaml
123dependencies: # permission 权限 permission_handler: 9.2.0
第 2 步:iosios/Podfile
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970...post_install do |installer| installer.pods_project.targets.each do |target| flutter_additional_ios_build_settings(target) ######################################################################### ## permi ...
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 ...
20.3 相册、拍摄头像
实现步骤:
第 1 步:拍照 相册 插件
pubspec.yaml
1234dependencies: # 媒体选择 wechat_assets_picker: 7.2.0 wechat_camera_picker: 3.1.0
Android 配置
android/app/src/main/AndroidManifest.xml
123<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.ACCESS_MEDIA_LOCATION"/>
如果你的目标 SDK 版本大于 ...
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 ...
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.5 下单成功界面
实现步骤:
第 1 步:api 接口接口地址 post /orders
数据格式
12345678910111213141516171819202122232425262728293031323334{ "billing": { "first_name": "ducafe", "last_name": "cat", "company": "", "address_1": "bj", "address_2": "", "city": "bj", "state": "CN2", "postcode": ...
20.4 名称、邮件、密码 保存
实现步骤:
第 1 步:api 接口put /users/me
lib/common/api/user.dart
123456789101112/// 保存用户 first name 、 last name 、 emailstatic Future<UserProfileModel> saveBaseInfo(UserProfileModel req) async { var res = await WPHttpService.to.put( '/users/me', data: { "first_name": req.firstName, "last_name": req.lastName, "email": req.email, }, ); return UserProfileModel.fromJson(res.dat ...