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?