Fluter center text with icon, but multi line when not enough Space

Question

I want to display three Texts. Each Text has an Icon in front of itself. I want these three combinations to be evenly spaced inside a Row. so far so easy:

Behavior with to much space:

return Row(
  children: [
    Icon(Icons.add),
    Text("A text"),
    Expanded(child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.add),
        Text("a possibly very long text"),
      ],
    )),
    Icon(Icons.add),
    Text("another text"),
  ],
);

But if the strings are getting to long or the space gets to narrow I want the Text to wrap in to a second line. I can achieve this by wrapping the middle Text in an Expanded, but then the Icon gets separated from the Text. So how can I combine these to results?

Behavior with not much space:

return Row(
  children: [
    Icon(Icons.add),
    Text("A text"),
    Expanded(child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.add),
        Expanded(child: Text("a possibly very long text")),
      ],
    )),
    Icon(Icons.add),
    Text("another text"),
  ],
);

or

return Row(
  children: [
    Icon(Icons.add),
    Text("A text"),
    Icon(Icons.add),
    Expanded(child: Text("a possibly very long text")),
    Icon(Icons.add),
    Text("another text"),
  ],
);

Edit:

In Short I want one Widget, the looks like

when there ist enough space to display al texts in one row and looks like

when there is not enough space.

Answer 1

You can try combination of Row and Expanded widgets.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

const item1 = "Paris, Berlin, Rome, Madrid, London, Stockholm, Lisbon";
const item2 = "Delhi, Mumbai, Chennai, Kolkata, Lucknow, Jaipur, Pune";
const item3 = "Tokyo, New York, Los Angles, San Francisco, Chicago, Cairo";

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SizedBox.expand(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Icon(
                    Icons.add,
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Expanded(
                    child: Text(
                      item1,
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Icon(
                    Icons.add,
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Expanded(
                    child: Text(
                      item2,
                    ),
                  )
                ],
              ),
            ),
            Expanded(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: const [
                  Icon(
                    Icons.add,
                  ),
                  SizedBox(
                    width: 5,
                  ),
                  Expanded(
                    child: Text(
                      item3,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}