I have a Row with 3 Text widgets. I would like them to be spaced evenly:

item1      item2      item3

However I also want to make sure that there is no overflow if the Text widgets take up too much space horizontally. That is why I decided to wrap the Row inside a SingleChildScrollView and set the scroll direction to Axis.horizontal. But when I set the scrollDirection property it removed the mainAxisAlginment property of the Row children:

item1 item2 item3

Here is my code:

              const SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text("item1: item1_value"),
                    Text("item2: item2_value"),
                    Text("item3: item3_value")
                  ],
                ),
              )

When I remove the SingleChildScrollView I get the expected behavior but risk overflow. How do I construct my layouts so that I can get my desired outcome?