Flutter：- 我想在 flutter 中使用自定義下拉按鈕

Question

我想創建自定義下拉按鈕，如下所示：-

我嘗試了很多解決方案，但我無法找到任何方法來做到這一點

Answer 1

使用此代碼來實現您的結果：-

class MPRVDropdown extends StatefulWidget {
  final String text;
  final int valueId;
  final String valueName;
  bool isDropdownOpened;
  final bool isItemSelected;
  final List<Widget> items;
  final double width;

  MPRVDropdown(
      {Key? key,
      required this.text,
      required this.valueId,
      required this.valueName,
      required this.items,
      required this.isDropdownOpened,
      required this.isItemSelected,
      required this.width})
      : super(key: key);

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

class _MPRVDropdownState extends State<MPRVDropdown> {
  late GlobalKey _actionKey;
  double? _height, _width, _xPos, _yPos;
  OverlayEntry? _floatingDropdown;

  @override
  void initState() {
    _actionKey = LabeledGlobalKey(widget.text);
    super.initState();
  }

  void _findDropdownData() {
    RenderBox renderBox = _actionKey.currentContext.findRenderObject();
    _height = renderBox.size.height;
    _width = renderBox.size.width;
    Offset offset = renderBox.localToGlobal(Offset.zero);
    _xPos = offset.dx;
    _yPos = offset.dy;
  }

  OverlayEntry _createFloatingDropdown() {
    return OverlayEntry(
      builder: (context) {
        return Positioned(
          left: _xPos,
          width: _width,
          top: _yPos! + _height!,
          height: 4 * _height!,
          child: Material(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
            child: Column(
              children: [
                5.0.addHSpace(),
                Container(
                  height: 4 * _height! - 5,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.white,
                      border: Border.all(color: Colors.black12, width: 2)),
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: widget.items,
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    if (!widget.isDropdownOpened &&
        _floatingDropdown != null &&
        _floatingDropdown!.mounted) {
      _floatingDropdown!.remove();
      _floatingDropdown = null;
    }
    return GestureDetector(
      key: _actionKey,
      onTap: () {
        setState(() {
          if (widget.items.isNotEmpty) {
            if (widget.isDropdownOpened) {
              _floatingDropdown!.remove();
              _floatingDropdown = null;
            } else {
              _findDropdownData();
              _floatingDropdown = _createFloatingDropdown();
              Overlay.of(context)!.insert(_floatingDropdown!);
            }
            widget.isDropdownOpened = !widget.isDropdownOpened;
          }
        });
      },
      child: Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.white,
            border: Border.all(color: Colors.black12, width: 2)),
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        width: widget.width == null ? double.infinity : widget.width,
        child: Row(
          children: [
            Expanded(
              child: widget.isItemSelected &&
                      (widget.valueName != null && widget.valueName.isNotEmpty)
                  ? Text(
                      widget.valueName,
                      style: GoogleFonts.sourceSansPro(
                        color: appColor,
                        fontSize: 15,
                        fontWeight: FontWeight.w400,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    )
                  : Text(
                      widget.text,
                      style: GoogleFonts.sourceSansPro(
                        color: Colors.black12,
                        fontSize: 15,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
            ),
            Icon(
              widget.isDropdownOpened
                  ? Icons.arrow_drop_up
                  : Icons.arrow_drop_down,
              color: Colors.black12,
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

您可以使用DropdownButton2自定義它以及更多。 它基於 Flutter 的核心 DropdownButton ，您可以根據需要自定義更多選項。