Cred App

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

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-https://xd.adobe.com/view/d4a4b408-34df-405a-ac37-7eee97c3673b-81f7/screen/a7150d01-90e7-4a7f-9661-c17504bcf194?fullscreen

Xd File-Click Here

Flutter

Requirements

image-background Image in slide 1

fonts-Google fonts-raleway, lato

colors-Same as XD

Flutter

The implementation in Flutter is divided into 3 dart files:

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

Main.dart

Second.dart

For the complete code- Click Here