Explorer
Content
videos
flutter-adaptive-ui-and-web-assembly.md
podcast creative-engineering flutter-adaptive-ui-and-web-assembly.md

Flutter Adaptive UI and Web Assembly

Description

BigScreen: https://www.oculus.com/experiences/quest/2497738113633933/ Github free for teams: https://github.blog/2020-04-14-github-is-now-free-for-teams/ Codepen for Flutter: https://codepen.io/flutter Flutter internals talk: https://www.youtube.com/watch?v=PnWxW21vDak The Rust book: https://doc.rust-lang.org/book/

Norbert Kozsir - @norbertkozsir

https://twitter.com/norbertkozsir

https://github.com/norbert515

Rody Davis - @rodydavis

https://twitter.com/rodydavis

https://github.com/rodydavis

https://youtube.com/rodydavis

https://rodydavis.com

Our podcast player:

https://rodydavis.github.io/creative_engineering/

Follow on Twitter:

https://twitter.com/CreativeEngShow

Transcript

0:00 · welcome to creative engineering this is our second podcast with me I have my co-host Norbert how have you been during the quarantine great actually it’s been a uh pretty productive week um have been doing good progress on all my projects how’s it been for you doing pretty good you know just putting out that quarantine content making videos and it’s uh pretty crazy I’m excited to go outside again whenever that will be so sometime yeah all right so we have some

0:27 · uh followup items um first of all uh did you know that a GitHub is free for teams yes um I heard about it what exactly does it mean well as far as I can tell the all of the core GitHub features are now free for everyone which is super cool because um I know that at least for me I have some private repos that you you have in the past only been limited I believe like maybe three people or two people as collaborators so now no matter

0:55 · what you can you know have as many people join which is super cool um as as well as you know creating organizations and have as many unlimited uh private repositories question is uh if everybody starts on this will it be free afterwards and I’m guessing not but we’ll see oh yeah it’s super interesting like what happened since Microsoft quiet GitHub everybody thought it’s going to go down and everybody was ready to switch to GitHub and now GitHub is like the thing yeah it’s uh but it’s also

1:26 · been really good too I I mean I was paying for GitHub Pro subscription too and even cancelled it when they made it free but then I went back to paying for it because you know not only do I get to support things but I realize that if you’re on the Pro Plan you get like the beta features which is super cool so that’s what I’ve been using it for so we have another thing on our followup um some just quick VR updates uh I watched last night the Top Gun movie in 3D in

1:55 · big screen and I got to say that was one of the coolest things that I’ve watched a while I don’t know how they did it but they they were able to take like an 80s movie and remaster it for 3D and it was super cool and what was neat about the big screen uh Cinema experience is the movie was like $5 here in the US and it was in a retro theater it was so cool so

2:19 · you were sitting in a VR Fredy Cinema watching an actual Fredy movie yeah yeah it was it was pretty incredible and then uh yesterday they also it’s going on today as well but um they are doing some live a live music festival which is super cool hosted by live X live and that was really neat um of course you know it just depends on like taste and music and they didn’t really pick a theme it’s like they went from a rapper to a really R&B and kind of like jazz

2:50 · band to then a DJ like all just back to back to back and so there’s like it’s just all these different artists but it’s super cool new artists that I haven’t even heard before but but now follow them on Spotify which is cool it’s nice how many people were there yeah there was uh when I first joined there was over50 people just in the one room I was in in one place like in one virtual wow that’s crazy yeah and it was

3:15 · pretty cool it was funny one of the hosts uh you could you they were both in quarantine but one of the hosts on her webcam you could tell she had bad internet cuz like the guy on the right is like crystal clear and then she is like all broken up it’s so funny it was awesome yeah and then last I just wanted to talk about the new fit bait song that came out and um have you seen any videos about it yet yes like I’ve actually seen your video about it yeah it is it is incredible I I’m

