Cred App

How to create the button style of Cred App in Adobe XD and Flutter

Shanmukhasai Jasti
2 min readMay 26, 2021


The most successful company in the recent past is the Cred app, which allows users in India to pay their credit card bills and earn rewards. The app got its popularity in the recent IPL in which they were the brand partners.

One feature which helped cred to gain popularity is the simple and graphical user interface(UI). The images below are the UX design of cred:

Cred Application

My favorite design is the button which uses a simple technique called box-shadow. In this tutorial, we are going to build the screens in Adobe XD and Flutter.

Adobe XD

Required Assets-

  1. Background color-Hex (#202427)
  2. Text color-Hex (#DCD9D9)
  3. Card color-Hex(#CD7456)
  4. Button color-Hex(#395FA8)
  5. Fonts- Raleway, Trebuchet MS(second slide)

Final Output Images

Final Link-

Xd File-Click Here



image-background Image in slide 1

fonts-Google fonts-raleway, lato

colors-Same as XD


The implementation in Flutter is divided into 3 dart files:

  • main.dart
  • second.dart
  • constants.dart



For the complete code- Click Here



Shanmukhasai Jasti