Flutter payment app

Created At: 2021-10-02 17:09:06 Updated At: 2021-10-15 22:24:06

In this tutorial you will learn how to build a complete payment app in flutter. 

This tutorial is divided into two sections. In the first section we covered the UI. And in the section we will see how to do the actual payment with backend.

Check out the link for the payment app starter code. It includes graphics and some basic starter dart file


and check out the video link here for first part of the series.

First part we did the following

Here you will learn how to build a payment app from scratch for iOS and Android using fltuter step by step.

Flutter payment app building will cover payment UI, payment with paypal and braintree and with backend api. This tutorial also cover complex ui building using stack widgets.

This is first part of the series where we covered the payment ui. Payment ui includes home page, payment history and payment page.


In the first part we did the following

1. Building complext payment ui

2. Select with payment options with Getx

3. Make payment with paypal Braintree

4. Backend record of the payment


The widgets we have used are

1. Stack widgets

2. Positioned widgets

3. MediaQuery.removePadding

4. Container widgets

5. TextPainter widgets

6. TextSpan widgets

In the second part we did the following

1. Flutter service

2. Flutter Getx for data processing and building list.

3. Flutter Getx controller

4. Learn about flutter Future types

5. Build JSON Files

6. Read JSON files

7. Build data model

8. Build the backend

9. Build get API for the app

10. Build post API for the app and test with Postman

Video for the second part

We have also covered flutter getx fetch and display data. We have used flutter getx for building listView with obx and obs.

GetX Variables

To make list or variable observable you can simple add .obs next to the variable.

like below

bool newVar = false.obs
var list = [].obs

After doing that, both the newVar and list variable would be observable.

Well, now if you have values for the variables you can just put there. If you want to change the boolean value then you need to do like this


With this the the value of newVar would be true.

And to add a value in the list you can do like below


now list variable will have new values.


Add Reviews