Dynamically adjust text size in buttons inside Row

Question

I am using localization to support multiple languages in my app. This results in having text in buttons with different length. So I need to have it being responsive.

I have two buttons in a Row(). I want to adjust the textsize inside these buttons so they never produce any overflow. Currently it looks like this in some languages:

I tried using auto_size_text with no success.

This is my code for the dialog:

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

You can use FittedBox Widget

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