Flutter: how to wrap mathematical equations in a container?

Question

I want to make a quiz app which might have mathematical equations within its questions. I have checked some libraries (like flutter_math and catex) and they are good for rendering equations BUT one problem I am facing is that there is no text wrapping options.

As an example, let say I have a question: "What is the solutions of the quadratic equation X^2 + 6X + 8 = 0 ?". I want the complete text along with the equations to be wrapped within a container.

Will you give me a good approach to solve this issue?

Here is an example with flutter_math package.

Center(
      child: SizedBox(
        width: 300,
        height: 200,
        child: Math.tex(
          r'\text {What are the solutions of the quadratic equation } x^2+6x+8=0 \text { this is some question text following the equation.}',
          textStyle: TextStyle(fontSize: 25, color: Colors.black),
        ),
      ),
    )

This code doesn't wrap the question text. Instead it trims the text. Probably the package doesn't support wrapping. I just need a good way to add equations between actual text.

Answer 1

This is you want I suppose. For showing text and equations on multiple lines use following code.

Center(
      child: SizedBox(
        width: 300,
        height: 200,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text('What are the solutions of the quadratic equation'),
            SizedBox(height: 2),
            Math.tex(
              r'x^2+6x+8=0',
              textStyle: TextStyle(fontSize: 25, color: Colors.black),
            ),
            SizedBox(height: 2),
            Text('this is some question text following the equation'),
          ],
        ),
      ),
    );

To use Text and equations in a single line Use this

Center(
      child: SizedBox(
        width: 300,
        height: 200,
        child: Wrap(
          direction: Axis.horizontal,
          children: [
            Text('What are the solutions of the quadratic equation '),
            Math.tex(
              r'x^2+6x+8=0',
              textStyle: TextStyle(fontSize: 25, color: Colors.black),
            ),
            Text(' this is some question text following the equation'),
          ],
        ),
      ),
    );
  

Answer 2

SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Container(
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                child: Text(
                  "What is the solutions of the quadratic equation X^2 + 6X + 8 = 0 ?",
                  //style: GoogleFonts.shortStack(color: Colors.white),
                ),
              ),
            ),