3:44 · still sore from playing it it is I I hope they make a whole music pack on it because this is the kind of stuff that I use VR for is to work out and to to really get your heart rate up and man it is it’ll wipe you out oh yeah I’m super jealous I um not yet able to try it out because I don’t have my V VR headset with me right now yes but yeah definitely first thing when I have access to it uh I’ll try that so Cod pin supports flutter that’s that was a surprise um super interesting

4:18 · um like as far as I um understood we already have Dart Pad but codepad adds this social layer onto all of that being able to Fork our people’s uh Flor creations and just sharing all that stuff mhm have you used codepen before I feel like I’ve seen it in blog post but personally I haven’t really used it um I’ve used it for like experimenting with it for a bit one thing which uh code pen

4:47 · or Dart pad um could actually be pretty useful in the near future is when you’re doing a workshop or something like that and people don’t have Flor installed or don’t have all that stuff there um just being able to open up a website and doing all of this would be great but the problem right now is it doesn’t support packages as far as I know um it only has the built in ones um which is Prett limiting if you want to use something like provider or or things you might be

5:13 · using well you mean you can always just copy the entirety of provider and put it in the single file that sounds crazy I like it yeah speaking of which I um so in my flutter editor last week I have built a kind of a lexer like a parser for Dart files um and it has triggered

5:36 · this crazy idea of well what if I take an existing flutter project and have if you just have pure widgets meaning you don’t have any packages um what if you just have a one-click export to dartpad where it takes all of your classes and exports them to a single file and then then you just have and it you know organizes all your Imports at the top and then you have your main file so it’s something I’ve been experimenting with and so far um making good progress so we’ll see um so we can also talk about

6:03 · why code pin doesn’t support packages and that is because the dart Services API is what dartpad and cod pin are built on top of are you familiar with that um I haven’t can you uh tell a bit more about it yeah so um even my flutter editor uses this uh Dart Services API what it is is a rest API to um your code

6:27 · so when you don’t have the flutter or Dart s K installed you can still use a rest API to pass in your code and then you get like a list of you know fix options or an um analyzer options you can even do um pass in an office offset

6:42 · and be like okay what are the autoc completion results for this one area or what are the fixes that I can apply and you can format your code and one thing I love it for is you can use the DDC compiler so you can actually compile for flutter web or you can compile the release version but that one takes a lot longer CU it uses the dart to JS um and

7:03 · I even created like a simple example that you can now in my flutter editor one click button it compiles your code and opens up a new window with your actual compile code that you can edit and do whatever with so I just I’ve been super fascinated with this API and the

7:20 · just the flexibility that it gives you for you know introducing these kind of dynamic widgets and having if you wanted to not saying you should but you could have a web view that you pass in a serers side rendered Dart file compile that and then show the rendered file in your app interesting interesting yeah okay

7:42 · wow yeah talking about uh Door pad for and web and all those things um do you have some sort of best practices for building apps uis for all those different platforms because just building a mobile app is one thing but having code which works on all platforms without having a big mess is isn’t that easy yeah uh for sure um so I wanted to talk about

8:07 · you know this thing that I’m calling adaptive UI um what that means really is that we build these applications like you said that have to run on different platforms where you know in one mode they’re running on mobile another mode they’re running on tablet and another desktop and if we’re not careful we’re building this UI in such a way where you

8:28 · know it’ll you know it’ll look fine on mobile and then we go to desktop and it just looks like an iPad version or if you go to the desktop and you come down to a website then it’s like oh now it just looks like a desktop app it doesn’t look like a web app um so we have to be

8:43 · you know very cognizant of when we’re building these applications to make sure that it’s not just the screen size we’re targeting you know it’s not just okay if we’re past 720 we’re on a tablet if we’re on 480 we’re on a mobile because breakpoints are not everything um what what have you done in the past to make sure that you your apps are responsive you know on different layouts like have you built an app yet that goes to mobile and desktop yes definitely like most of

