Untitled

import 'package:clean_architecture_tdd_flutter_template/core/res/colours.dart';
import 'package:clean_architecture_tdd_flutter_template/src/find/presentation/widgets/circular_check_box.dart';

import 'package:flutter/material.dart';
import 'package:clean_architecture_tdd_flutter_template/core/res/media_res.dart';

import 'package:flutter_svg/flutter_svg.dart';

class FilterDialog extends StatefulWidget {
  const FilterDialog({super.key});

  @override
  State<FilterDialog> createState() => _FilterDialogState();
}

class _FilterDialogState extends State<FilterDialog> {
  double _value = 0;
  String _status = '0 kW';
  final Color _statusColor = Colours.blackColour;
  bool? isSelected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.57,
      decoration: const BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(30),
            topRight: Radius.circular(30),
          )),
      child: SafeArea(
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 24),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            children: [
              const Column(
                children: [
                  Text(
                    'Filter',
                    style: TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Divider(
                    color: Colours.secondaryColourDisabled,
                  )
                ],
              ),
              Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      const SizedBox(height: 10),
                      const Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Minimum Power',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          SizedBox(
                            width: MediaQuery.of(context).size.width * 0.70,
                            child: Slider(
                              thumbColor: Colours.secondaryColour,
                              activeColor: Colours.secondaryColour,
                              inactiveColor: Colours.secondaryColourDisabled,
                              min: 0.0,
                              max: 240.0,
                              value: _value,
                              divisions: 100,
                              onChanged: (value) {
                                setState(() {
                                  _value = value;
                                  _status = '${_value.round()} kW';
                                });
                              },
                              onChangeStart: (value) {
                                setState(() {
                                  _status = '0 kW';
                                });
                              },
                              onChangeEnd: (value) {
                                setState(() {
                                  _status = '${_value.round()} kW';
                                });
                              },
                            ),
                          ),
                          Text(
                            '=> $_status',
                            style: TextStyle(fontSize: 16, color: _statusColor),
                          ),
                        ],
                      ),
                      const SizedBox(height: 10),
                      const Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Connector',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                      Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            Container(
                              margin: const EdgeInsets.all(10),
                              child: Table(
                                children: [
                                  TableRow(children: [
                                    Padding(
                                      padding:
                                          const EdgeInsets.only(bottom: 10),
                                      child: SizedBox(
                                        // width: MediaQuery.of(context).size.width * 0.5,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceAround,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Row(
                                              children: [
                                                Align(
                                                  alignment:
                                                      Alignment.centerLeft,
                                                  child: SvgPicture.asset(
                                                      MediaRes.css1Icon),
                                                ),
                                                SizedBox(
                                                  width: 10,
                                                ),
                                                const Text('CCS-1'),
                                              ],
                                            ),
                                            SizedBox(
                                              width: 50,
                                            ),
                                            const CircularCheckbox(),
                                          ],
                                        ),
                                      ),
                                    ),
                                    SizedBox(
                                      // width: MediaQuery.of(context).size.width * 0.5,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceAround,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              SvgPicture.asset(
                                                  MediaRes.type1Icon),
                                              SizedBox(
                                                width: 10,
                                              ),
                                              const Text('Type-1'),
                                            ],
                                          ),
                                          SizedBox(
                                            width: 50,
                                          ),
                                          const CircularCheckbox(),
                                        ],
                                      ),
                                    ),
                                  ]),
                                  TableRow(children: [
                                    Padding(
                                      padding:
                                          const EdgeInsets.only(bottom: 10),
                                      child: SizedBox(
                                        // width: MediaQuery.of(context).size.width * 0.5,
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceAround,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Row(
                                              children: [
                                                SvgPicture.asset(
                                                    MediaRes.css2Icon),
                                                SizedBox(
                                                  width: 10,
                                                ),
                                                const Text('CCS-2'),
                                              ],
                                            ),
                                            SizedBox(
                                              width: 50,
                                            ),
                                            const CircularCheckbox(),
                                          ],
                                        ),
                                      ),
                                    ),
                                    SizedBox(
                                      // width: MediaQuery.of(context).size.width * 0.5,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceAround,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              SvgPicture.asset(
                                                  MediaRes.type2Icon),
                                              SizedBox(
                                                width: 10,
                                              ),
                                              const Text('Type-2'),
                                            ],
                                          ),
                                          SizedBox(
                                            width: 50,
                                          ),
                                          const CircularCheckbox(),
                                        ],
                                      ),
                                    ),
                                  ]),
                                  TableRow(children: [
                                    SizedBox(
                                      // width: MediaQuery.of(context).size.width * 0.5,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceAround,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              Container(
                                                child: SvgPicture.asset(
                                                    MediaRes.teslaIcon),
                                              ),
                                              SizedBox(
                                                width: 10,
                                              ),
                                              const Text('Tesla'),
                                            ],
                                          ),
                                          SizedBox(
                                            width: 60,
                                          ),
                                          const CircularCheckbox(),
                                        ],
                                      ),
                                    ),
                                    SizedBox(
                                      // width: MediaQuery.of(context).size.width * 0.5,
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceAround,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Row(
                                            children: [
                                              SvgPicture.asset(
                                                  MediaRes.chademoIcon),
                                              SizedBox(
                                                width: 10,
                                              ),
                                              const Text('CHAdemo'),
                                            ],
                                          ),
                                          SizedBox(
                                            width: 28,
                                          ),
                                          const CircularCheckbox(),
                                        ],
                                      ),
                                    ),
                                  ])
                                ],
                              ),
                            ),
                          ]),
                      // const SizedBox(height: 30),
                      const SizedBox(height: 10),
                      const Align(
                        alignment: Alignment.centerLeft,
                        child: Text(
                          'Sort',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold),
                        ),
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 0.825,
                        child: const Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('By Distance'),
                            CircularCheckbox(),
                          ],
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 15),
                        child: Row(
                          children: [
                            Expanded(
                              child: ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: Colours.primaryColour,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5),
                                    side: const BorderSide(
                                        color: Colours.greenColour, width: 1.5),
                                  ),
                                ),
                                child: const Text(
                                  'Cancel',
                                  style: TextStyle(color: Colours.greenColour),
                                ),
                              ),
                            ),
                            const SizedBox(
                              width: 10,
                            ),
                            Expanded(
                              child: ElevatedButton(
                                onPressed: () {
                                  // Delete Account
                                },
                                style: ElevatedButton.styleFrom(
                                  backgroundColor: Colours.greenColour,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5),
                                  ),
                                ),
                                child: const Text(
                                  'Save',
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}