Flutter Wrap 不适用于大文本

Question

I need some help to create a serie of sequential widgets, one after one, when the first ends, it comes the other directly.

I tried to use Wrap, but the Text is long and it takes more than the full width, so the other widget goes under the Text, not after it, even that there is space after the Text

import 'package:flutter/material.dart';

class Testee extends StatefulWidget {
  @override
  _TesteeState createState() => _TesteeState();
}

class _TesteeState extends State<Testee> {
  String loremOne =
      "Nostrud cillum ea do sit eu sint reprehenderit est tempor amet. Ex minim cupidatat exercitation officia mollit occaecat dolor sint sit aliqua dolore velit exercitation duis. Eu cupidatat pariatur aliquip aliquip ipsum sint ad ullamco irure eiusmod velit mollit ut elit.";

  String loremTwo = "Fugiat aute eu tempor et consequat nulla.";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amberAccent,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(15.0),
          child: ListView(
            children: [
              Wrap(
                direction: Axis.horizontal,
                spacing: 10.0,
                children: [
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremTwo),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

image to understand the problem

Answer 1

Actually, Wrap is not to use to separate text, but Wrap used to separate widgets.

As @pskink said in the comment. You need RichText to create your widget like your shown image.

I make a comparison beetween Wrap and RichText . May you can try this code

import 'package:flutter/material.dart';

class Testee extends StatefulWidget {
  @override
  _TesteeState createState() => _TesteeState();
}

class _TesteeState extends State<Testee> {
  String loremOne =
      "Nostrud cillum ea do sit eu sint reprehenderit est tempor amet. Ex minim cupidatat exercitation officia mollit occaecat dolor sint sit aliqua dolore velit exercitation duis. Eu cupidatat pariatur aliquip aliquip ipsum sint ad ullamco irure eiusmod velit mollit ut elit.";

  String loremTwo = "Fugiat aute eu tempor et consequat nulla.";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amberAccent,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(15.0),
          child: ListView(
            children: [
              Wrap(
                direction: Axis.horizontal,
                spacing: 10.0,
                children: [
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremOne),
                  Icon(Icons.circle, size: 16),
                  Text(loremTwo),
                ],
              ),
              //may you can compare your wrap with Richtext below
              RichText(
                  text: TextSpan(children: [
                TextSpan(text: loremOne),
                WidgetSpan(child: Icon(Icons.circle, size: 16)),
                TextSpan(text: loremOne),
                WidgetSpan(child: Icon(Icons.circle, size: 16)),
                TextSpan(text: loremTwo),
              ]))
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

I recommend that you use the AutoSizeText package , it is very useful!