In this tutorial, I will show you how to build the UI of our Financial app using Flutter and android studio
source code:
class CreditCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
resizeToAvoidBottomPadding: false,
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
padding: EdgeInsets.only(bottom: bottom),
reverse: true,
child: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(12.0,12.0,12.0,0),
child: Column(
children: <Widget>[
Card(
child: Stack(
children: <Widget>[
Image.asset("assets/credit_card.png",fit: BoxFit.fill,),
Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical:16.0, horizontal: 8.0),
child: Text(
"**** **** **** 6543",
style: TextStyle(
fontSize: 28.0,
color: Colors.white
),
),
),
SizedBox(
height: 20.0,
),
Row(
children: <Widget>[
Column(
children: <Widget>[
Text(
"Expiry",
style: TextStyle(
color: Colors.white,
fontSize: 22.0
),
),
SizedBox(
height: 10.0,
),
Text(
"MM/YY",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
)
],
),
SizedBox(
width: 50.0,
),
Column(
children: <Widget>[
Text(
"CVV",
style: TextStyle(
color: Colors.white,
fontSize: 22.0
),
),
SizedBox(
height: 10.0,
),
Text(
"****",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
),
)
],
)
],
),
SizedBox(
height: 8.0,
),
Text(
"Card Holder",
style: TextStyle(
color: Colors.white,
fontSize: 28.0
),
textAlign: TextAlign.end,
),
],
),
),
],
),
elevation: 5.0,
clipBehavior: Clip.antiAliasWithSaveLayer,
semanticContainer: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0)
),
),
SizedBox(
height: 20.0,
),
Padding(
padding: const EdgeInsets.all(8.0),
child:Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(),
),
labelText: "Credit Card Number",
labelStyle: TextStyle(
fontSize: 18.0
)
),
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(),
),
labelText: "Credit Card Expiry Date",
labelStyle: TextStyle(
fontSize: 18.0
)
),
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(),
),
labelText: "Credit Card Code",
labelStyle: TextStyle(
fontSize: 18.0
)
),
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: BorderSide(),
),
labelText: "Credit Card Hodler Name",
labelStyle: TextStyle(
fontSize: 18.0
)
),
),
SizedBox(
height: 20.0,
),
FlatButton(
color: Colors.pink,
onPressed: (){},
shape: StadiumBorder(),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 50.0, vertical: 12.0),
child: Text(
"Pay",
style: TextStyle(
color: Colors.white,
fontSize: 22.0
),
),
),
)
],
)
)
],
),
),
),
),
);
}
}
Make a finance app in flutter
Reviewed by Medics
on
April 28, 2020
Rating:
Reviewed by Medics
on
April 28, 2020
Rating:
Very nice ui sir. What do you use for the backend of that ui? Meaning the payment gateway. Is there any functional package that I can use or learn?
ReplyDeleteThanks for your time sir.😊
Very efficiently written information. It will be beneficial to anybody who utilizes it, including me. Keep up the good work. For sure i will check out more posts. This site seems to get a good amount of visitors. Aplikasi Saham
ReplyDelete