Thanks for Visiting here
Payment App Besic design In flutter
 |
| Payment App Besic design In flutter |
import 'package:flutter/material.dart';
class Homepage1 extends StatefulWidget {
const Homepage1({Key? key}) : super(key: key);
@override
_Homepage1State createState() => _Homepage1State();
}
class _Homepage1State extends State<Homepage1> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Welcome Back",
style: TextStyle(color: Colors.black26, fontSize: 10),
),
Text(
"Nitish Roy",
style: TextStyle(color: Colors.black54),
),
],
),
leading: CircleAvatar(
backgroundImage: NetworkImage(
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BCPzwdESCXM8aIuLfMvkl5mM9_SlXOLOL4AIIrM9KUVOJnrJrLoV7YTpuQjq385LBK4qlOHQvt8b0s0tIUPZbUSIEJBnxa-h8KRUBYezmqgEcVEXqMDf2lImdH_zKA5tKk-PG-dKD98/s150/png.png',
scale: 10),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(bottom: Radius.circular(16))),
actions: [
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Icon(
Icons.short_text,
color: Colors.black54,
size: 40,
))
],
),
body: Container(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: Column(
children: [
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
colors: [Colors.blueGrey, Colors.blue],
),
),
child: Column(
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.network(
'https://th.bing.com/th/id/R.fab62c934259fc52afa9dd40e7d017a5?rik=%2f3322nTF3PWYbA&riu=http%3a%2f%2fstatic8.depositphotos.com%2f1007752%2f923%2fi%2f950%2fdepositphotos_9234281-Business-credit-debit-card-bank-ATM-chip-macro-closeup-isolated.jpg&ehk=Rco0RyyN24G%2bEHX3qNedBZZP47LjOuRTzO1lowRB%2fD4%3d&risl=&pid=ImgRaw&r=0',
scale: 60,
),
Image.network(
'https://logos-world.net/wp-content/uploads/2020/04/Visa-Logo.png',
scale: 80,
)
],
),
),
SizedBox(
height: 15,
),
Text(
"**********2456",
style: TextStyle(
wordSpacing: 10,
letterSpacing: 10,
fontSize: 25,
color: Colors.white,
fontWeight: FontWeight.bold),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 20, horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
Text(
"CardHolder Name",
style: TextStyle(
letterSpacing: .5,
fontSize: 10,
color: Colors.white,
fontWeight: FontWeight.normal),
),
SizedBox(height: 3),
Text(
"Nitish Kumar",
style: TextStyle(
letterSpacing: 1,
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold),
)
],
),
Column(children: [
Text("Expire Date",
style: TextStyle(
letterSpacing: .5,
fontSize: 10,
color: Colors.white,
fontWeight: FontWeight.normal)),
SizedBox(height: 3),
Text("26/32",
style: TextStyle(
letterSpacing: 1,
fontSize: 15,
color: Colors.white,
fontWeight: FontWeight.bold))
])
]))
],
),
),
Container(
margin: EdgeInsets.only(top: 30),
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
child: Row(children: [
Column(children: [
Container(
padding:
EdgeInsets.symmetric(horizontal: 25, vertical: 30),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Icon(Icons.access_alarm,
color: Colors.white, size: 25),
),
SizedBox(height: 10),
Text("Timmer",
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold)),
]),
SizedBox(width: 20),
Column(children: [
Container(
padding:
EdgeInsets.symmetric(horizontal: 25, vertical: 30),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Icon(
Icons.lock,
color: Colors.white,
size: 25,
),
),
SizedBox(
height: 10,
),
Text(
"Lock",
style:
TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
)
]),
SizedBox(width: 20),
Column(
children: [
Container(
padding:
EdgeInsets.symmetric(horizontal: 25, vertical: 30),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Icon(
Icons.favorite,
color: Colors.white,
size: 25,
),
),
SizedBox(
height: 10,
),
Text(
"Favorite",
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),
),
],
),
SizedBox(width: 20),
Column(children: [
Container(
padding:
EdgeInsets.symmetric(horizontal: 25, vertical: 30),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Icon(Icons.dashboard,
color: Colors.white, size: 25)),
SizedBox(height: 10),
Text(
"Dashboard",
style:
TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
)
])
])),
Expanded(
child: Container(
margin: EdgeInsets.only(top: 10),
padding: EdgeInsets.all(0),
// color: Colors.red,
child: Column(
children: [
Row(
children: [
Container(
decoration: BoxDecoration(
// color: Colors.whit,
borderRadius: BorderRadius.circular(10)),
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 320,
height: 50,
child: Row(
children: [
Icon(Icons.storage),
SizedBox(width: 10),
Text("Storage Rent")
],
),
),
Text("20/-"),
],
),
),
],
)
],
),
),
),
],
),
),
);
}
}
