295 lines
9.0 KiB
Dart
295 lines
9.0 KiB
Dart
import 'package:bbm_tracking/resource/resource.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class SimulationScreen extends StatefulWidget {
|
|
const SimulationScreen({super.key});
|
|
|
|
@override
|
|
State<SimulationScreen> createState() => _SimulationScreenState();
|
|
}
|
|
|
|
class _SimulationScreenState extends State<SimulationScreen> {
|
|
List<String> tipe_kendaraan = ["Motor", "Mobil"];
|
|
List<String> merek_kendaraan = ["Beat", "NMax", "PCX", "Ninja"];
|
|
|
|
bool toogleTipe = false;
|
|
bool toogleMerek = false;
|
|
bool toogleBBM = false;
|
|
bool tooglePriode = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Color(0xffE3EAEA),
|
|
body: SingleChildScrollView(
|
|
child: Padding(
|
|
padding: EdgeInsets.all(10),
|
|
child: Container(
|
|
margin: EdgeInsets.only(top: 52),
|
|
child: Column(
|
|
children: [
|
|
Align(
|
|
alignment: Alignment.topLeft,
|
|
child: Container(
|
|
width: 70,
|
|
child: InkWell(
|
|
onTap: () {},
|
|
child: Row(
|
|
children: [
|
|
Icon(
|
|
Icons.arrow_back_ios,
|
|
size: 15,
|
|
),
|
|
Text(
|
|
"Kembali",
|
|
style: TextStyle(
|
|
fontSize: 10,
|
|
fontFamily: 'Poppins',
|
|
color: Color(0xff1A0F0F),
|
|
fontWeight: FontWeight.w400,
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
width: double.infinity,
|
|
margin: EdgeInsets.only(top: 10),
|
|
child: Text(
|
|
"Simulasi Pemakaian",
|
|
style: TextStyle(
|
|
fontFamily: 'Poppins',
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 16,
|
|
color: Color(0xff3B3C48),
|
|
),
|
|
),
|
|
),
|
|
Divider(
|
|
color: Color(0xFF1A0F0F3D),
|
|
height: 2,
|
|
thickness: 2,
|
|
),
|
|
SizedBox(
|
|
height: 6,
|
|
),
|
|
Container(
|
|
alignment: Alignment.topLeft,
|
|
child: Text(
|
|
"Simulasi Performa Bahan Bakar Kendaraan",
|
|
style: TextStyle(
|
|
fontFamily: 'Poppins',
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 12,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
),
|
|
SizedBox(
|
|
height: 10,
|
|
),
|
|
FormField("-- Pilih Tipe Kendaraan --", tipe_kendaraan,
|
|
toogleTipe, "tipe"),
|
|
SizedBox(
|
|
height: 5,
|
|
),
|
|
FormField("-- Pilih Kendaraan --", merek_kendaraan, toogleMerek,
|
|
"merek"),
|
|
SizedBox(
|
|
height: 5,
|
|
),
|
|
FormField("-- Pilih Jenis Bahan Bakar --", listBensin,
|
|
toogleBBM, "bbm"),
|
|
SizedBox(
|
|
height: 5,
|
|
),
|
|
FormField("-- Pilih Periode --", null, tooglePriode, "periode"),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget FormField(
|
|
txtTitle,
|
|
data,
|
|
toogle,
|
|
toogleParam,
|
|
) {
|
|
return Container(
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFBFE5DF),
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
padding: EdgeInsets.all(10),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
child: Text(
|
|
txtTitle,
|
|
style: TextStyle(
|
|
fontFamily: 'Poppins',
|
|
fontSize: 10,
|
|
color: Color(0xFF677D81),
|
|
),
|
|
),
|
|
),
|
|
InkWell(
|
|
onTap: () {
|
|
setState(() {
|
|
toogleParam == "tipe"
|
|
? toogleTipe = !toogleTipe
|
|
: toogleParam == "merek"
|
|
? toogleMerek = !toogleMerek
|
|
: toogleParam == "bbm"
|
|
? toogleBBM = !toogleBBM
|
|
: toogleParam == "peride"
|
|
? tooglePriode = !tooglePriode
|
|
: null;
|
|
});
|
|
// print(toogleTipe);
|
|
},
|
|
child: Container(
|
|
child: Icon(
|
|
Icons.arrow_circle_down,
|
|
color: Color(0xFFAEAEAE),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
AnimatedContainer(
|
|
duration: Duration(seconds: 1),
|
|
width: double.infinity,
|
|
height: toogleParam == "tipe"
|
|
? toogleTipe == true
|
|
? (36 * data.length).toDouble()
|
|
: 0
|
|
: toogleParam == "merek"
|
|
? toogleMerek == true
|
|
? (36 * data.length).toDouble()
|
|
: 0
|
|
: toogleParam == "bbm"
|
|
? toogleBBM == true
|
|
? (26 * data.length).toDouble()
|
|
: 0
|
|
: toogleParam == "periode"
|
|
? tooglePriode == true
|
|
? 30
|
|
: 0
|
|
: 0,
|
|
curve: Curves.fastOutSlowIn,
|
|
child: toogleParam != "periode"
|
|
? listBuilderWidget(data, toogleParam)
|
|
: formPeriode(),
|
|
),
|
|
SizedBox(
|
|
height: 10,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget formPeriode() {
|
|
return Container(
|
|
height: 20,
|
|
width: 20,
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: 40,
|
|
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 22),
|
|
margin: EdgeInsets.symmetric(vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFBFE5DF),
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(Icons.calendar_month_outlined),
|
|
Text(
|
|
"Awal",
|
|
style: TextStyle(
|
|
fontFamily: 'Poppins',
|
|
fontSize: 10,
|
|
color: Color(0xFF677D81),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
SizedBox(
|
|
width: 15,
|
|
),
|
|
Container(
|
|
width: double.infinity,
|
|
height: 10,
|
|
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 22),
|
|
margin: EdgeInsets.symmetric(vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFBFE5DF),
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
)
|
|
],
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget listBuilderWidget(data, toogleParam) {
|
|
return ListView.builder(
|
|
padding: EdgeInsets.zero,
|
|
itemCount: data.length,
|
|
scrollDirection: Axis.vertical,
|
|
shrinkWrap: true,
|
|
itemBuilder: (BuildContext context, int index) {
|
|
return toogleParam != "bbm"
|
|
? itemDropDown(data.elementAt(index))
|
|
: itemDropDown(listBensin[index].text);
|
|
},
|
|
);
|
|
}
|
|
|
|
Widget itemDropDown(key) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 22),
|
|
margin: EdgeInsets.symmetric(vertical: 2),
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFBFE5DF),
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10),
|
|
),
|
|
),
|
|
child: Text(
|
|
key,
|
|
style: TextStyle(
|
|
fontFamily: 'Poppins',
|
|
fontSize: 10,
|
|
color: Color(0xFF677D81),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|