How to extend adding functionality of two objects in Dart? - flutter

Question

I am using as a Latex renderer in my flutter project. I want to add a latex value to an existing Catex object. I have a List of Strings which hold latex values and a listview to display them in order. I want to add a list item to the Catex every time an OnTap method is called.
so far, + operator is not supported
The operator '+' isn't defined for the type 'CaTeX'.
CaTeX catex = r'\mu =: \sqrt{x}' as CaTeX;
int value = 0;
...
List<String> get data => [
r'\mu =: \sqrt{x}',
r'\eta = 7^\frac{4}{2}',
r'\epsilon = \frac 2 {3 + 2}',
r'x_{initial} = \frac {20x} {\frac{15}{3}}',
// ignore: no_adjacent_strings_in_list
r'\colorbox{red}{bunt} \boxed{ '
r'\rm{\sf{\bf{'
r'\textcolor{red} s \textcolor{pink} i \textcolor{purple}m '
r'\textcolor{blue}p \textcolor{cyan} l \textcolor{teal} e} '
r'\textcolor{lime}c \textcolor{yellow}l \textcolor{amber} u '
r'\textcolor{orange} b}}}',
r'\TeX',
r'\LaTeX',
r'\KaTeX',
r'\CaTeX',
'x_i=a^n',
r'\hat{y} = H y',
r'12^{\frac{\frac{2}{7}}{1}}',
r'\varepsilon = \frac{\frac{2}{1}}{3}',
r'\alpha\beta\gamma\delta',
// ignore: no_adjacent_strings_in_list
r'\colorbox{black}{\textcolor{white} {black} } \colorbox{white} '
r'{\textcolor{black} {white} }',
r'\alpha\ \beta\ \ \gamma\ \ \ \delta',
r'\epsilon = \frac{2}{3 + 2}',
r'\tt {type} \textcolor{teal}{\rm{\tt {writer} }}',
'l = a * t * e * x',
r'\rm\tt{sp a c i n\ \bf\it g}',
r'5 = 1 \cdot 5',
'{2 + 3}+{3 +4 }=12',
r'\backslash \leftarrow \uparrow \rightarrow \$',
r'42\uparrow 99\Uparrow\ \ 19\downarrow 1\Downarrow',
'5x = 25',
r'10\cdot10 = 100',
'a := 96',
];
...
changeListItems(int val) {
setState(() {
this.value = val;
if (this.value != 0) {
catex += data[this.value];
}
});
}
...
body: ListView.builder(
itemCount: this.value,
itemBuilder: (context, index) {
return Column(children: [catex]);
}),
...
onTap: (int index) {
index == 0
? this.value = this.value - 1
: this.value = this.value + 1;
changeListItems(this.value);
}

Answer 1

You can override the + operator for the Catex class with an extension:
extension Sum on Catex{
Catex operator +(Catex other) {
return Catex(this.input + other.input);
}
}
This is not very reliable since it depends on the input property of the Catex Package. Also, you are storing a constant Widget in your class which is also not recommended.
Widgets are meant to be created during the Build process so the Flutter framework can work on it properly.
The correct way to do it would be to have in your state a String which contains the input that will be passed to the Catex:
String catexInput = r'\mu =: \sqrt{x}';
[...]
catexInput += data[this.value];
[...]
return Catex(catexInput);
Edit:
If you want to have a Column with multiple Catex Widgets, you can do the same thing except that your state will need to contain a list of Strings:
List<String> catexInputs = [r'\mu =: \sqrt{x}'];
[...]
catexInput.add(data[this.value]);
[...]
return Column(children: [for (String input in catexInput) Catex(input)]);;