Flutter dynamic creation RichText object from List<String> - flutter

Question

There is a random list whose length is not constant. For example
List<String> exampleList = List<String>();
exampleList.add("one");
exampleList.add("second random line");
exampleList.add("third random line");
Depending on the content of the exampleList[index], which is generated randomly, it is necessary to change the appearance, design, styles etc. If you use RichText TextSpan, then already hardcoded data is transferred there, and I need to generate this RichText dynamically. Any ideas on this?
approximate result of formating
child: RichText(
text: TextSpan(
text: 'GitHub is a development platform inspired by the way you work. From ',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
),
children: <TextSpan>[
TextSpan(text: 'op_n',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
recognizer: TapGestureRecognizer()
..onTap = () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Sending Message"),
));
}
),
TextSpan(
text: ' to ',
style: TextStyle(color: Colors.grey,
fontSize: 20,
)
),
TextSpan(
text: 'busin_ss,',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
recognizer: TapGestureRecognizer()
..onTap = () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text("Sending Message"),
));
}
),
TextSpan(
text: ' you can host and review code, manage projects, and build software alongside 36 million developers.',
style: TextStyle(color: Colors.grey,
fontSize: 20,
)
)
]
),
)

Answer 1

Based on your sample, I see that you define each part of your RichText with a text, a style, and optionally a callback.
You could use a List<MyText> instead of a List<String>:
class MyText {
final String text;
final TextStyle style;
final void Function(BuildContext) callback;
MyText({
this.text,
this.style,
this.callback,
});
}
List<MyText> textSpanList = [
MyText(
text:
'GitHub is a development platform inspired by the way you work. From ',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
),
),
MyText(
text: 'op_n',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
callback: (context) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("Sending Message"),
),
);
},
),
MyText(
text: ' to ',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
),
),
MyText(
text: 'busin_ss,',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
callback: (context) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("Sending Message"),
),
);
},
),
MyText(
text:
' you can host and review code, manage projects, and build software alongside 36 million developers.',
style: TextStyle(
color: Colors.grey,
fontSize: 20,
),
),
];
And then use the List<MyText> as follows:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
home: Scaffold(body: MyWidget()),
),
);
}
class MyWidget extends StatelessWidget {
const MyWidget({
Key key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
padding: const EdgeInsets.all(8.0),
child: RichText(
text: TextSpan(
children: textSpanList
.map(
(data) => data.callback == null
? TextSpan(
text: data.text,
style: data.style,
)
: TextSpan(
text: data.text,
style: data.style,
recognizer: TapGestureRecognizer()
..onTap = () => data.callback(context),
),
)
.toList(),
),
),
);
}
}