Using Flutter Tex inside stateless widget list tile

Question

I am trying to use flutter_tex to render Latex math material. I am running into issues when trying to use flutter tex inside my app see attached screenshot. I have been able to implement Katex_Flutter successfully and have attached a screenshot of the view with this. I would like to use flutter_tex instead of Katex as it will allow the program to run without using "flutter run --no-sound-null-safety".

Does anyone have any advice on resolving the issue in flutter? I will attach my code below:

class MessageBubble extends StatelessWidget {
  const MessageBubble(
      {required this.content,
      required this.section,
      required this.title,
      required this.isMe});
  final String content;
  final int section;
  final String title;
  final bool isMe;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Material(
            elevation: 5.0,
            child: Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    leading: CircleAvatar(
                      child: Text(section.toString()),
                    ),
                    title: Text(title),
                    //subtitle: KaTeX(laTeXCode: Text(content))
                  ),
                ],
              ),
              TeXViewDetails(
                title: "sdfsdfsdsd",
                style: const TeXViewStyle(backgroundColor: Colors.amber),
                body: TeXExample.matrix,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Updated:

I have tried the below code which stops the error but this now results in the page crashing once I try open via android mobile.

Latex Examples

What do you think about $L' = {L}{\sqrt{1-\frac{v^2}{c^2}}}$ ? And some display $\LaTeX$: $$\boxed{\rm{A function: } f(x) = \frac{5}{3} \cdot x}$$ $\KaTeX$-Flutter provides easy processing of $LaTeX$ embedded into any text. This package was developped for testapp.schule education project. Find us on pub.dev/packages/katex_flutter !

When $a $ne 0, there are two solutions to $ax^2 + bx + c = 0$ and they are $$x = \frac{-b \pm \sqrt{b^2-4ac}}{a}.$$

Answer 1

The issue is here TeXViewDetails is outside the Column children.

It will be like

class MessageBubble extends StatelessWidget {
  const MessageBubble(
      {required this.content,
      required this.section,
      required this.title,
      required this.isMe});
  final String content;
  final int section;
  final String title;
  final bool isMe;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(10.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Material(
            elevation: 5.0,
            child: Card(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    leading: CircleAvatar(
                      child: Text(section.toString()),
                    ),
                    title: Text(title),
                    //subtitle: KaTeX(laTeXCode: Text(content))
                  ),
                  TeXView(
                    child: TeXViewDetails(
                      title: "sdfsdfsdsd",
                      style: const TeXViewStyle(backgroundColor: Colors.amber),
                      body: TESTX(),
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Make sure to follow installation guide on readme