payflow_app

一个用于管理银行回单的 Flutter 项目

入门

在cmd中开始项目：flutter create application_name – 创建应用代码 application_name – 使用vscode打开

创建部分

  1. 定义主题（颜色、图片、字体）
  2. 创建屏幕

如何知道手机屏幕尺寸

final size = MediaQuery.of(context).size;

  • 使用示例：Container( width: size.width, height: size.height * 0.40 – 占据屏幕的40% )

如何添加延迟（等待特定时间）

await Future.delayed(Duration(seconds: 2));

如何在Container中添加边框

decoration: BoxDecoration( borderRadius: BorderRadius.circular(5), border: Border.fromBorderSide(BorderSide(color: Colors.grey)) ),

新小部件

InkWell – 它等于GestureDetector，但点击时有效果 Positioned – 将小部件放置在您想要的位置，例如：Positioned( top: 35, left: 0, right: 0, child: Image.asset(AppImages.person) ), PreferredSize – 为AppBar添加尺寸，例如：appBar: PreferredSize( preferredSize: const Size.fromHeight(128), child: … ), Text.rich + TextSpan – 为文本添加不同的字体样式，例如：Text.rich( TextSpan( text: “Olá, “, style: AppTextStyles.titleListTile, children: [ TextSpan( text: “Caroline”, style: AppTextStyles.titleBoldBackground ) ] ), ) RotatedBox – 使屏幕垂直 – 旋转90*，例如：return SafeArea( top: true, bottom: true, left: true, right: true, child: RotatedBox( quarterTurns: 1, child: Scaffold

快捷键

shift + alt + f – 缩进代码

错误

JAVA_HOME未设置，且PATH中未找到“java”命令 – 解决办法，观看此视频 https://www.youtube.com/watch?v=Sbic3aMCwhY

如何配置firebase到项目中

  1. 执行安装过程
  2. 在pubspec.yaml中添加firebase_core
  3. 初始化firebase – 初始化位于AppFirebase类（main.dart）中
  4. 在pubspec.yaml中添加google_sign_in
  5. Firebase > authentication > sign-in method 添加Google作为登录提供商
  6. 创建loginController类（使用google_sign_in的方法登录用户）和authController（检查用户是否存在，如果存在则跳转到主屏幕，如果不存在则停留在登录屏幕）
  7. 实例化LoginController并在单击按钮时调用它

如何使用SharedPreferences

  1. 在pubspec.yaml中添加shared_preferences包
  2. 在AuthControlller的认证类中，添加saveUser（保存用户）和currentUser（检查用户是否已登录应用程序，如果已登录则不会经过登录屏幕）方法
  3. 创建UserModel – 该模型将包含用户信息以及将数据转换为Map、Json或String的方法 – 这些转换非常重要，因为没有它们，AuthController将无法正常工作
  4. 在启动屏幕中，实例化该类并调用currentUser方法。注意：完成所有事情的主要类是UserModel和AuthController

如何为项目添加命名路由

  1. 在main中，添加routes（您应用程序的所有屏幕）和initialRoute（初始屏幕） return MaterialApp( title: “Pay Flow”, initialRoute: “/home”, routes: { “/splash”: (context) => const SplashPage(), “/login”: (context) => const LoginPage(), “/home”: (context) => const HomePage(), } );
  2. 在导航屏幕之间时，您将按以下方式调用它们：Navigator.pushNamed(context, “/login”);

GitHub

查看 Github