9:12 · um my apps nowadays um are built in some sort of responsive way because I use desktop heavily and mobile um so different things like first off sometimes you just have two very different layouts like for desktop you might have some sort of sidebar or something on mobile you might have that on the on the view um there I just have

9:33 · two build methods or two different functions widgets which just have uh different um layouts but still use the same components like all they do is instead of using a column maybe they might be using a row also for me um just using constraint box a lot like setting the max width and stuff like that so one

9:52 · thing that’s uh looks very um weird in my opinion is when the button stretches um across all the surface like on mobile it’s fine if the button is uh um the full width because it’s not that big but on desktop or web it looks rather weird if you have a button which is bigger than whatever yeah exactly or or for

10:13 · example like when you show a snack bar and you’re on desktop and it shows the entire bottom width of the the bottom yeah it’s um you know but it’s one of those things that you know it’s amazing how many components that footer gives you but if we’re not careful you know just because using the stock components doesn’t mean you get an Adaptive UI out of the box so you definitely have to be aware of how to build it what are you usually using or what are you usually doing to uh solve this problem so for me

10:41 · I I have a builder pattern uh similar to you but I use a layout builder at my top uh of my build method wherever it’s like you know the the parent that then defines the child size so I I looked in the constraint box but that that’s more like on the individual screen and widget level this is more like kind of on the layout level yes what I do usually is so

11:03 · there’s the two approaches you can take you can do the naive approach of just like returning the tablet version and then the mobile version which is pretty bad in my opinion because then you get like a lot of duplicate UI code but the thing that I do is I create an Adaptive list for example like a master detailed um if you’re coming from IOS is like the master detail controller and then what

11:24 · you’re doing is you’re just passing that selection up the tree to when you click on an item in the list you’re just not doing an action immediately you then send it up to where the widget’s being used and then you take an action so on a tablet it’ll just update a selection and on mobile it’ll navigate to the new screen what’s cool about this is you don’t have to have two separate list views you don’t have to have your tablet list View and your desktop list View and your mobile list view interes but then it also um gives you the flexibility that you can use this widget wherever you want so if I wanted to embed it in a

11:54 · search screen I could then use the same screen as a selection context so I could then push to the screen and then based on a selection I could pop back and you know do whatever I want with it yes and that also makes a sharing code much easier like I could uh imagine a package which implen a couple of uh adaptive UI components for example scaffold which has a sitebar or something else mobile I

12:19 · think you’ve been doing something like that on your you YouTube channel haven’t you yep sure have yeah I built a adaptive scaffold for flutter that uses the new navigation room um as well as when you’re on a mobile device it’ll use the bottom tabs so it’s it’s really nice to be able like layout with navigation is one of the first thing people start to duplicate because

12:40 · when you have these different modes you have bottom navigation bar you have navigation rail you have a drawer you have top tabs you you have so many different ways to do navigation on all these different sizes and it’s like if you’re not careful you’re going to just like duplicate all this stuff and you know if you keep it in a one context and

12:59 · you share it you know you don’t have these weird States like so think about in the previous example if you return a tablet version and a mobile version if you do something on the tablet version and then resize down to mobile you’re actually in a new state you don’t have the same state as the tablet screen so then you go back to the tablet size you’re back on your tablet State you go to your mobile size you have your mobile State you could be 300 items down on the mobile version and then 500 items down on the tablet version and they’re two separate lists interesting you also feel

13:27 · like your approach is very Flur like because it uh encourages encapsulation you don’t want to do all these different components all you want to do you actually want to have this one component which just takes care of the thing it’s supposed to take care of yep exactly um

13:44 · so speaking of that I also want to talk about platform UI because um when building for devices um I know I’m building on Mac OS but you’re building on Windows and so what kind of things do you do to make sure that the user feels at home on a Windows device uh whereas I would do something that fills at home for Apple devices first off I try to separate or not make the app look like a

