Thanks for Visiting here
Payment screen design in a flutter
 |
| Payment screen in Flutter |
Code :- import
'package:flutter/material.dart';
class Payment_screen extends StatelessWidget {
const Payment_screen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 350,
decoration: BoxDecoration(
color: Color(0xFF0D53FC),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(60),
bottomRight: Radius.circular(60))),
child: Center(
child: Column(
children: [
SizedBox(
height: 40,
width: 20,
),
Row(
children: [
SizedBox(
width: 20,
),
Icon(
Icons.arrow_back_ios_new,
size: 25,
color: Colors.white,
),
SizedBox(
width: 120,
),
Text(
"Payment",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
],
),
SizedBox(
height: 20,
),
Image.asset(
'assets/doctop.png',
width: 100,
),
SizedBox(height: 10),
Text(
"FevDoc",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white),
),
SizedBox(height: 30),
Text(
"Amount to Pay",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.white),
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.euro,
size: 50,
color: Colors.white,
),
Text(
"150/-",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 50,
color: Colors.white),
),
],
)
],
),
),
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
InkWell(
onTap: () {},
child: Text(
"Debit/credit Card",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
],
),
),
Divider(
thickness: 2,
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
InkWell(
onTap: () {},
child: Text(
"Net Banking",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
],
),
),
Divider(
thickness: 2,
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
InkWell(
onTap: () {},
child: Text(
"Paytm Wallet",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
],
),
),
Divider(
thickness: 2,
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
InkWell(
onTap: () {},
child: Text(
"UPI",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
],
),
),
Divider(
thickness: 2,
),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
InkWell(
onTap: () {},
child: Text(
"PhonePe/BHIM UPI",
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.bold),
),
),
],
),
),
MaterialButton(
color: Color(0xFF0D53FC),
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 130),
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
onPressed: () {},
child: Text(
"Pay 150/-",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
)
],
),
));
}
}
flutter app design
flutter design system
material design flutter
flutter design ui
is flutter free
responsive design flutter
flutter software
