How to properly implement math equations (TeX) in Flutter - flutter

I tried to implement math equations in flutter application using the flutter TeX package. It takes much time to render the equation.
It doesn't look so nice as I wanted to be. Are there any other implementations to effectively use math chemistry and other complex format equations without compromising the design.
here's my code:
import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget{
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey,
body:TeXView(
teXHTML: r"""
<style>#myDiv
{color: "#CC0000",}</style>
<div id='myDiv'>$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</div>
""" ,
renderingEngine: RenderingEngine.Katex, // Katex for fast render and MathJax for quality render.
onRenderFinished: (height) {
print("Widget Height is : $height");
},
onPageFinished: (string) {
print("Page Loading finished");
},
)
);
}}
Here's the output: [screenshot][1]

There is now also the catex package (full disclosure: I am an author).
CaTeX does not need web views, which is why you can render your equations extremely fast (basically as fast as any other widget).
Note: it is currently in pre-release, which means that a lot of functionality is still unsupported.
import 'package:catex/catex.dart';
Widget build(BuildContext context) => CaTeX(r'x = {-b \pm \frac{\sqrt{b^2-4ac}} {2a}}');

Just take a look at the latest version of flutter_tex:^3.5.0+2, styling feature has been added, now you can style each and everything very easily. There are some API changes in this version so please be careful before upgrading and do check the example before proceeding.
As for rendering speed is concerned you should change rendering engine from Mathjax to Katex which is much faster than Mathjax. e.g. renderingEngine:RenderingEngine.Katex

Related

WebView on Flutter Web Not working with external library

currently I am developing an app using Flutter Web and I've been trying to use this library which does not have a lot of documentation.
I've tried the example provided but for some reason it's not working
In the example there is no onLoaded() {} function method and without that I get an error saying that I have to implement it.
Finally, if I want to set the width and height of the website I should call setState(). How do I do that?
Link to the library https://pub.dev/packages/easy_web_view2
Code: (I'm running main() in another file)
import 'package:flutter/material.dart';
import 'package:easy_web_view2/easy_web_view2.dart';
class Quiz extends StatelessWidget {
const Quiz({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('CyberQuiz'),
),
body: EasyWebView(
src: 'https://www.ncsc.gov.uk/',
onLoaded: () {
print('Loaded!!');
},
),
);
}
}
A bit of an unobvious issue. I was trying to embed a government website. Apparently you are not allowed to do that.
I am also using a different library which is called webviewx. It has better documentation than the other one

How to use drawBox, drawEllipse or drawLine methods within the Dart / Flutter pdf library