14:08 · upscale mobile app like um app bars are great um but try to avoid them um in Windows versions because um most most apps don’t have the app bar with the back button and stuff um so that’s one thing I usually do and just just the

14:26 · little things like not having comp components which um benefit uh which people benefit from on the mobile version because they have limited space but instead use something which actually uses the space that is available on desktop um but yeah I still feel like there’s a lot to lot lot of work to be done um on all those components to make a web version or a desktop version truly

14:53 · feel like a desktop application do you use any fluent design that’s the windows design language do you that actually I I don’t like I don’t like that design language too much and there there aren’t too many apps on Windows who actually use that design apart from Windows itself and even Windows is not using that every application um so basically

15:17 · just just um building like I feel like the trend um from adapting to each platform to having a unique brand which works on all platforms is is becoming stronger and stronger I feel like nowadays you don’t actually want to adapt too much to each platform and have your app look completely different on each device but instead have your own language and adapt to the small nuances you have on the devices like the overscroll on iOS the um top or status

15:49 · bar mecho is how it’s how it’s called and just doing those is I feel like a better way to approach this yeah I agree the nuances is what make the difference um especially when you think about you know on iOS you want to build switches

16:05 · and Sliders and loading indicators that are this Cupertino style but then you don’t necessarily want you know list tiles or scaffold to be you don’t have to have a Cupertino scaffold uh by doing it in this way it allows you to make it feel at home but not obtrusive and you still get to stick to your brand also one thing that’s another easy win when you’re building this in an adep of way is well what about when you show an alert this is like a perfect example of um using an iOS alert style because a

16:36 · user expects a certain alert to look some a certain way or when they’re picking a date you want to show the Cupertino date picker or when they are picking a time you want to show like the timer in the bottom sheet but then on Mac OS you do Mac OS way of doing it and

16:53 · and almost always I think the first thing that you can do is don’t develop a touch in mind on desktop because there’s so many things that you do on desktop that you can’t really do on mobile and vice versa so you know you don’t want to show a bottom sheet that you can drag things around in on the bottom you don’t want to have things that you have to move around and slide on desktop but on

17:17 · mobile you do and that’s just all about building widgets that kind of adapt depending on which version they’re on and show different input methods based on that um next I want to talk about you know well how do you approach dark mode because this is something that recently has become really popular in an official way because mainly because apple and so many other platforms now give you a dark mode option on your computer or phone now where it’ll change everything um are

17:44 · you talking about actually adapting it for the platform or just the theming itself the theming um well first off just setting the brightness to dark um goes a big way um like most of the time the app actually looks pretty good and most components um at least try to um adhere to the dark

18:02 · versus bright mode specs but yeah I’m not sure like most of the time just setting it to dark goes a long way what what are you doing well I remember the first time that I had an app that I’ve been working on for a while and then wanted to support dark mode and then half my app was invisible because all my text was black so I had to had to go

18:21 · through and make my text adaptive to where you know it can adjust its color based on the theme but beyond that I have been you know there’s C like subtleties that you have to do you know where a color may be a slightly different color on the dark mode versus the light mode um you know you want to have like darker colors that aren’t as bright you don’t want to just blind the user when you go to dark mode as well as

18:45 · you know there’s there’s just other nuances but like you know elevation is different shadows appear differently but flutter for example does a really good job of providing that all for you and even now on the latest we have a theme mode option inside a material app so you can actually switch between light dark and system setting which is super cool where as before you used to have this weird logic to do it interesting I didn’t know about that like one thing um which I had um been problems with just

19:15 · today was um buttons like do you know about a way to change the text color of a button button according to the color which it is on like I I more often than not I’m actually Fighting the theme data and trying to figure out in which slot to put it stuff and embarrassingly often I just end up hard coding or not hard coding but putting the color into the actual text because I just can’t find out how to configure my app Theme

