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:
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.
- Background color-Hex (#202427)
- Text color-Hex (#DCD9D9)
- Card color-Hex(#CD7456)
- Button color-Hex(#395FA8)
- Fonts- Raleway, Trebuchet MS(second slide)
Final Output Images
fonts-Google fonts-raleway, lato
colors-Same as XD
The implementation in Flutter is divided into 3 dart files:
For the complete code- Click Here