textAlign: TextAlign.justify not working same on all browsers/platforms

[crazedVic]

Steps to Reproduce
Please tell me exactly how to reproduce the problem you are running into:

textAlign: TextAlign.justify does not seem to work on Safari Mobile or Mac Desktop. Works as expected on Chrome Mac Desktop and Chrome Android. Does not seem to work on Chrome IOS.

Showing the entire containment of the AutoSizeText in case it might be the underlying cause?

Code sample

Expanded(
                    flex: 1,
                    child: SingleChildScrollView(
                      child: Container(
                        alignment: Alignment.center,
                        padding: EdgeInsets.symmetric(horizontal: 25),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Container(
                              padding: EdgeInsets.symmetric(vertical: 16),
                              alignment: Alignment.topCenter,
                              child: Image.asset(
                                kLogo,
                                fit: BoxFit.contain,
                                width: 160,
                                // height: constraints.maxHeight * 0.2,
                              ),
                            ),
                            SizedBox(
                              height: 10,
                            ),
                            Container(
                              child: AutoSizeText(
                                LocaleKeys.appText.tr(),
                                textAlign: TextAlign.justify,
                                minFontSize: 18,
                                style: infoTextStyle,
                              ),
                            ),
                            SizedBox(
                              height: 40,
                            ),
                            textInput.TextInput(
                              controller: controller,
                              placeholder: LocaleKeys.name_placeholder.tr(),
                              borderColor: borderColor,
                              onChanged: (val) {
                                setState(() {
                                  borderColor = Colors.black;
                                });
                              },
                              inputFormatters: [
                                WhitelistingTextInputFormatter(
                                    RegExp("[$nameRegExp]"))
                              ],
                            ),
                            borderColor == Colors.red
                                ? Container(
                                    width: maxWidth,
                                    child: Text(
                                      LocaleKeys.first_last_name_required.tr(),
                                      textAlign: TextAlign.end,
                                      style: TextStyle(
                                          fontSize: 12, color: borderColor),
                                    ),
                                  )
                                : SizedBox(),
                            Container(
                              margin: EdgeInsets.fromLTRB(0, 24, 0, 0),
                              alignment: Alignment.bottomRight,
                              height: 60,
                              child: Button(
                                width: 140,
                                text: LocaleKeys.start.tr().toUpperCase(),
                                color: primaryButtonColor,
                                onTap: onTapStart,
                              ),
                            ),
                            SizedBox(
                              height: 30,
                            ),
                          ],
                        ),
                      ),
                    ),
                  )

Screenshots

Version

• Flutter version: [e.g. 1.5.4]
• auto_size_text version: [e.g. 1.2.1]
  auto_size_text: ^2.1.0
  Flutter 1.19.0-4.1.pre • channel beta • https://github.com/flutter/flutter.git
  Framework • revision f994b76974 (10 days ago) • 2020-06-09 15:53:13 -0700
  Engine • revision 9a28c3bcf4
  Tools • Dart 2.9.0 (build 2.9.0-14.1.beta)

[loic-hamdi]

Any update on this issue please?

[PcolBP]

It's engine specific. I had same problem when tried to develop page in web-renderer html. Changed to canvaskit and problem with TextAlign doesn't exist any more. Which web-renderer do you use?