19:46 · accordingly um do you also have some issues or problems with the theming in the top level component well speaking of a solution for your problem there is a really cool helper method that the theme data uses under the hood which is called estimate color for brightness and you can pass in this option and it’ll give you whether it’s or is maybe estimate brightness for color and so then you can

20:11 · pass in a color and it’ll check to see if it needs to be a ligh or dark brightness to show the text I think this is what they use under the hood in a lot of different places but interesting yeah that that for me has been pretty helpful um so some other things that I run into when designing for theming is the first thing that I did was you know shaping

20:33 · sometimes like things look fine like a card for example looks great on light theme and then Dark theme it just looks kind of awkward like like the shadow is a little bit better like with the latest stuff they’ve added it’s so much better whereas before like it it was weird having the Dark Shadow and then it

20:50 · almost it just didn’t look out of Play It just looked out really out of place so what I usually did was on the Dark theme I would create a card theme that would just have a border outline that was like a light gray and that usually looked a lot better for me personally interesting approach yeah yep um so another thing too is our devices and our

21:11 · screens are and specifically applications are getting used in places that we don’t even realize speaking of which is you know we have passive modes now it’s crazy that our application can exist in a voice only context where we’re not even touching our device and

21:28 · um building experiences for that as well as well you you may think well I’m building a mobile application I never have to worry about that but what about when someone is disabled and they can’t see your application you still have a mobile app and you still need to support accessibility um to allow them to be able to communicate with your app in a semantic tree style to say you know with a screen reader so what what are your thoughts on that so I haven’t been doing

21:53 · digging too deep into the semantics and all that stuff but as far as I know for is actually doing a pretty good job out of the box um providing um most of the semantics tree like annotating text and doing all the layout things the lists um so as far as I know Flor out of the box does a pretty good job at um providing all of this and it should be pretty easy to enhance that like there are a few properties for example on the image

22:21 · think which uh I’m not sure what it’s called but where you describe the content and if you just pass the string describing the image the screen reader can automatically um read out the the image and say what is on there um what

22:37 · have you been doing with accessibility yeah for me I I have a Tesla app that I built and one of the ways that I wanted to give an input for users that have a hard time seeing it is I built a chat bot so working with dialog flow I was able to take all the actions that I was doing on my car and put them in a conversation setting so then you could say you know set my car AC to 30° or you

23:02 · know turn unlock the doors you know and then also turn on sensor mode and unlock the frun or whatever and what’s cool is it will take each of those commands and Trigger them in a way and feedback and you know talk back to the user uh which I think is really cool because even if you can’t like press the buttons you can still just open up a the voice button

23:25 · and just be able to communicate with the car so um other than that yeah I think flutter does a really good job with the semantic tree and um just taking advantage of that like so a simple thing that you can do to optimize for that is if your widget is like really weird then wrap it with like a tool tip or some kind of um message label for that as

23:46 · well as whenever you’re using a button or anything that takes the option tool tip or um I can’t remember what the other option is but it allows you to you know Define what that is this would be like the equivalent like on the web when you have an ALT text for someone who can’t see an image um which is really cool because you know your button instead of just being like oh this is my info button because they were using the info icon you can say exactly what that button’s doing under the hood and as a

24:15 · bonus when you’re on desktop if you hover over that button it’ll tell you what that button does um on the hover effect yes I’ve seen that before yeah um and then finally you know there’s also just uh so many wearables that we have now I know flutter doesn’t uh support Apple watch or anything yet but I think it does support Android Wear am I correct on that I think my brother actually tried to compile for um theat

24:41 · which was supposed to be possible but I’m not sure whether he was successfully able to do so but in theory it should be possible but I haven’t actually seen a FL app on the watch myself um but I’m still pretty sure it’s possible so we’ll have have to have to look at this in some future episodes definitely at least when it comes to Apple watch I’m super excited because it’s just it’s one of those things that you know you think you’re have responsive design like try