I want to generate PDF files including self drawn graphics within a Flutter App. Of course with the pdf library provided it is quite simple to show a pdf preview containing for example two text lines, but i want to be able to insert some graphics that i want to draw myself, as i need to draw (myself)some very unconventional graphs. In order to do that i need to be able to draw within a pdf widget (some lines, curves, points, of several colors, etc...). As per now i didn't manage to even draw a point !!!, the pdf library of flutter dart describes dozens of methods, but doesn't show any example, that's a pitty in fact. Is there somebody who could help me in order to "draw" graphics within PDF Dart Flutter Object. The PdfLibrary includes PdfGraphics class that is supposed to have the methods i try tu use without success !!
Many thank's in advance
Please find my code :
import 'package:pdf/pdf.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:printing/printing.dart';
void main() => runApp(const MyApp('Ceci est mon premier PDF'));
class MyApp extends StatelessWidget {
const MyApp(this.title);
final String title;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text(title)),
body: PdfPreview(
build: (format) => _generatePdf(format, title),
),
),
);
}
Future<Uint8List> _generatePdf(PdfPageFormat format, String title) async {
final pdf = pw.Document();
pdf.addPage(
pw.Page(
pageFormat: format,
build: (context) {
return pw.Center(
child: pw.Column (
children: [
pw.Text(title),
pw.Text(title),
//pw.drawBox(10,10,100,100), <---- if i remove the comment the app
crashes saying "Method not found"
otherwise i have a PDF generated with two
lines of text, and i want that just under a
self drawn graphic could be displayed
],
),
);//pw.Text(title),
},
),
);
return pdf.save();
}
}
You have to use the CustomPaint class instead of just drawing directly.
Try
pw.CustomPaint(
size: const PdfPoint(110, 110),
painter: (PdfGraphics canvas, PdfPoint size) {
canvas
..setColor(PdfColors.indigo)
..drawRect(10, 10, 100, 100)
..fillPath();
},
);
instead of
pw.drawBox(10,10,100,100)
Check out the list of drawable shapes here: https://pub.dev/documentation/pdf/latest/pdf/PdfGraphics-class.html
For those looking for more information
(pdf's) CustomPaint expects a child and one or two painter functions. Unlike Flutter's CustomPaint
this uses a PdfGraphics instead of a Canvas
the painting functions are functions not CustomPainters
I struggled for days to figure this out and found my answer on this comment: https://github.com/DavBfr/dart_pdf/issues/145#issuecomment-530798498

Extracting Class Members like Widget Builders to a Different File?

In developing some of the screens for my flutter app, I regularly need to dynamically render widgets based on the state of the screen. For circumstances where it makes sense to create a separate widget and include it, I do that.
However, there are many use cases where what I need to render is not fit for a widget, and leverages existing state from the page. Therefore I use builder methods to render the appropriate widgets to the page. As anyone who uses Flutter knows, that can lead to lengthy code where you need to scroll up/down a lot to get to what you need to work on.
For better maintainability, I would love to move those builder methods into separate files, and then just include them. This would make it much easier to work on specific code widgets rendered and make the screen widget much cleaner.
But I haven't found a proper way to extract that dynamic widget code, which makes use of state, calls to update state, etc. I'm looking for a type of "include" file that would insert code into the main screen and render as if it's part of the core code.
Is this possible? How to achieve?
With the introduction of extension members, I came across this really neat way of achieving exactly what your described!
Say you have a State class defined like this:
class MyWidgetState extends State<MyWidget> {
int cakes;
#override
void initState() {
super.initState();
cakes = 0;
}
#override
Widget build(BuildContext context) {
return Builder(
builder: (context) => Text('$cakes'),
);
}
}
As you can see, there is a local variable cakes and a builder function. The very neat way to extract this builder now is the following:
extension CakesBuilderExtension on MyWidgetState {
Widget cakesBuilder(BuildContext context) {
return Text('$cakes');
}
}
Now, the cakes member can be accessed from the extension even if the extension is placed in another file.
Now, you would update your State class like this (the builder changed):
class MyWidgetState extends State<MyWidget> {
int cakes;
#override
void initState() {
super.initState();
cakes = 0;
}
#override
Widget build(BuildContext context) {
return Builder(
builder: cakesBuilder,
);
}
}
The cakesBuilder can be referenced from MyWidgetState, even though it is only declared in the CakesBuilderExtension!
Note
The extension feature requires Dart 2.6. This is not yet available in the stable channel, but should be around the end of 2019 I guess. Thus, you need to use the dev or master channels: flutter channel dev or flutter channel master and update the environment constraint in your pubspec.yaml file:
environment:
sdk: '>=2.6.0-dev.8.2 <3.0.0'

What is the universal range of the user defined textScaleFactor in Flutter?

After my fruitless search for the expected range of the textScaleFactor parameter I attempted to answer my q by printing...
MediaQuery.textScaleFactorOf(context);
2 times while debugging on my Note 9: The output was 0.8 & 2 when I set the font size (in my accessibility settings) # its min & max, resp..
My q is: Can I expect this to be the universal range across all devices?
If you're unsure, I would certainly accept an answer from someone posting their own test results (especially if they were to test on iphone).
On the iOS simulator and my iPhoneXS Max the default is 1.0
Even when Display View setting is Zoomed or Standard.
When I go to Accessibility and change the size to the max available size (step by step):
flutter: text scale 1.1176470588235294
flutter: text scale 1.2352941176470589
flutter: text scale 1.3529411764705883
If i check the toggle for the "Larger Accessibility Sizes", the max I get:
flutter: text scale 3.1176470588235294
Going down with the slider in Accessibility (only 3 steps available):
flutter: text scale 0.9411764705882353
flutter: text scale 0.8823529411764706
flutter: text scale 0.8235294117647058
I don't know how useful those values can be to you, but to answer your questions you SHOULD NOT expect min=0.8 & max=2 ...
In any case, if you need to constrain the factor somehow, as I don't know any way to inject them in the MediaQuery that MaterialApp uses, you should have a custom function that normalizes the MediaQuery.textScaleFactorOf(context), maybe at the root of your widget tree, and manually apply that to each Text::textScaleFactor ?
Someone already provided a satisfactory answer to the question; this is just me expanding on their closing remarks:
In any case, if you need to constrain the factor somehow, as I don't know any way to inject them in the MediaQuery that MaterialApp uses, you should have a custom function that normalizes the MediaQuery.textScaleFactorOf(context), maybe at the root of your widget tree, and manually apply that to each Text::textScaleFactor ?
I ended up using the following code to constrain textScaleFactor within 0.8-2.0; I added an extra constraint where the result will always be a multiple of 0.1:
import 'package:flutter/material.dart';
import 'dart:math';
import 'authentication-page.dart';
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
builder: (context, child) {
onLayout(context);
return MediaQuery(
child: child,
data: MediaQuery.of(context).copyWith(textScaleFactor: max(0.8, min(2.0, (10*MediaQuery.textScaleFactorOf(context)).round()/10))));
},
title: 'Flutter Demo',
home: AuthenticationPage(),
);
}
}

Flutter: Is it possible to auto-scale (whole) ui based on device size?

iOS native apps auto-scale the whole ui based on device size (width). Is there a similar behaviour with flutter?
I want to design a ui (with font sizes, paddings, etc) for a master device (iphone xs) and scale the whole ui to all other devices.
Wondering if that is possible as i couldn't find any information about it.
Just responsive sizing that needs me to configure breakpoints etc.
I usually obtain device size on Widget build, and then use a fraction of the width and height for each widget: Something like this:
import 'package:flutter/material.dart';
Size deviceSize;
class Welcome extends StatefulWidget {
WelcomeState createState() => WelcomeState();
}
class WelcomeState extends State<Welcome> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
deviceSize = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: color3,
body: Container(
height:deviceSize.height*0.5,
width:deviceSize.width-50.0,
child: Text("Welcome"),
),
);
}
}
Yes, this indeed is possible. All you need is a ratio-scaling approach with which you scale your entire GUI. Check out this ratio-scaling solution given to another SO answer relating to the Flutter UI scaling issue.
It's better to use MediaQuery.of(context).size, because while using external package, you won't be able to maintain the size of widgets on orientation change which might be a big downfall if your application required orientation change for better visual effects:
Widget build(BuildContext context) {
AppBar appBar = AppBar(title: const Text("My Dashboard"));
height = MediaQuery.of(context).size.height -
appBar.preferredSize.height -
MediaQuery.of(context).padding.top; // for responsive adjustment
width = MediaQuery.of(context).size.width; // for responsive adjustment
debugPrint("$height, width: ${MediaQuery.of(context).size.width}");
return Scaffold(appBar: appBar, body: ResponsivePage(height,width));
}
Check out this package:
https://pub.dev/packages/scaled_app
Replace runApp with runAppScaled, the entire UI design will be scaled automatically.
Helpful when you want adapt to different screen sizes quickly