Flutter dynamic creation RichText object from List<String>

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(),
        ),
      ),
    );
  }
}