Flutter_tex occasional rendering

Question

I'm trying to create elevated buttons that have equations on them. Here's the stripped down code that I have thus far:

child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              const Padding(padding: EdgeInsets.all(10)),
              Flexible(
                fit: FlexFit.tight,
                flex: 10,
                child: ElevatedButton(
                  style: getOptionButtonStyle(0),
                  onPressed: () =>
                      {debugPrint("${context.size}"), updateSelection(1)},
                  child: TeXView(
                    renderingEngine: TeXViewRenderingEngine.katex(),
                    child: TeXViewDocument(
                      r"""$$0$$""",
                      style: TeXViewStyle(
                          textAlign: TeXViewTextAlign.center,
                          fontStyle: TeXViewFontStyle(
                              fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
                        ),
                    ),
                  ),
                ),
              ),
              const Padding(padding: EdgeInsets.all(10)),
              Flexible(
                fit: FlexFit.tight,
                flex: 10,
                child: ElevatedButton(
                  style: getOptionButtonStyle(1),
                  onPressed: () =>
                      {debugPrint("${context.size}"), updateSelection(3)},
                  child: TeXView(
                    renderingEngine: TeXViewRenderingEngine.katex(),
                    child: TeXViewDocument(r"""$$1$$""",
                      style: TeXViewStyle(
                          textAlign: TeXViewTextAlign.center,
                          fontStyle: TeXViewFontStyle(
                              fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
                          ),
                    ),
                  ),
                ),
              ),
              const Padding(padding: EdgeInsets.all(10)),
            ],
          ),

Unfortunately, this only displays the second button properly, the first has some squiggles that are almost invisible on the right:

I've tried changing the rendering engine to mathjax, added and removed padding and margins in the style, but no luck.

Any idea what is going on, and how to fix it?

Thanks!

Update: it turns out that this behaviour is when I run it on chrome (web). Running on my phone renders perfectly! So: what settings could be affecting this?

Answer 1

1. Prefrable and less complex => By Using GetX Package
2. 1st method

Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: Get.width,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                    width: Get.width*0.45,
                    height: 50,
                    child: ElevatedButton(onPressed: () {}, child: Text("1"))),
                Container(
                  height: 50,
                    width: Get.width*0.45,
                    child: ElevatedButton(onPressed: () {}, child: Text("2"))),
              ],
            ),
          ),
        ));

=> By using Media Query

3. second method

class Test1 extends StatelessWidget {
  var size,height,width;



  Test1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;
    height = size.height;
    width = size.width;
    return Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: width,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                      width: width*0.45,
                      height: 50,
                      child: ElevatedButton(onPressed: () {}, child: Text("1"))),
                  Container(
                    height: 50,
                      width: width*0.45,
                      child: ElevatedButton(onPressed: () {}, child: Text("2"))),
                ],
              ),
            ),
          ),
        ));
  }
}