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),
],
),
],
),
),
),
);
}
}
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),
]))
],
),
),
),
);
}
}
I recommend that you use the AutoSizeText package
, it is very useful!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.