first commit
This commit is contained in:
Ryan Ariana
294
lib/pages/simulation/index.dart
Normal file
294
lib/pages/simulation/index.dart
Normal file
@@ -0,0 +1,294 @@
|
||||
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),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user