app开发

Flutter 踩坑 A package may not list itself as a dependency

Friday, Apr 10, 2020

在使用 Flutter 开发APP时, 运行flutter package get命令, 控制台报了 A package may not list itself as a dependency 的错误. 问题展示 运行flutter package get, 控制台报错如下: Because my_app depends on my_app which doesn't exist (could not find package my_app at http://pub.dartlang.org), version solving failed. pub get failed (1; could not find package my_app at http://pub.dartlang.org) exit code 1 A package may not list itself as a dependency 原因 检查你的Flutter项目, 是否与即将导入的第三方库重名. 解决方案 方案一: 修改项目名 (推荐) 修改你的项目名称.

Flutter 数据存储 SharedPreferences

Thursday, Apr 9, 2020

我们在做APP开发时, 经常会涉及到用户的 数据存储(比如保存用户登录token、用户的某些偏好设置等). 开发过Android的朋友应该知道有 SharedPreferences. 在 Flutter 中, 同样为我们提供了十分相似的(甚至名字都一样)组件, 为我们提供数据存储的能力. 本篇教程将用一个简单的小Demo, 让你完全掌握 数据存储之SharedPreferences 的用法. 若图片展示异常, 请访问我的官方博客 效果 有图有真相, 我们先来看一下我们最终的效果: SharedPreferences最终效果 仓库地址 所有源码(含注释)均已上传至开源仓库: Github 码云 准备工作 开发环境 本博客的环境一览: 环境 版本号 Flutter 1.14.6 beta Dart 2.8.0-dev.5.0 Android Studio 3.5.2 注意您的环境和文中的差异, 避免出现不兼容的情况哦! 需具备的条件 要顺利阅读本文, 假定您已经具备以下条件: 一台电脑(能同时运行IDE、APP模拟器). Android Studio 或 VSCode(或任何你喜欢的代码编辑器). Flutter开发环境. 您掌握了Flutter的开发基础(至少了解目录结构、Dart语言基本知识). 实战开始 创建Flutter项目 创建一个新的Flutter项目, 命名为my_shared_preferences_demo(您可以随意起名, 但是在下面也要替换名字为您自己的). 注意: Flutter项目名不要和引入的某个第三方库重名, 否则会报: A package may not list itself as a dependency 详见这里 代码截图: 初始化项目 清理代码 因为我们的项目过于简单, 暂时不需要进行测试.

Flutter 底部导航栏 / BottomNavigationBar

Tuesday, Apr 7, 2020

几乎99%的应用类APP都需要一个底部导航栏. 这篇教程为 Flutter 语言中, 如何写一个主流的 底部导航栏 . 并使用 Flutter 官方提供的 BottomNavigationBar 组件. 几乎每一个APP都拥有一个底部导航栏, 所以这篇教程将会十分有用🤭 效果 有图有真相, 我们本次要实现 底部导航栏 的最终效果如下🙊: 底部导航栏最终效果 仓库地址 全部代码均已上传至开源仓库(含完整注释): Github 码云 用途 虽然如此普遍, 但我们还是要更直观的看下哪里需要用到底部导航栏, 如下图: 用到底部导航栏的主流APP 可以得知, 最流行的、最主流的APP都需要导航栏 实战开始 创建导航页面 创建lib/main.dart文件, 内容: import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Bottom Navigation', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( '底部导航栏演示', ) ), ); } } 这个页面就作为我们的导航页了, 继续.

Flutter 指纹验证/人脸识别

Tuesday, Apr 7, 2020

指纹验证/指纹识别 以及 人脸识别 是我们在平常使用各种APP时常用的功能, 这篇教程将使用第三方库 local_auth 来实现 Flutter 中的指纹验证以及人脸识别. 效果 有图有真相, 我们本次要实现的最终效果如下: 指纹识别图片效果展示 仓库地址 全部代码均已上传至开源仓库(含完整注释): Github 码云 用途 这个在支付相关功能中最常见了, 用于二次验证当前操作者是否为本人. 当然, 有时我们保护的不仅是现金. 实战开始 导入第三方库: local_auth 在./lib/pubspec.yaml中导入: dependencies: local_auth: ^0.6.1+3 修改MainActivity 进入./android/app/src/main/***/MainActivity.java或MainActivity.kt,导入依赖: import io.flutter.embedding.android.FlutterFragmentActivity; 修改: class MainActivity: FlutterActivity() { override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } } 为: class MainActivity: FlutterFragmentActivity() { override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) { GeneratedPluginRegistrant.registerWith(flutterEngine); } } 这里主要是修改了FlutterActivity为FlutterFragmentActivity 代码截图1 AndroidManifest.xml增加权限 进入 android/app/src/main/AndroidManifest.xml, 在<manifest>中, 添加: <uses-permission android:name="android.permission.USE_FINGERPRINT"/> 代码截图2