Flutter 2 商城App实战指南（支持Null safety）

购物车列表项UI如图所示，产品特点结合类型拟定Json数据：

{
    "id": 46,
    "title": "能方研影",
    "price": 61.96,
    "cover": "http://dummyimage.com/300x300/B9C6C3&text=shopping%20mall",
    "count": 3,
    "color": "蓝色",
    "size": "XS",
}

Json to Dart：前往quicktype，将Json数据复制进去转化为 Dart 数据模型（当然也能够手动编写）

class CartInfoModel {
  CartInfoModel({
    required this.id,
    required this.title,
    required this.price,
    required this.cover,
    required this.count,
    required this.color,
    required this.size,
  });
  int id;
  String title;
  double price;
  String cover;
  int count;
  String color;
  String size;
  ...
}

购物车状况办理

项目运用 Flutter 官方引荐的 riverpod （一种反应式缓存和数据绑定结构） 进行购物车状况办理，让数据能够跨组件运用。

引进插件并运用：

在项目终端履行指令flutter pub add flutter_riverpod下载插件。创立 lib/providers/cart_provider.dart文件：

import 'package:flutter_riverpod/flutter_riverpod.dart';
...
const cartPrefsKey = 'cartList';
class CartNotifier extends ChangeNotifier {
  // 购物车列表
  final List<CartInfoModel> cartList = <CartInfoModel>[];
  // 总数量
  int get totalCount {
    int total = 0;
    for (var item in cartList) {
      total += item.count;
    }
    return total;
  }
  // 总价格
  double get totalPrice {
    double total = 0;
    for (var item in cartList) {
      total += item.price * item.count;
    }
    return total;
  }
  // 参加购物车
  // 更新购物车数量
  // 移除购物车指定项
  // 查询/初始化购物车
}
// ChangeNotifierProvider 用法
final cartProvider = ChangeNotifierProvider<CartNotifier>((ref) {
  return CartNotifier();
});

注册大局状况：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
    runApp(
        // ProviderScope包裹进口组件，供给大局状况
        ProviderScope(child: MyApp())
    );
}

在组件中读取：

// 读取购物车列表
List<CartInfoModel> list =
    ref.watch(cartProvider.select((value) => value.cartList));
// 读取结算价格
double totalPrice =
    ref.watch(cartProvider.select((value) => value.totalPrice));
// 读取总数量
int totalCount =
    ref.watch(cartProvider.select((value) => value.totalCount));
// 调用办法
ref.read(cartProvider.notifier).pushCart(_cartInfo);

参加购物车

首要查找同一标准的产品，有则更新数量，无则参加购物车。参加购物车的 cartInfo 需求深复制防止影响再次挑选该产品其他标准的时分改动购物车数据。购物车数据改变后需求调用 notifyListeners 告诉状况办理器更新状况。

/// 参加购物车
void pushCart(CartInfoModel cartInfo) {
    // 查找 id/color/size 都相同的购物车产品
    int idx = cartList.indexWhere((item) => (item.id == cartInfo.id &&
        item.color == cartInfo.color &&
        item.size == cartInfo.size));
    if (idx > -1) {
      // 存在则数量+1
      cartList[idx].count += cartInfo.count;
    } else {
      // 不存在则增加（这儿深复制cartInfo）
      cartList.add(cartInfoModelFromJson(cartInfoModelToJson(cartInfo)));
    }
    // 告诉 CartNotifier 状况更新
    notifyListeners();
    // 更新数据存储到本地
    updCartPrefs();
}
/// 更新购物车数量
void updCartCount(CartInfoModel cartInfo, int count) {
    // 查找 id/color/size 都相同的购物车产品
    int idx = cartList.indexWhere((item) => (item.id == cartInfo.id &&
        item.color == cartInfo.color &&
        item.size == cartInfo.size));
    if (idx > -1) {
      // 存在则更新数量
      cartList[idx].count = count;
    }
    notifyListeners();
    // 更新数据存储到本地
    updCartPrefs();
}
/// 移除购物车指定产品
void renmoveCart(CartInfoModel cartInfo) {
    // 查找 id/color/size 都相同的购物车产品
    int idx = cartList.indexWhere((item) => (item.id == cartInfo.id &&
        item.color == cartInfo.color &&
        item.size == cartInfo.size));
    if (idx > -1) {
      // 存在则移除该项
      cartList.removeAt(idx);
    }
    notifyListeners();
    // 更新数据存储到本地
    updCartPrefs();
}

购物车本地存储

需求： 产品参加到购物车，还未结算并退出运用，下次进来购物车产品还在。
思路： 每次购物车数据有改动需求把数据更新到本地存储，下次翻开App的时分从本地康复数据到购物车。
耐久化存储： 项目运用 shared_preferences 插件进行本地耐久化存储。以key-value的形式存储字符串到本地。

引进插件并运用：

在项目终端履行指令 flutter pub add shared_preferences 下载插件，在 cart_provider.dart 购物车状况办理类中运用：

