flutter: how to add an Apple Pay button in line with Apple guidelines

user_11833029 0
Viewed 2923

it is rather a simple problem but I was wondering how you add an apple pay button to your flutter app. Do I need to create the button from scratch following apple guidelines or is there a template to use? I remember in swift there was an object readily available. Thanks

applepay flutter
1 Answers

Flutter doesn't have any button like Apple Pay nor it has any apple icon.

So, you can do two things here ->

  1. Add a custom icon of 'Apple'

  2. Add 'Apple' image instead of icon (i think you know this)

[Let me know if you don't know how to add image]

and then you can create such button...

  1. Visit this site, search apple and choose "Apple logo" not "Apple Pay logo",

    Change file name from 'MyFlutterApp' to 'Custom' and download it,

    Extract the files, add dart file to your lib folder

    also and the Custom.ttf file in (assets or font folder or anywhere you want)

    and add it in fonts section in pubspec.yaml as shown in the code

Here is the Code:

//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),)
      ],
    ),
  ),
),
user_130509870
Related