How to align the children of RichText in flutter

Question

how I can get the same result of "MainAxisAlignment.spaceBetween" in the Row widget in flutter using RichText for example :

 Container(
            width: double.maxFinite,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.black)),
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: RichText(
              text: TextSpan(
                style: TextStyle(
                    fontStyle: FontStyle.italic,
                    fontSize: 16,
                    color: Colors.black),
                children: [
                  TextSpan(
                    text: 'first text',
                  ),
                  TextSpan(
                    text: 'second text',
                  ),
                ],
              ),
            )),

I need to get this result:

I tried to use WidgetSpan with Align widget to wrap the child text

Container(
            width: double.maxFinite,
            decoration: BoxDecoration(
                border: Border.all(width: 1, color: Colors.black)),
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: RichText(
              text: TextSpan(
                children: [
                  WidgetSpan(
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'first text',
                        textAlign: TextAlign.left,
                        textDirection: TextDirection.ltr,
                        style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                  WidgetSpan(
                    child: Align(
                      alignment: Alignment.centerRight,
                      child: Text(
                        'second text',
                        textAlign: TextAlign.right,
                        textDirection: TextDirection.ltr,
                        style: TextStyle(
                          fontStyle: FontStyle.italic,
                          fontSize: 16,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            )),

but it give me the "second text" in a new line! not in the same line

is there any way to do it with the RichText widget?

Answer 1

You could use Row

Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Text('start'),
    Text('end'),
  ],
),

You could also use MainAxisAlignment.spaceBetween and wrap the Text widgets with a Padding to position them exactly where you want.