flutter: How to control Text size, color, alignment, and adding a separator inside ListView.builder output?

Question

I couldn't figure out how to control the text output of my app's ListView.Builder. I'd like to change the text colors, the alignment, and the size, preferably using the AutoSizeText widget.

when using the alignment: Alignment.topRight, code it only moves it to the top, center, and bottom, but it doesn't move it to the right inside the column.

Flexible(
                flex: 30,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Visibility(
                      visible: _isVisible,
                      child: Row
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                if (sum > 0) {
                                  setState(() {
                                    _isVisible = false;
                                    _isVisible2 = true;
                                  });
                                }
                                resultS = [];
                                print(
                                    'The sum of ' '$sum' ' with 2 digits');
                                for (int z = 1; z <= 9; z++) {
                                  for (int y = 1; y <= 9; y++) {
                                    if (z + y == sum) {
                                      if (z < y) {
                                        String z2 = "$z";
                                        String y2 = "$y";
                                        setState(() {
                                          print('$z + $y');
                                          resultS.add(('•' '$z2' '+$y2'));
                                        });
                                        continue;
                                      }
                                    }
                                  }
                                }
                                print('$resultS');
                              },
                              child: AspectRatio(
                                aspectRatio: 1,
                                child: Padding(
                                  padding: const EdgeInsets.all(4),
                                  child: Container(
                                    //padding: const EdgeInsets.all(10),
                                    color: Colors.deepPurple[500],
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '2',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('Just clicked on 7');
                              },
                              child: AspectRatio(
                                aspectRatio: 1,
                                child: Padding(
                                  padding: const EdgeInsets.all(4),
                                  child: Container(
                                    color: Colors.cyanAccent,
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '8',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.black45),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Visibility(
                      visible: _isVisible2,
                      child: Container(
                        alignment: Alignment.topRight,
                        decoration:
                            const BoxDecoration(color: Colors.white30),
                        width: double.maxFinite,
                        height: 300.0,
                        child: ListView.builder(
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemCount: resultS.length,
                          itemBuilder: (context, index) {
                            return Text(resultS[index]);
                           
                          },
                        ),
                      ),
                    ),

Here's what I get, (results 1+4, 2+3) I'd like the text color to be white, bigger size, starting from the top right, and have a line separator between the numbers.

Answer 1

Try using ListView.separated instead of ListView.builder. Do something like this:

ListView.separated(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemCount: resultS.length,
  separatorBuilder: (BuildContext context, int index) => Divider(color: Colors.white),
  itemBuilder: (BuildContext context, int index) {
    return Align(
      child: Text(resultS[index], style: TextStyle(color: Colors.white, fontSize: 30),
      alignment: Alignment.topRight
    );
  },
)

And you change the fontSize and color values as you wish.