Flutter payment app

Flutter payment app

    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.


    Recommended posts

    Recent posts