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/material.dart';
|
||||||
import 'package:flutter_form_builder/flutter_form_builder.dart';
|
import 'package:flutter_form_builder/flutter_form_builder.dart';
|
||||||
import 'package:nekoya_flutter/api/api.dart';
|
import 'package:nekoya_flutter/api/api.dart';
|
||||||
|
import 'package:nekoya_flutter/data/cart.dart';
|
||||||
|
|
||||||
class CheckoutForm extends StatefulWidget {
|
class CheckoutForm extends StatefulWidget {
|
||||||
CheckoutForm({Key? key}) : super(key: key);
|
CheckoutForm({Key? key}) : super(key: key);
|
||||||
|
|
@ -9,9 +10,246 @@ class CheckoutForm extends StatefulWidget {
|
||||||
State<CheckoutForm> createState() => _CheckoutFormState();
|
State<CheckoutForm> createState() => _CheckoutFormState();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
final _formKey = GlobalKey<FormBuilderState>();
|
||||||
|
|
||||||
class _CheckoutFormState extends State<CheckoutForm> {
|
class _CheckoutFormState extends State<CheckoutForm> {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
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