flutterdarttext-alignmentautoresize

Why textAlign of AutoSizeText Widget and crossAxisAlignment of Wrap Widget doesn't align correctly?


I'm using a Wrap and AutoSizeText for represent a value and the unit of measure on the same line.

I'm trying to align the value and the unit of measure at the end of the Container but it doesn't happen and what I get is this:

enter image description here

Below I attach the code:

                          Wrap(
                            crossAxisAlignment: WrapCrossAlignment.end,
                            children: [
                              Container(
                                  color: Colors.red,
                                  height: calculatedHeight,
                                  child: AutoSizeText(
                                    val.toString() + ' ',
                                    minFontSize: 5,
                                    textAlign: TextAlign.end,
                                    style: TextStyle(
                                        fontSize: item.textSize),
                                  )),
                              Container(
                                  color: Colors.amber,
                                  height: calculatedHeight,
                                  child: AutoSizeText(
                                    unit,
                                    textAlign: TextAlign.end,
                                    minFontSize: 5,
                                    style: TextStyle(
                                        fontSize: item.unitSize),
                                  )),
                            ],
                          ),

if I remove the Container it obviously aligns correctly but the problem is that if I remove it, the text is not resized..


Solution

  • Surely the problem is wrapping the AutoSizeText with the Containers, you can try this and replace the Wrap with the Row and wrap it with a FittedBox:

                                FittedBox(
                                    fit: BoxFit.fitHeight,
                                    child:
                                        Row(
                                          crossAxisAlignment:
                                              CrossAxisAlignment.end,
                                          children: [
                                            AutoSizeText(
                                              val.toString() + ' ',
                                              minFontSize: 1,
                                              style: TextStyle(
                                                fontSize: item.textSize,
                                                fontWeight: FontWeight.bold,
                                                color: HexColor(
                                                  item.colors!.back!,
                                                ),
                                              ),
                                            ),
                                            AutoSizeText(
                                              unit,
                                              textAlign: TextAlign.end,
                                              minFontSize: 1,
                                              style: TextStyle(
                                                fontSize: item.unitSize,
                                                color: HexColor(
                                                  item.colors!.back!,
                                                ),
                                              ),
                                            ),
                                          ),