import 'package:shared_preferences/shared_preferences.dart';
class CartNotifier extends ChangeNotifier {
  final List<CartInfoModel> cartList = <CartInfoModel>[];
  ...
  /// 更新购物车数据到本地耐久化存储
  void updCartPrefs() async {
    final prefs = await SharedPreferences.getInstance();
    // 购物车数据转为字符串
    String cartString = json.encode(cartList).toString();
    // `setString`存储到本地
    prefs.setString('cartList', cartString);
  }
  /// 查询/初始化 - 从本地读取数据康复到购物车状况
  Future<List<CartInfoModel>> getCartList() async {
    // 获取耐久化实例
    final prefs = await SharedPreferences.getInstance();
    // 调用`getString`办法读取本地字符串数据
    String? _cartString = prefs.getString('cartList');
    cartList.clear();
    // 字符串数据转化为`CartInfoModel`初始化到购物车列表
    if (_cartString != null) {
      List<CartInfoModel> _list = cartInfoModelListFromJson(_cartString);
      cartList.addAll(_list);
    }
    notifyListeners();
    return cartList;
  }
}

初始化购物车：

用户每次翻开运用，康复购物车数据：在进口文件 main.dart 中调用 getCartList 办法初始化购物车数据。

import 'package:flutter_riverpod/flutter_riverpod.dart';
// flutter_riverpod 中的 `ConsumerStatefulWidget` 类
// 在状况组件中供给 ref 以运用状况办理器
class MyApp extends ConsumerStatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  ConsumerState<MyApp> createState() => _MyAppState();
}
class _MyAppState extends ConsumerState<MyApp> {
  @override
  void initState() {
    super.initState();
    // 调用`getCartList`办法初始化购物车
    ref.read(cartProvider).getCartList();
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '青山商城',
    );
  }
}

项目App打包

代码写的好不如产品包装的好，打包也是至关重要的一步。由于设备有限，项目只亲测了安卓apk打包，其他终端的打包办法参阅 官方打包布置

打包apk指令

项目终端履行指令，等候打包结束后提示apk方位。--split-per-abi 按abi拆分apk，减小包体积

flutter build apk --split-per-abi

运用称号修正

• Android：在 android/app/src/main/AndroidManifest.xml 中修正android:label="运用称号"

• iOS：在 ios/Runner/Info.plist 中修正 CFBundleName 对应的Value

运用图标修正

• Android： 在 android/app/src/res/mipmap 文件夹中替换相应图片

• iOS：在 ios/Runner/Assets.xcassets/AppIcon.appiconset 文件夹中替换相应尺度的图片。假如运用不同的文件名，还需更新同一目录中的 Contents.json 文件中的 filename

发动页图片

• Android：在 android/app/src/res/drawable/launch_background.xml 文件完成自定义发动界面，这儿的是xml语法。也能够运用默许模版，在 android/app/src/res/mipmap 相应尺度文件下放入发动图片launch_image：

  <item>
    <bitmap
      android:gravity="center"
      android:src="@mipmap/launch_image" />
  </item>
  

• iOS：在 ios/Runner/Assets.xcassets/LaunchImage.imageset 文件夹中替换相应尺度的图片。假如运用不同的文件名，还需更新同一目录中的 Contents.json 文件中的 filename

安卓App签名

若需求将 apk 发布到各大运用商场，比方运用宝等，需求对app进行签名。

1. 终端履行下方指令获取秘钥文件，文件默许在当时目录，将生成的 key.jks 复制到项目的 android/app/ 目录下：

keytool -genkey -v -keystore key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

2. 修正 android/key.properties 文件（没有则新建）

storePassword=<上一过程中的暗码>
keyPassword=<上一过程中的暗码>
keyAlias=key
storeFile=key.jks

3. android/app/build.gradle 中，android 代码块之前新增内容

// 新增的内容
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
// android 代码块
android {
    ...
}

修正 signingConfigs 和 buildTypes 代码块：

// 新增内容
signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
        storePassword keystoreProperties['storePassword']
    }
}
// 替换的内容
buildTypes {
    release {
        signingConfig signingConfigs.release
    }
}

其他打包注意事项

apk打包后网络图片不显现：

在 android/app/src/profile/AndroidManifest.xml 中答应网络权限（若无效则需求在 android/app/src/main/AndroidManifest.xml也装备一份）：

<uses-permission android:name="android.permission.INTERNET"/>

空安全过错（flutter v2）：

假如你运用的是 flutter v2 版别或许更高版别，运转或打包时报空安全过错(null safety)。是由于你在项目中的部分写法或许插件不支撑空安全标准，主张替换支撑 Null Safety 的插件。或许运用以下指令 --no-sound-null-safety 跳过 Null Safety 检测。

flutter build apk --no-sound-null-safety

结语

能够看到，文章最初的 Flutter商城APP实战知识点图，项目知识点大大小小有几十个，由于精力有限，抽取了几个首要知识点解说。假如咱们想要一同学习图中 其他的知识点，能够在谈论区 留言， 每周会抽取时刻 更新文章。

博观而约取，厚积而薄发
记得 点赞 + ❤️保藏，➕重视不走失

项目Gitee：gitee.com/jsdawn/shop…

转载声明： 请注明作者，注明原文链接，有疑问致邮 kingwyh1993@163.com