import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(),
home: Home(),
);
}
}
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(238, 241, 242, 1),
appBar: AppBar(
title: Text(
"Home Page",
style: TextStyle(color: Colors.black),
),
backgroundColor: Color.fromRGBO(238, 241, 242, 1),
elevation: 0,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.add,
color: Colors.black45,
),
onPressed: null)
],
),
body: SafeArea(
child: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 250,
child: AspectRatio(
aspectRatio: 3.1 / 2,
child: GestureDetector(
child: Container(
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: Colors.black38,
offset: Offset(10.0, 10.0),
blurRadius: 15.0,
spreadRadius: 1.0)
]),
child: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 40.0,
height: 40.0,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(.8),
shape: BoxShape.circle),
),
Transform.translate(
offset: Offset(-15, 0),
child: Container(
width: 40.0,
height: 40.0,
decoration: BoxDecoration(
color: Colors.orange.withOpacity(.8),
shape: BoxShape.circle),
),
)
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
"1000",
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold),
),
Text(
" US",
style: TextStyle(
color: Colors.white, fontSize: 15),
),
],
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text('CardName',
style: TextStyle(
color: Colors.white, fontSize: 15)),
),
SizedBox(
height: 15,
),
FittedBox(
fit: BoxFit.contain,
child: Text(
'1234 1234 1234 1234',
style: TextStyle(
color: Colors.white,
fontSize: 20,
letterSpacing: 10),
),
)
],
)
],
),
),
),
),
),
),
SizedBox(
height: 30,
),
Text(
'Last Transactions',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
color: Colors.black45),
),
SizedBox(
height: 15,
),
Container(
height: 390,
child: ListView(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 15),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.arrow_upward,
color: Colors.green,
),
SizedBox(
width: 10,
),
Text(
'Online Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'+1200',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
Text(
'US',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
)
],
),
),
Container(
margin: EdgeInsets.only(bottom: 15),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.arrow_upward,
color: Colors.green,
),
SizedBox(
width: 10,
),
Text(
'Online Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'+1200',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
Text(
'US',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
)
],
),
),
Container(
margin: EdgeInsets.only(bottom: 15),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.arrow_upward,
color: Colors.green,
),
SizedBox(
width: 10,
),
Text(
'Online Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'+1200',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
Text(
'US',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
)
],
),
),
Container(
margin: EdgeInsets.only(bottom: 15),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.arrow_upward,
color: Colors.green,
),
SizedBox(
width: 10,
),
Text(
'Online Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'+1200',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
Text(
'US',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
)
],
),
),
Container(
margin: EdgeInsets.only(bottom: 15),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.arrow_upward,
color: Colors.green,
),
SizedBox(
width: 10,
),
Text(
'Online Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'+1200',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
Text(
'US',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
)
],
),
),
Container(
margin: EdgeInsets.only(bottom: 15),
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.arrow_upward,
color: Colors.green,
),
SizedBox(
width: 10,
),
Text(
'Online Order',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
'+1200',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
Text(
'US',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.grey),
),
],
)
],
),
),
],
),
)
],
),
)),
);
}
}
