not stupid, very smart and pragmatic. you have a high quality math engine with a few lines of code that will last forever and continue improving and evolving until the end of time
Building on this. Imagine having snippets of business logic that you can use inside your app and update instantly through a web service. Can't really think of a valid use case but it's possible.. 😁
@@andreiIupsa Building the app (AAB/APK) with shorebird can help you do that with pure Flutter as-well (the push updates directly part). Super easy too. You do your edits normally, change any codes you have, and with a single line from the terminal the app is updated on user's device next time they open it without requiring them to install any updates through any store. But it does have some limitations. For example Adding new resources Always requires sending new App package (AAB/APK), can't send those through patches. And also costs abit for large users-base apps. For smaller userbase (maybe a company's private own app) super useful and won't cost a dime.
You had a problem and you solved it in a manner that allows you to keep making progress. I count this as a victory. I'm fairly new to Flutter and had no idea you could do this. Thanks for sharing!
Man this is how you are supposed to tell about your journey of the framework. Every tech has their ups and downs and how you are supposed to tackle the downs in a tech is what is needed. Rather than just complaining about it. Seriously, I loved your video and your way of delivery.
I recommend you do the evaluation on a diff tread using the compute or isolate function in dart, that will increase performance and reduce jank when evaluating large expressions
This is good for your app but shows a massive problem for the Dart ecosystem (and many others): If people look over the fence too much, no development in Dart would be made and we would all go to JS. I am also not a fan of creating another entire runtime when the app starts. I am mainly against just using other languages like that because I ported 2 giant decompilers from Python to Dart and I want other people to suffer with me. This looks like a fun project for my next vacation though!
To initialise this ones on start-up I'll prefer to do this instead class Math { static JavascriptRuntime? _instance; static void initialize() async => _instance ??= await _initialize(); static Future _initialize() async { final library = await rootBundle.loadString("res/libraries/math.js"); final runtime = getJavascriptRuntime(); await runtime.evaluateAsync(library); return runtime; } static Future evaluate(String text) async { final result = await _instance?.evaluateAsync("math.evaluate('$text')"); return result?.rawResult; } } This means you don't need to call evaluate for any reason again unless required because "Math.evaluate("1+1");" becomes "Math.initialize();" and you’ll have your JS Runtime initialised before your user needs it.
@@andreiIupsa you're wrapping your evaluation inside the hard-coded "math.evaluate(...)" so I think you're good to go. Doesn't matter now if you let the user input whatever shenanigans they want to as they are restricted by the function.
@@andreiIupsa I can't stand bright theme but I understand some people prefer it, and since it SUPER easy to make dark + bright theme and switch between theme in flutter, I do this all the time :) Since you use riverpod, just define all your theme data in providers. How I do: - themeProvider -> returns a theme data, then other providers returning part of the theme. For the colorScheme: final colorSchemeProvider = Provider((ref) { final brightness = ref.watch(brightnessProvider); final colorSchemeSeed = ref.watch(colorSchemeSeedProvider); return ColorScheme.fromSeed( seedColor: colorSchemeSeed, primary: colorSchemeSeed, brightness: brightness, ).copyWith( surfaceTint: Colors.transparent, ); }); The brightness provider is super simple: final brightnessProvider = StateProvider((ref) => Brightness.light); Then from anywhere in the app, you can use the brightnessProvider to swtich between dark and bright. Of course, you have to use the colorSchemeProvider inside you theme provider to set the colorScheme for this to work
This is quite pragmatic and smart🙌 Another language that you could try out would possible be rust, there is a crate called meval which should do the same and with the flutter rust bridge you should be able to easily run it on all platforms quite performantly :) But if it works in JS, that‘s the important thing that matters.
I like the solution, I love flutter, I develop applications using flutter on daily basis and I can't go back, No matter what I try, I just want to stick to flutter.
This is quite a nice solution. I never used the flutter_js lib... I think it is hilarious that it doesn't work on web. Code wise: You could separate the initial loading and the evaluation, and put the inital loading in a Isolate, might improve the loading time. LMK if you need an example. Cheers.
Hmm.. I'm a geek when it comes to cameras and photography so this won't be a short answer. First, lighting is important. I have a single Elgato Key Light set to 100% 5500k right in front of me. I use a Sony A7IV camera, a 16-35 F2.8 GM lens with a Nisi True Color 1-5 stops variable ND. I film in 4k 30p 4:2:2 10-bit S-Log XAVC-S 1/60. Camera WB is set to manual 5500k. I overexpose the log footage with 1 stop and I don't use in camera sharpening. I use the Phantom Luts Eastman lut and I add some sharpening in post. For audio I switched from the Shure SM7B to the Sennheiser MKE 400. 😁
JS interop is only needed for flutter web and not mobile or desktop. But to answer ur question, react native uses js so why do you need a js interop package. just install the package an use it. There is no better choice here, if it works it works except in RN it would have been more straight forward.
not stupid, very smart and pragmatic. you have a high quality math engine with a few lines of code that will last forever and continue improving and evolving until the end of time
Building on this. Imagine having snippets of business logic that you can use inside your app and update instantly through a web service. Can't really think of a valid use case but it's possible.. 😁
@@andreiIupsa
Building the app (AAB/APK) with shorebird can help you do that with pure Flutter as-well (the push updates directly part). Super easy too.
You do your edits normally, change any codes you have, and with a single line from the terminal the app is updated on user's device next time they open it without requiring them to install any updates through any store.
But it does have some limitations. For example Adding new resources Always requires sending new App package (AAB/APK), can't send those through patches. And also costs abit for large users-base apps. For smaller userbase (maybe a company's private own app) super useful and won't cost a dime.
You had a problem and you solved it in a manner that allows you to keep making progress. I count this as a victory.
I'm fairly new to Flutter and had no idea you could do this. Thanks for sharing!
Man this is how you are supposed to tell about your journey of the framework. Every tech has their ups and downs and how you are supposed to tackle the downs in a tech is what is needed. Rather than just complaining about it. Seriously, I loved your video and your way of delivery.
Thank you!
This is really smart to think about. I have never used a JS package in flutter. This unlocks a lot of possibilities
Think about having snippets of code that you can change on the fly in your app. Can't think of a specific use case, but it's possible!
@@andreiIupsasome apps do that for website parsers so that they can update it quickly if it breaks
I recommend you do the evaluation on a diff tread using the compute or isolate function in dart, that will increase performance and reduce jank when evaluating large expressions
This is good for your app but shows a massive problem for the Dart ecosystem (and many others): If people look over the fence too much, no development in Dart would be made and we would all go to JS. I am also not a fan of creating another entire runtime when the app starts. I am mainly against just using other languages like that because I ported 2 giant decompilers from Python to Dart and I want other people to suffer with me. This looks like a fun project for my next vacation though!
To initialise this ones on start-up I'll prefer to do this instead
class Math {
static JavascriptRuntime? _instance;
static void initialize() async => _instance ??= await _initialize();
static Future _initialize() async {
final library = await rootBundle.loadString("res/libraries/math.js");
final runtime = getJavascriptRuntime();
await runtime.evaluateAsync(library);
return runtime;
}
static Future evaluate(String text) async {
final result = await _instance?.evaluateAsync("math.evaluate('$text')");
return result?.rawResult;
}
}
This means you don't need to call evaluate for any reason again unless required because "Math.evaluate("1+1");" becomes "Math.initialize();" and you’ll have your JS Runtime initialised before your user needs it.
kids are going to run xss on your app bro if you put the input directly into evaluate()
Good point! Gotta do some sanitization first.
Edit: On second tought.. can they?
@@andreiIupsa you're wrapping your evaluation inside the hard-coded "math.evaluate(...)" so I think you're good to go. Doesn't matter now if you let the user input whatever shenanigans they want to as they are restricted by the function.
@AshishBeck what about );console.log(1
@@user-lj4lo7cx7m how will you get outside of the enclosing paranthesis (...) but?
@@user-lj4lo7cx7m you cannot escape the paranthesis around math.evaluate() though, right?
Bro, please use a dark theme because the eye is important.
Can't stand it, unfortunately..
@@andreiIupsa I can't stand bright theme but I understand some people prefer it, and since it SUPER easy to make dark + bright theme and switch between theme in flutter, I do this all the time :)
Since you use riverpod, just define all your theme data in providers.
How I do:
- themeProvider -> returns a theme data, then other providers returning part of the theme.
For the colorScheme:
final colorSchemeProvider = Provider((ref) {
final brightness = ref.watch(brightnessProvider);
final colorSchemeSeed = ref.watch(colorSchemeSeedProvider);
return ColorScheme.fromSeed(
seedColor: colorSchemeSeed,
primary: colorSchemeSeed,
brightness: brightness,
).copyWith(
surfaceTint: Colors.transparent,
);
});
The brightness provider is super simple:
final brightnessProvider = StateProvider((ref) => Brightness.light);
Then from anywhere in the app, you can use the brightnessProvider to swtich between dark and bright.
Of course, you have to use the colorSchemeProvider inside you theme provider to set the colorScheme for this to work
@@andreiIupsa Use it only when recording.
Does white theme hurt the eyes?
@@mikopiko yeah for me
This is quite pragmatic and smart🙌
Another language that you could try out would possible be rust, there is a crate called meval which should do the same and with the flutter rust bridge you should be able to easily run it on all platforms quite performantly :)
But if it works in JS, that‘s the important thing that matters.
I like the solution, I love flutter, I develop applications using flutter on daily basis and I can't go back, No matter what I try, I just want to stick to flutter.
Hi! could I ask you why you did choose Flutter instead of KMP though you already were using Android native? :)
because Flutter views more than KMP I think 😁
Since you're already using FFI for running other languages in Flutter, why did you choose JS? why not Python for example
Wait, do u mean that we can use libraries from different languages in flutter and it will just work???
@@s.bamahfoodhwondering the same.
Yeah you can say that, it's called FFI (Foreign Function Interface), it supports multiple languages even C
Every language that has a C interop will work. I've seen some libraries using rust as well
awesome work. for me getting the job done is worth more than the approach you take. Kudos!
Nice, can't wait until you try large TS packages that are sdks lmao.
This is quite a nice solution. I never used the flutter_js lib... I think it is hilarious that it doesn't work on web.
Code wise: You could separate the initial loading and the evaluation, and put the inital loading in a Isolate, might improve the loading time. LMK if you need an example.
Cheers.
I tried to run everything inside Isolate.run() but for some reason the JS execution fails there. Will look into it when I have the time.
@@andreiIupsa Interesting... Only the loading? or the evaluation also?
If you had a working java library I think you could try to run that via Dart FFI and JNIGen. At least it's worth prototyping I think.
can u make a video how to extract images from pdf file in flutter ?
I don't know how to feel about this, but cool stuff :D
5:11 any specific reason why you didn't just stick to a function and had to wrap it in a class?
Can you show me how to parse json with worker in flutter web?
Messi teaching Flutter now? Nice.
Amazing... I'll be trying this out
Codict app uses this library
This is a great video and a very smart approach to solving your problem. I would like to know how you record and edit your videos. They look great.
Hmm.. I'm a geek when it comes to cameras and photography so this won't be a short answer.
First, lighting is important. I have a single Elgato Key Light set to 100% 5500k right in front of me.
I use a Sony A7IV camera, a 16-35 F2.8 GM lens with a Nisi True Color 1-5 stops variable ND.
I film in 4k 30p 4:2:2 10-bit S-Log XAVC-S 1/60. Camera WB is set to manual 5500k.
I overexpose the log footage with 1 stop and I don't use in camera sharpening.
I use the Phantom Luts Eastman lut and I add some sharpening in post.
For audio I switched from the Shure SM7B to the Sennheiser MKE 400.
😁
@@andreiIupsa lol. I still have many things to learn. Thanks for ur answer
Thanks, I have some ideas for this 👌
very informative
Thats really cool
Thank you for your sharing, love your videos and inspire me alot. Keep up the good work!!🧡🧡
from where did you learn to use riverpod?
The getting started documentation they provide is all you need.
You made my day, letting me know what is possible with flutter! thank you so much Andrei .
I have subbed your channel!
being creative is essential for programming, nicely done. the end of the video is really cool as well.
Nice
lazy
Can you translate a Js or Java library to dart with ChatGPT ?
good
can you open source it so that we can learn and contribute to it
Nice format, nice editing, nice app
Thank you 😃
+1, stole my comment :)
This is amazing, genius. By any chance is it possible to render math equation like calculus natively without using webview?
The runtime runs natively and doesn't use a webview, as far as I know.
@@andreiIupsa Do you need to render complex LaTeX formatted equations?
would react native be a better choice here? for easier js interop?
JS interop is only needed for flutter web and not mobile or desktop. But to answer ur question, react native uses js so why do you need a js interop package. just install the package an use it. There is no better choice here, if it works it works except in RN it would have been more straight forward.
All you need is React Native
most underated ending ever
Chickens! 😁
I mean, you could have put those advanced calculations into a backend and only let paid members to access it.