25:10 · making it go down to a 2in size or smaller and it’s like there’s so many things you have to do differently and um I’m excited for when that becomes you know a whole lot more popular so we’ve been talking about you know this this adaptive way to build your UI but how does flutter work like under the hood so Flor um does a very good job at um

25:33 · abstracting all this away like you could have a widget which we talked about before about this adaptive thing which just works on all on watches on desktops or mobiles um but internally FL is actually doing a lot of work to abstract

25:50 · um things like State Management not having to keep mutable references to objects not having to deal with stuff like you have to do on um Android where you have to actually mutate views um in order to change them just providing this uh reactive interface for a programmer to program um objects in I actually did

26:12 · a talk couple of months ago on Flor Europe about uh render objects talk was uh called Flor War widgets elements and render objects um basically um showcasing exploring how the internal um framework works um what what render objects are what elements are and how all of those work

26:34 · together yeah so I would definitely love to hear more about that maybe we can have a full episode on that but um yeah so have you have you found that you needed to go down to the render object layer to build stuff or have you been mostly able to stay at the widget level

26:49 · cuz I know sometimes I have to go down to custom painter and do something on the canvas but um how often do you actually have to go down and do it if someone’s starting with flutter do they even need to know how it works well most of the times you don’t actually have to go down like for a beginner to intermediate or like even an expert

27:08 · wouldn’t have to need uh the knowledge for render objects most of the times but sometimes I um still find myself going down there for example when um looking at weird behaviors like I remember I had this um thing um where I had a stack um

27:24 · and I painted things outside of the stack B sound um which was because I was doing some sort of weird scrolling and zooming um but the thing was those widgets which were drawn outside of the stack balance didn’t receive pointer events and that was because in the render stack it had a check if the pointer was outside its own bounds um without that check it worked perfectly so because I knew render objects I was able to go in there basically what what I did is I copied over all of the stack

27:56 · class and call it my stack and removed that if check um and I had a stack which received pointer outside and yes sometimes you you just uh have to go down there and and for for very custom or very weird behaviors it’s super interesting but also just understanding that there’s more than just widgets um that there’s render objects that you can do contacts. off find render objects and

28:22 · most of the time cast it to a render box and using that render box you can access the size and position which is super helpful if you for example want to do um um in a call back show some sort of information um which is sitting on top

28:38 · of a widget using the context and the render object you can actually locate that widget on the screen and display information accordingly there’s so much I mean we could talk about this for multiple episodes going into a different direction how is this podcast actually hosted so that’s a funny story uh when we first started started with this we were thinking you know we wanted to do this podcast give it out to the community but we wanted to see if we could build it in a way that um first of all it’s cheap because we’re first starting out but also uh in a way that

29:10 · is really engaging so right after we released the first episode I created a podcast player in flutter to host our own podcast which is pretty crazy so basically yeah basically the whole concept is we’re using a GitHub repo which then um host our podcast which is a compile flutter application to GitHub Pages which is free and we have an RSS feed which is inside of there as well as

29:37 · each of the episodes are small enough um since they’re you know rendered MP3 can be stored inside of the web folder and then when you’re doing this and you compile it out you can actually static link to each page and each podcast episode and it works great our episode

29:52 · is now on you know iTunes Google Play and Spotify and we’re not paying anything we you can always pay for custom domain later but if you want to we’ll have the links in the show notes but you can actually open up the podcast player and listen to each of our episodes this is actually running on flutter web using the latest audio players plugin to be able to allow you to play audio on the web which is super cool and you know just implements a bunch of um you know RSS parsing and

30:16 · stuff like that which we are actually open sourcing so if it’s not out by the time that you see this episode it will be in the future but we will open source the podcast player so that you guys can build your own podcast or just see how audio and flutter web works together yes and we’re also probably um work on improving the podcast player and eventually have a full-blown thing which um is super cool to see and it’s all for our web like it’s all FL this podcast app could also work on mobile on desktop

