Flutter：如何根据 Apple 指南添加 Apple Pay 按钮

Posted 2023-03-13

【中文标题】Flutter：如何根据 Apple 指南添加 Apple Pay 按钮

【英文标题】：flutter: how to add an Apple Pay button in line with Apple guidelines

【发布时间】：2020-07-09 15:19:53

【问题描述】：

这是一个相当简单的问题，但我想知道你如何在你的 Flutter 应用程序中添加一个苹果支付按钮。我是否需要按照苹果指南从头开始创建按钮，或者是否有模板可供使用？我记得很快就有一个可用的对象。 谢谢

【问题讨论】：

你想创建一个带有苹果标志和“支付”文字的按钮吗？我其实不明白什么是“Apple Pay 按钮”

是的，我想要带有 Apple 标志的典型黑色按钮和“pay with ????”

【参考方案1】：

Flutter 没有像 Apple Pay 这样的按钮，也没有任何苹果图标。

所以，你可以在这里做两件事 ->

添加“Apple”的自定义图标

添加“Apple”图像而不是图标（我想你知道这一点）

[如果您不知道如何添加图片，请告诉我]

然后你可以创建这样的按钮...

访问this site，搜索苹果并选择“Apple logo”而不是“Apple Pay logo”，

将文件名从“MyFlutterApp”更改为“自定义”并下载，

解压文件，将 dart 文件添加到您的 lib 文件夹中

还有（资产或字体文件夹或您想要的任何地方）中的 Custom.ttf 文件

并将其添加到 pubspec.yaml 中的字体部分，如代码所示

代码如下：

//pubspec.yaml ->
fonts:
  - family: Custom
    fonts:
      - assets/Custom.ttf //path of Custom.ttf in you project

//Dart file where you will add Apple pay button
import'custom_icons.dart' as CustomIcon;//custom_icons.dart is one of the downloaded file

//THIS IS THE NORMAL WAY TO CREATE A BUTTON
RaisedButton(
  color: Colors.black,
  onPressed: () 
    //ADD THE FUNCTIONS OF THIS BUTTON HERE
  ,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(CustomIcon.Custom.apple, color: Colors.white,),
      SizedBox(width: 8.0,),
      Text('Apple Pay', style: TextStyle(color: Colors.white),)
    ],
  ),
),

//USE THIS FOR CUSTOMISING YOUR BUTTON
Container(
  height: 30.0,
  width: double.infinity,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(8.0)),
    color: Colors.black
  ),
  child: GestureDetector(
    onTap: ()
      //ADD THE FUNCTIONS OF THIS BUTTON HERE
    ,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(CustomIcon.Custom.apple, color: Colors.white,),
        SizedBox(width: 8.0,),
        Text('Apple Pay', style: TextStyle(color: Colors.white),)
      ],
    ),
  ),
),