动态调整行内按钮的文本大小

Question

我正在使用本地化来支持我的应用程序中的多种语言。这会导致按钮中的文本长度不同。所以我需要让它具有响应能力。

我有两个按钮Row()。我想调整这些按钮内的文本大小，这样它们就不会产生任何溢出。目前在某些语言中它看起来像这样：

我尝试使用auto_size_text但没有成功。

这是我的对话框代码：

return Dialog(
    backgroundColor: Colors.transparent,
    elevation: 0,
    child: InkWell(
        onTap: () {
          Navigator.of(context).pop();
        },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  width: kIsWeb ? 40.w : 100.w,
                  color: Theme.of(context).dialogBackgroundColor,
                  padding: EdgeInsets.all(15.sp),
                  child: Column(children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        OutlinedButton(
                          style: OutlinedButton.styleFrom(
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
                              side: BorderSide(width: 2, color: Theme.of(context).primaryColor),
                              primary: Colors.black54),
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text(AppLocalizations.of(context)!.joinGameDialogCancelButton,
                              style: TextStyle(fontSize: kIsWeb ? 4.sp : 12.sp)),
                        ),
                        ElevatedButton(
                          style: TextButton.styleFrom(
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
                              backgroundColor: Theme.of(context).primaryColor,
                              primary: Colors.white),
                          onPressed: () async {
                            if (formKey.currentState!.validate()) {
                              Navigator.of(context).pop();
                              widget.onFinished(nameController.text.trim());
                            }
                          },
                          child: AutoSizeText(
                              AppLocalizations.of(context)!.joinGameDialogJoinButton,
                            style: TextStyle(fontSize: kIsWeb ? 4.sp : 14.sp),
                            overflow: TextOverflow.clip,
                            stepGranularity: 1,
                            maxLines: 1,
                          )
                        ),
                      ],
                    ),
                    Padding(padding: EdgeInsets.only(top: 15.sp)),
                    Text("some eula text"),
                  ]))
            ],
          ),
        )));

Answer 1

您可以使用FittedBox 小部件

 FittedBox(
      fit: BoxFit.scaleDown,
      child: Text(
        "Your Text Here",
        maxLines: 1,
      ),
    ),