checkout_form - Added form
This commit is contained in:
Matthew Patrick
parent
9beccc44ff
commit
34fa51a633
1 changed files with 239 additions and 1 deletions
|
|
@ -1,6 +1,7 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_form_builder/flutter_form_builder.dart';
|
||||
import 'package:nekoya_flutter/api/api.dart';
|
||||
import 'package:nekoya_flutter/data/cart.dart';
|
||||
|
||||
class CheckoutForm extends StatefulWidget {
|
||||
CheckoutForm({Key? key}) : super(key: key);
|
||||
|
|
@ -9,9 +10,246 @@ class CheckoutForm extends StatefulWidget {
|
|||
State<CheckoutForm> createState() => _CheckoutFormState();
|
||||
}
|
||||
|
||||
final _formKey = GlobalKey<FormBuilderState>();
|
||||
|
||||
class _CheckoutFormState extends State<CheckoutForm> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container();
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(10, 10, 10, 5),
|
||||
child: Card(
|
||||
color: const Color(0xff212226),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Container(
|
||||
margin: const EdgeInsets.fromLTRB(5, 20, 5, 20),
|
||||
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 25),
|
||||
child: FormBuilder(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
children: [
|
||||
const Center(
|
||||
child: Text(
|
||||
"Shipping Details",
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 30),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
Row(
|
||||
children: const [
|
||||
Text(
|
||||
"Contact Information",
|
||||
style: TextStyle(
|
||||
color: Colors.white70,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
makeInput(label: "First Name"),
|
||||
makeInput(label: "Last Name"),
|
||||
makeInput(label: "Phone Number"),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
Row(
|
||||
children: const [
|
||||
Text(
|
||||
"Address",
|
||||
style: TextStyle(
|
||||
color: Colors.white70,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
makeInput(label: "Street Address"),
|
||||
makeInput(label: "Street Address 2"),
|
||||
makeInput(label: "Region"),
|
||||
makeInput(label: "Province"),
|
||||
makeInput(label: "City"),
|
||||
makeInput(label: "District"),
|
||||
makeInput(label: "Subdistrict"),
|
||||
makeInput(label: "Postal Code"),
|
||||
const SizedBox(
|
||||
height: 20,
|
||||
),
|
||||
Row(
|
||||
children: const [
|
||||
Text(
|
||||
"Shipping Methods",
|
||||
style: TextStyle(
|
||||
color: Colors.white70,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 20),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
FormBuilderDropdown(
|
||||
name: "Shipping Method",
|
||||
dropdownColor: const Color(0xff212226),
|
||||
style: const TextStyle(color: Colors.white),
|
||||
decoration: const InputDecoration(
|
||||
contentPadding: EdgeInsets.symmetric(
|
||||
vertical: 0, horizontal: 10),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: Colors.red,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide(color: Colors.white)),
|
||||
),
|
||||
items: const [
|
||||
DropdownMenuItem(
|
||||
value: "JNE",
|
||||
child: Text("JNE"),
|
||||
),
|
||||
DropdownMenuItem(
|
||||
value: "JNT",
|
||||
child: Text("JNT"),
|
||||
),
|
||||
DropdownMenuItem(
|
||||
value: "SiCepat",
|
||||
child: Text("SiCepat"),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 35),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.only(top: 3, left: 3),
|
||||
child: MaterialButton(
|
||||
minWidth: double.infinity,
|
||||
height: 35,
|
||||
onPressed: () async {},
|
||||
color: const Color(0xff8B0000),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(40)),
|
||||
child: const Text(
|
||||
"Pay",
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 15,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget makeInput({label, obscureText = false}) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: const TextStyle(
|
||||
fontSize: 12, fontWeight: FontWeight.bold, color: Colors.white),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
FormBuilderTextField(
|
||||
initialValue: "",
|
||||
name: label,
|
||||
obscureText: obscureText,
|
||||
style: const TextStyle(color: Colors.white),
|
||||
decoration: const InputDecoration(
|
||||
contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 10),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: Colors.red,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderSide: BorderSide(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
border:
|
||||
OutlineInputBorder(borderSide: BorderSide(color: Colors.white)),
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
showAlertDialog(BuildContext context) {
|
||||
Widget okButton = TextButton(
|
||||
child: const Text("OK", style: TextStyle(color: Colors.red)),
|
||||
onPressed: () {
|
||||
Navigator.of(context, rootNavigator: true).pop();
|
||||
},
|
||||
);
|
||||
AlertDialog alert = AlertDialog(
|
||||
backgroundColor: const Color(0xff1b1c1e),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
title: const Text(
|
||||
"Error",
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
content: const Text(
|
||||
"Make sure to fill all fields",
|
||||
style: TextStyle(color: Colors.white70),
|
||||
),
|
||||
actions: [
|
||||
okButton,
|
||||
],
|
||||
);
|
||||
showDialog(
|
||||
context: context,
|
||||
builder: (BuildContext context) {
|
||||
return alert;
|
||||
},
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue