flutter:如何按照 Apple 指南添加 Apple Pay 按钮

Question

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

Answer 1

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

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

1. 添加“Apple”自定义图标

2. 添加“Apple”图像而不是图标(我想您知道这一点)

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

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

1. 访问this site ，搜索 apple 并选择“Apple Logo ”而不是“Apple Pay Logo ”，

   将文件名从“MyFlutterApp”更改为“Custom”并下载，

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

   还有 Custom.ttf 文件( Assets 或字体文件夹或任何您想要的位置)

   并将其添加到 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),)
      ],
    ),
  ),
),