我想在左上角显示关闭图标

Question

我正在使用 country_picker 包，它提供了 void 函数。当货币选择器对话框打开然后显示左上角的关闭图标时是否可以将其关闭？ 用户界面图像

这是我的代码

                                InkWell(
                                  onTap: () {
                                    print("Pressed");
                                    showCurrencyPicker(
                                      context: context,
                                      showFlag: true,
                                      showCurrencyName: true,
                                      showCurrencyCode: true,
                                      onSelect: (Currency currencyy) {
                                        setState(() {
                                          currency = currencyy;
                                        });
                                      },
                                    );
                                  },
                                  child: Container(
                                    padding: EdgeInsets.only(
                                        top: 12,
                                        bottom: 12,
                                        left: 20,
                                        right: 20),
                                    decoration: BoxDecoration(
                                        border: Border.all(
                                          width: 1,
                                          color: Colors.grey,
                                        ),
                                        color: Colors.white,
                                        borderRadius:
                                            BorderRadius.circular(12)),
                                    child: Text(currency == null
                                        ? 'Select Your Currency!'
                                        : '${currency!.symbol}${currency!.code}'),
                                  ),
                                ),

任何人都可以解决我的问题吗，我将非常感激

Answer 1

country_picker 包中的 showCurrencyPicker 方法似乎没有提供内置选项来自定义对话框或添加关闭图标。但是，您可以创建自定义对话框来实现所需的行为。以下是如何修改代码以创建带有关闭图标的自定义对话框的示例：

import 'package:flutter/material.dart';
import 'package:country_picker/country_picker.dart';

class YourWidget extends StatefulWidget {
  @override
  _YourWidgetState createState() => _YourWidgetState();
}

class _YourWidgetState extends State<YourWidget> {
  Currency? currency;

  void _openCurrencyPickerDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  IconButton(
                    icon: Icon(Icons.close),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
              CurrencyPicker(
                showFlag: true,
                showCurrencyName: true,
                showCurrencyCode: true,
                onSelect: (Currency selectedCurrency) {
                  setState(() {
                    currency = selectedCurrency;
                  });
                  Navigator.of(context).pop(); // Close the dialog after selection
                },
              ),
            ],
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        _openCurrencyPickerDialog();
      },
      child: Container(
        padding: EdgeInsets.only(top: 12, bottom: 12, left: 20, right: 20),
        decoration: BoxDecoration(
          border: Border.all(
            width: 1,
            color: Colors.grey,
          ),
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
        ),
        child: Text(
          currency == null
              ? 'Select Your Currency!'
              : '${currency!.symbol}${currency!.code}',
        ),
      ),
    );
  }
}

在此修改后的代码中，_openCurrencyPickerDialog 方法创建一个自定义对话框，其中右上角包含一个关闭图标。货币选择器放置在对话框内，选择货币后对话框将关闭。