30:48 · and in this case on the web yeah I so speaking of this I I have actually been doing flutter and audio for quite a while now I built this flutter midi plugin a while back and I think I think flutter is really cool for you know having this

31:05 · interaction model where you can build this awesome UI but have the audio extracted out I don’t know when I first started with flutter the first thought was like how cool would it be if you could build like a VST in flutter or build like an audio Daw in flutter because um are you familiar with those at all I haven’t heard both those terms before so basically what a Daw is is a digital Workstation and uh VST is just an instrument that um runs um in a

31:31 · desktop form it’s usually built on top of um C++ or something else and it’s just a synthesizer basically but what’s cool about that is they a lot of those have really bad UI and they’re usually really old what’s cool about flutter is we can write our UI in a way that doesn’t depend on whatever platform it’s running on and have the audio context be the backing for that plug-in um for example you can actually use flutter and

31:57 · audio with rust and there’s a really cool package out there for rust it’s like the best one and you can just call into it with ffi you can play any kind of sound object you can control the length and it’s really neat there’s the audio players package and you know of course it’s you know evolving and growing all the time but I I’ve just been really fascinated with how powerful flutter is when it comes to you know not

32:23 · because the framework and the UI is not the same and because you don’t have to be on iOS and have to map to iOS widgets because it’s that case you could build UI that runs on Raspberry Pi for example and I think that’s really cool because you can just focus on building the UI first and then add in the functionality as you need depending on where it’s running yes wow that sounds super interesting and Powerful yeah are you planning to work

32:51 · on something like this in the future I’m working on flushing out this midi plugin for flutter I want to have it as a full scale um you know in terms of feature par with other midi plugins for example like right now I use it for the the flutter piano that I created but uh when it comes to MIDI and flutter there’s so many things that you have to do like not only do you parse the midi or play individual notes you then also have to

33:18 · control like the sound of the synthesizer which synthesizer it’s using all the different channels you can have a polyphonic synth a regular synth um as well as sometimes you just want to sample and it’s like it’s a NeverEnding project but one thing I’m looking into is building the core part of it and rust because there’s a lot of really cool midi and audio plugins compile that down to um I guess it would be WM for web and

33:44 · then we would probably just use a regular uh shared Dynamic library for ffi and then my plugin would just wrap around that what’s interesting is um it’s not really you know in the the dart land it’s all in the Audio I mean it’s all in the native land but what’s what’s

34:04 · neat is especially with dart you can actually generate ffi bindings and do all this different layer to where the user may not even know or care where the library is written um but for me it allows me to only have to write the plugin once and rust and of course I’ve

34:20 · been also having to learn rust as part of this process so I’ve been going through the Rust book and that’s been uh kind of crazy because it’s such a low-level language and you know having to learn about what pointers are and how it all works together and it’s pretty insane but I got to say like the book for rust is one of the best books that I’ve seen for documentation it is really really good um have you ever looked at it yes I’ve actually looked at rust a

34:49 · couple of months ago and read the book the first chapters and yeah it was a super super fun experience I I remember like like yeah like rust is such an interesting language it it combines this lowlevel um thing with a very uh Dynamic

35:06 · and high level language like you have all these things that um a modern a new language uh would have but you also have those pointers and all that stuff but yeah it’s also super like the concept is quite different with borrow pointers and the compilers just wrecking your program every time you do something but once program is running it is running yes yeah it’s uh it takes a while to get the first thing to compile but once you’re there it’s like yay and uh but it’s it’s a cool approach

35:38 · to programming but it’s also can be frustrating when you just want to get something up on the screen and it’s not working yes it feels like uh back in the days when I first started programming and it just didn’t compile was like oh my God what is happening and I’m like of course it doesn’t compile the syntax isn’t wrong uh the dynamic type or the the generic type isn’t working but with Russ it’s like what does that mean yeah

