canvasing/lib/Screens/Menu/Reimburse/reimburse_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../SlipGaji/background.dart';

class ReimburseScreen extends StatefulWidget {
  const ReimburseScreen({Key? key}) : super(key: key);

  @override
  State<ReimburseScreen> createState() => _ReimburseScreen_State();
}

class _ReimburseScreen_State extends State<ReimburseScreen> {
  var selectedCategory;
  var selectedDate;

  int _value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Column(
        children: <Widget>[
          Stack(
            children: [
              WavyHeader(),
              Container(
                  margin: EdgeInsets.only(top: 90),
                  padding: EdgeInsets.fromLTRB(20, 5, 25, 5),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      Text(
                        'Reimburse\t\t',
                        maxLines: 1,
                        style: GoogleFonts.luckiestGuy(
                          fontSize: 28,
                          color: Colors.red,
                          fontStyle: FontStyle.italic,
                        ),
                      ),
                      Image.asset(
                        'assets/icons/menu/ic_refund.png',
                        width: 40,
                        height: 40,
                      ),
                    ],
                  )),
              SafeArea(
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  margin: EdgeInsets.only(
                    top: MediaQuery.of(context).size.height / 5,
                    left: 10,
                    right: 10,
                  ),
                  child: Column(
                    children: [
                      InkWell(
                        child: Container(
                            margin: EdgeInsets.only(top: 15, bottom: 15),
                            padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                            width: double.infinity,
                            decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5),
                                gradient: LinearGradient(colors: [
                                  Color(0xFF2D4059),
                                  Color(0xFF2D4059),
                                  /*Color(0xFFEAFFD0),
                                  Color(0xFF95E1D3),*/
                                ])),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text('Lihat Riwayat Reimburse\t\t',
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 17,
                                        fontWeight: FontWeight.w500)),
                                Image.asset(
                                  'assets/images/ic_history.png',
                                  width: 30,
                                  height: 30,
                                )
                              ],
                            )),
                        onTap: () {},
                      ),
                      Container(
                        child: Card(
                          elevation: 10,
                          child: Container(
                            decoration: BoxDecoration(
                                color: Color(0XFFFAF7EE),
                                borderRadius: BorderRadius.circular(10)),
                            child: Column(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(
                                      left: 10, right: 10, top: 10, bottom: 10),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          flex: 3,
                                          child: Text(
                                            'Kategori\t:\t',
                                            style: GoogleFonts.inconsolata(
                                                fontSize: 17),
                                          )),
                                      Expanded(
                                          flex: 7,
                                          child: Container(
                                            decoration: BoxDecoration(
                                                color:
                                                    CupertinoColors.systemGrey2,
                                                borderRadius:
                                                    BorderRadius.circular(5)),
                                            child: DropdownButton(
                                              value: this.selectedCategory,
                                              isExpanded: true,
                                              underline: SizedBox(),
                                              hint: Text(
                                                '\t\t\tPilih Kategori',
                                                style: TextStyle(
                                                    color: Colors.black54),
                                              ),
                                              onChanged: (value) {
                                                print(value);
                                                setState(() {
                                                  selectedCategory = value!;
                                                });
                                              },
                                              items: reimburseCategory
                                                  .map(
                                                    (e) => DropdownMenuItem(
                                                        value: e,
                                                        child:
                                                            Text("\t\t\t" + e)),
                                                  )
                                                  .toList(),
                                            ),
                                          )),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      left: 10, right: 10, top: 10, bottom: 10),
                                  child: Column(
                                    children: [
                                      Row(
                                        children: [
                                          Expanded(
                                              flex: 3,
                                              child: Text(
                                                'Tanggal\t:\t',
                                                style: GoogleFonts.inconsolata(
                                                    fontSize: 17),
                                              )),
                                          Expanded(
                                              flex: 7,
                                              child: Container(
                                                decoration: BoxDecoration(
                                                    color: CupertinoColors
                                                        .systemGrey2,
                                                    borderRadius:
                                                        BorderRadius.circular(
                                                            5)),
                                                child: Column(
                                                  children: [
                                                    DropdownButton(
                                                      value: this.selectedDate,
                                                      isExpanded: true,
                                                      underline: SizedBox(),
                                                      hint: Text(
                                                        '\t\t\tPilih Tanggal',
                                                        style: TextStyle(
                                                            color:
                                                                Colors.black54),
                                                      ),
                                                      onChanged: (value) {
                                                        print(value);
                                                        setState(() {
                                                          selectedDate = value!;
                                                        });
                                                      },
                                                      items: reimburseCategory
                                                          .map(
                                                            (e) =>
                                                                DropdownMenuItem(
                                                                    value: e,
                                                                    child: Text(
                                                                        "\t\t\t" +
                                                                            e)),
                                                          )
                                                          .toList(),
                                                    ),
                                                  ],
                                                ),
                                              )),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      left: 10, right: 10, top: 10, bottom: 10),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          flex: 3,
                                          child: Text(
                                            'Total Harga\t:\t',
                                            style: GoogleFonts.inconsolata(
                                                fontSize: 17),
                                          )),
                                      Expanded(
                                          flex: 7,
                                          child: Container(
                                              decoration: BoxDecoration(
                                                  color: Colors.white,
                                                  borderRadius:
                                                      BorderRadius.circular(5)),
                                              child: Padding(
                                                padding: EdgeInsets.only(
                                                    left: 10,
                                                    right: 10,
                                                    top: 5,
                                                    bottom: 5),
                                                child: TextFormField(
                                                    keyboardType:
                                                        TextInputType.number,
                                                    maxLines: 1,
                                                    textInputAction:
                                                        TextInputAction.next,
                                                    decoration: InputDecoration(
                                                        border:
                                                            InputBorder.none,
                                                        hintText:
                                                            "Masukkan tanpa tanda baca (.) atau (,)")),
                                              ))),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      left: 10, right: 10, top: 10, bottom: 10),
                                  child: Row(
                                    children: [
                                      Expanded(
                                          flex: 3,
                                          child: Text(
                                            'Deskripsi\t:\t',
                                            style: GoogleFonts.inconsolata(
                                                fontSize: 17),
                                          )),
                                      Expanded(
                                          flex: 7,
                                          child: Container(
                                              decoration: BoxDecoration(
                                                  color: Colors.white,
                                                  borderRadius:
                                                      BorderRadius.circular(5)),
                                              child: Padding(
                                                padding: EdgeInsets.only(
                                                    left: 10,
                                                    right: 10,
                                                    top: 5,
                                                    bottom: 5),
                                                child: TextFormField(
                                                    keyboardType:
                                                        TextInputType.multiline,
                                                    maxLines: null,
                                                    textInputAction:
                                                        TextInputAction.done,
                                                    decoration: InputDecoration(
                                                        border:
                                                            InputBorder.none,
                                                        hintText: "Deskripsi")),
                                              ))),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      left: 10, right: 10, top: 10, bottom: 10),
                                  child: Column(
                                    children: [
                                      Row(
                                        children: [
                                          Expanded(
                                              flex: 3,
                                              child: Text(
                                                'Pembayaran\t:',
                                                style: GoogleFonts.inconsolata(
                                                    fontSize: 17),
                                              )),
                                          Expanded(
                                              flex: 7,
                                              child: Container(
                                                child: Column(
                                                  children: [
                                                    Row(
                                                      children: [
                                                        Radio(
                                                          value: 1,
                                                          groupValue: _value,
                                                          onChanged: (value) {
                                                            setState(() {
                                                              _value = value!;
                                                            });
                                                          },
                                                        ),
                                                        Flexible(
                                                            child: Text(
                                                                "Karyawan (Perlu Reimburse)",
                                                                style:
                                                                    TextStyle(
                                                                  color: Colors
                                                                      .black54,
                                                                ))),
                                                      ],
                                                    ),
                                                    Row(
                                                      children: [
                                                        Radio(
                                                          value: 2,
                                                          groupValue: _value,
                                                          onChanged: (value) {
                                                            setState(() {
                                                              _value = value!;
                                                            });
                                                          },
                                                        ),
                                                        Flexible(
                                                            child: Text(
                                                                "Perusahaan",
                                                                style: TextStyle(
                                                                    color: Colors
                                                                        .black54)))
                                                      ],
                                                    ),
                                                  ],
                                                ),
                                              )),
                                        ],
                                      ),
                                    ],
                                  ),
                                ),
                                Container(
                                  margin: EdgeInsets.only(
                                      left: 10, right: 10, top: 10, bottom: 10),
                                  child: Column(
                                    children: [
                                      Row(
                                        children: [
                                          Expanded(
                                            flex: 3,
                                            child: Text(
                                              'Lampiran\t:\t',
                                              style: GoogleFonts.inconsolata(
                                                  fontSize: 17),
                                            ),
                                          ),
                                          Expanded(
                                            flex: 7,
                                            child: Container(
                                              child: ElevatedButton(
                                                onPressed: () {},
                                                child: Container(
                                                  width: double.infinity,
                                                  child: Text("Pilih File"),
                                                ),
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                      Row(
                                        children: [
                                          Expanded(
                                            flex: 3,
                                            child: Text(
                                              '',
                                              style: GoogleFonts.inconsolata(
                                                  fontSize: 17),
                                            ),
                                          ),
                                          Expanded(
                                            flex: 7,
                                            child: Visibility(
                                                visible: true,
                                                child: Container(
                                                  alignment:
                                                      Alignment.centerLeft,
                                                  margin: EdgeInsets.only(
                                                      left: 15,
                                                      right: 15,
                                                      bottom: 10),
                                                  child: Flexible(
                                                    child: Text(
                                                      "Selected File",
                                                      style: TextStyle(
                                                          color:
                                                              Colors.black54),
                                                    ),
                                                  ),
                                                )),
                                          )
                                        ],
                                      ),
                                      InkWell(
                                        child: Container(
                                          padding: EdgeInsets.fromLTRB(
                                              10, 10, 10, 10),
                                          width: double.infinity,
                                          decoration: BoxDecoration(
                                              borderRadius:
                                                  BorderRadius.circular(5),
                                              gradient: LinearGradient(colors: [
                                                Color(0xFFFF9945),
                                                Color(0xFFFc6076)
                                              ])),
                                          child: Text('Ajukan',
                                              textAlign: TextAlign.center,
                                              style: TextStyle(
                                                  color: Colors.white,
                                                  fontSize: 17,
                                                  fontWeight: FontWeight.w500)),
                                        ),
                                        onTap: () {},
                                      )
                                    ],
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      )),
    );
  }
}

List<String> reimburseCategory = [
  "Paid Time Off",
  "Sick Time Off",
  "Compensatory Days",
  "Unpaid"
];