Most of the time when I try to compile a custom widget I get a "blank" error box:
And then a project issue which doesn't make much sense because the name of my widget actually does match the name provided in the code editor:
The package I'm using is flutter_tex, and I'm generally just trying to render math equations in my app.
Here are the pubspec dependencies:
I've tried creating a simple widget with multiple packages from pub.dev, including flutter_math_fork, flutter_tex, and gpt_markdown. I've rewritten the widget multiple times trying to use different packages, but I was only able to ever get flutter_math_fork to work in a very limited capacity. Here's the code for the most recent custom widget attempt:
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/backend/schema/structs/index.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:flutter_tex/flutter_tex.dart'; // Import flutter_tex
class MathRenderer extends StatefulWidget {
const MathRenderer({
Key? key,
required this.mathContent,
this.width,
this.height,
this.textSize = 16, // Default text size
}) : super(key: key);
final String mathContent; // The math content (LaTeX string)
final double? width; // Optional width
final double? height; // Optional height
final int textSize; // Text size for the rendered math content
@override
State<MathRenderer> createState() => _MathRendererState();
}
class _MathRendererState extends State<MathRenderer> {
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: TeXView(
child: TeXViewDocument(
widget.mathContent, // Render the LaTeX string
),
style: TeXViewStyle(
contentColor: Colors.black, // Text color
backgroundColor: Colors.white, // Background color
textAlign: TeXViewTextAlign.center, // Align text to the center
fontStyle: TeXViewFontStyle(
fontSize: widget.textSize, // Use the textSize property
),
borderRadius: TeXViewBorderRadius.all(10), // Rounded corners
margin: TeXViewMargin.all(10), // Margin around the widget
padding: TeXViewPadding.all(10), // Padding inside the widget
),
),
);
}
}Full disclosure: I'm a teacher and have done a little front-end development, but I'm not a developer, so I'm relying on LLMs to generate the first draft of these widgets, and then tweaking as I know how.