36:03 · let me go pop out my textbook yeah yes yeah it’s it’s insane have you um used ffi with flutter yet like have what’s your experience with been with that yes I’ve used it and pretty great actually like um it took me a bit to figure out how to use rust and compile to the C ABI and do all those things

36:26 · that they don’t mangle the file names and don’t remove stuff but once I figured it out and it actually wasn’t that hard it worked pretty well um what I’m still um struggling with when I use this and I still have to learn and look into is all those type conversions like just going from Dart types to rust types

36:45 · like just going from a string from dartland to rustland isn’t that uh easy because well how is the string encoded how where’s the pointer stored who’s freeing it who’s who’s taking care of it it’s like all those things you’ve never thought about in a language like Dart you now have to think about yeah especially like the first time I worked with C++ I was like wait you mean string is just not like a standard lib and it’s just an array of characters you know

37:13 · like it’s crazy and then you start to think about like think about all the times in your code which like for me I naively just concatenated a string instead of using a string Builder and if you’re not careful under the hood you know that’s just like a really bad use case for you know having to reallocate an array size which can in binary can be

37:34 · really bad because it’s a you know oin operation but then if you use a string Builder it’s a whole lot easier to then and memory efficient to be able to concatenate strings and that’s why it’s always recommended but yeah I think there was a dart summer of code project that was out for specifically targeting you know generating this um conversion so you can take a header in and it’ll generate all the ffi bindings for um converting to Dart objects if I’m correct yeah yes I’ve seen it I’m looking forward to whoever’s doing that

38:05 · so yeah if you’re listening we have you have our support so yes yeah I I am pretty excited to see all the stuff happening with it cuz I mean when you do the performance comparisons between ffi and a platform Channel even the binary platform Channel it is incredible how fast it is just to call right into ffi to just call right into into the lib and I don’t know I’m pretty excited about that and even I don’t know if you’ve worked with this yet but like you can actually compile your R code for WM and you know since

38:35 · flutter web supports anything that can run on the web including HTML and JJs web assembly is officially supporting the browser you can just call right into that WM library and um I built an example which will link in the description but you can actually I built the counter application but the counting computation is actually done in Rust which is compiled into WM and it’s incredibly fast so I’m excited to see what kind of stuff you can do there because you could build all kind of stuff you could build like a 3D program you could have a compiler you

39:05 · could do whatever you want because web assembly is uh pretty incredible possibilities are endless yeah absolutely so uh what do you working on at the moment um right now like last week in the episode I talked about how I wanted to get back into things online again blog post and all that stuff I don’t want to have something concrete just yet but uh let’s say like this I’m working on stuff and there’s going to be stuff from me in the near future um what

39:31 · about you yeah for me I’m continuing to make progress on the flutter editor I have had such a hard time getting my sidecar for Tesla app released to iOS I have tried so many times Apple keeps rejecting it because my name they’re trying to say is uh intellectural property so they’re trying to say that I don’t have the rights to make a Tesla app so that’s been fun I’ve been trying to change the name and remove anything I possibly can so we’ll see it’s working great on Android though um but yeah I

40:02 · actually have been thinking about releasing it for Mac OS first and then seeing if they if they accept that and then if they reject on iOS be like well you you approved it on Mac OS so we’ll see um yeah and then also you know just uh getting all this podcast stuff set up

40:20 · and as well as just working on a ton of other various projects um continue to make videos like you said and um yeah it’s been really fun I enjoy doing this podcast cuz we are able to take these ideas and stuff that we talk about and go in depth in a way that we can’t really do in other forms like it’s it’s hard to go in- depth on a render objects in a 10-minute video so yeah it’s it’s cool to be able to talk about things here um so if you want to find us our

40:48 · link to the podcast is down below we have links to iTunes Google Play and Spotify so make sure to follow us on all those make sure to give us a you and look forward to the next episode thank you thank you