dropdownlist.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Properties Dropdown Example')),
        body: Center(
          child: PropertiesCard(),
        ),
      ),
    );
  }
}

class PropertiesCard extends StatefulWidget {
  @override
  _PropertiesCardState createState() => _PropertiesCardState();
}

class _PropertiesCardState extends State<PropertiesCard> {
  List<String> selectedProperties = [];

  void _updateSelectedProperties(List<String> newSelected) {
    setState(() {
      selectedProperties = newSelected;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 500,
        height: 500,
        child: Card(
          margin: EdgeInsets.all(20),
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              children: [
                Text(
                  'Selected Properties:',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                SizedBox(height: 10),
                PropertiesDropDown(
                  options: ['Property 1', 'Property 2', 'Property 3'],
                  selectedValues: selectedProperties,
                  onChanged: _updateSelectedProperties,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

//

class PropertiesDropDown extends StatefulWidget {
  final List<String> options;
  final List<String> selectedValues;
  final Function(List<String>) onChanged;

  const PropertiesDropDown({
    Key? key,
    required this.options,
    required this.selectedValues,
    required this.onChanged,
  }) : super(key: key);

  @override
  _PropertiesDropDownState createState() => _PropertiesDropDownState();
}

class _PropertiesDropDownState extends State<PropertiesDropDown> {
  void _showDialog() {
    // Create a copy of the selected values to manipulate within the dialog
    List<String> selectedOptions = List<String>.from(widget.selectedValues);

    showDialog(
      context: context,
      builder: (context) {
        return StatefulBuilder(
          builder: (BuildContext context, StateSetter setState) {
            return AlertDialog(
              title: Text("Select Properties"),
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: widget.options.map((option) {
                  return CheckboxListTile(
                    title: Text(option),
                    value: selectedOptions.contains(option),
                    onChanged: (bool? value) {
                      setState(() {
                        if (value == true &&
                            !selectedOptions.contains(option)) {
                          selectedOptions.add(option);
                        } else {
                          selectedOptions.remove(option);
                        }
                      });
                    },
                  );
                }).toList(),
              ),
              actions: [
                TextButton(
                  onPressed: () {
                    widget
                        .onChanged(selectedOptions); // Update the parent widget
                    Navigator.of(context).pop();
                  },
                  child: Text("Ok",
                      style:
                          TextStyle(color: Colors.white)), // Set the text color
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.blue, // Set the button color
                    minimumSize:
                        Size(100, 50), // Set the button size to be larger
                  ),
                ),
              ],
            );
          },
        );
      },
    ).then((_) {
      widget.onChanged(
          selectedOptions); // Update the parent widget when dialog is closed
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _showDialog,
      child: Container(
        padding: EdgeInsets.only(top: 10), // Add some padding at the top
        child: CustomPaint(
          painter: BorderPainter('Properties'),
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  child: Text(
                    widget.selectedValues.isEmpty
                        ? 'Select Properties'
                        : widget.selectedValues.join(', '),
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
                Icon(Icons.arrow_drop_down),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class BorderPainter extends CustomPainter {
  final String title;
  BorderPainter(this.title);

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;

    // Calculate the width of the title using a TextPainter
    TextPainter textPainter = TextPainter(
      text: TextSpan(text: title, style: TextStyle(color: Colors.black)),
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr,
    );
    textPainter.layout();

    final double titleWidth =
        textPainter.width + 10; // Add some padding to the right of the title

    // Draw the top line, except where the title will be
    canvas.drawLine(
      Offset(titleWidth, 0),
      Offset(size.width, 0),
      paint,
    );

    // Draw the right, bottom, and left lines
    canvas.drawLine(
        Offset(size.width, 0), Offset(size.width, size.height), paint);
    canvas.drawLine(
        Offset(size.width, size.height), Offset(0, size.height), paint);
    canvas.drawLine(Offset(0, size.height), Offset(0, 0), paint);

    // Draw the title
    textPainter.paint(
        canvas, Offset(5, -10)); // 5 is the padding to the left of the title
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}