Allen Wyma, host of the Flying High with Flutter podcast, joins the Jabber panel to discuss building mobile applications with Flutter.

The discussion includes an exploration of Flutter, how to get started, how it's different from other platforms, and who should consider using it.

Panel

Guest

Sponsors

Links

Picks

Contact Charles:

Contact Steve:

Special Guest: Allen Wyma.

Sponsored By:

CHARLES MAX_WOOD: Hey everybody and welcome back to another episode of JavaScript Jabber. This week on our panel, we have Steve Edwards. 

STEVE_EDWARDS: Hello from a very, very, very hot Portland. 

CHARLES MAX_WOOD: I'm Charles Maxwood from devchat.tv. And this week we're talking to a Flutter expert. We're talking to Alan Wyma. Alan, do you want to say hello and introduce yourself real quick? 

ALLEN_WYMA: Yeah. Hello. So coming from Hong Kong, originally from Chicago, but yeah, I'm now I'm kind of a big Flutter person. You may have also heard me too on Elixir Mix. So I'm also a panelist there. Yeah, I didn't know what else to say. So I also have my own digital agency out here too. So I do a lot of projects in Elixir, Flutter, and sometimes Rust. So it's a lot to talk about there. 

CHARLES MAX_WOOD: Yep, absolutely. And Alan is also a member of the Dev Influencers Accelerator. And we've been working on helping him start a podcast. Do you want to tell people where to find that podcast real quick if you're more interested in Flutter? 

ALLEN_WYMA: Yeah, we're basically on all the big platforms. So I think the biggest thing is you can check out flyinghighwithflutter.com. So F-L-Y-E-I-N-G-H-I-G-H. I don't know if I'm going to spell it out, but basically flyinghighwithflutter.com. On there, you can find links to all the different podcast platforms we're on, but the biggest ones like Spotify, YouTube, even we got video also, Apple Podcasts, Google Podcasts, etc. So it's easy to find us. 

CHARLES MAX_WOOD: Yep. Yeah, it's good stuff too. They've interviewed or he's interviewed quite a few people that are pretty interesting out there. And yeah, it's always fun to dive into. But yeah, let's dive in and talk about.

 

This episode is sponsored by Sentry. Sentry is the thing that I put into all of my apps. First, I figure out how to deploy them. I get them up on the web, then I run Sentry on them. And the reason why is because I need to know what's going on in my app all the time. Yeah, I'm kind of a control freak, what can I say? The other reason is, is that sometimes I miss stuff or I run things in development, you know, it works on my machine, I've been there, right? And then it gets up in the cloud or up on a server and stuff happens and stuff breaks, right? I didn't configure it right. I'm an idiot and I didn't put the AWS credential in. I didn't do that last week, right? That wasn't me. Anyway, I need that error reported back. Hey Chuck, I can't connect to AWS. The other thing is, is that this is something that my users often won't give me information on and that's, hey, it's too slow, it's not performing right. And I need to know it's slowing down because I don't want them going off to Twitter when they're supposed to be using my app. And so they need to tell me it's not fast enough and Sentry does that, right? It puts Sentry in, it gives me all the performance data and I can go, hey, that takes three seconds to load, that's way too long. And I can go in and I can fix those issues and then I'm not losing users to Twitter. So if you have an app that's running slow, if you have an app that's having errors, or if you just have an app that you're getting started with and you wanna make sure that it's running properly all the time, then go check it out. They support all major languages and frameworks. They recently added support for Next.js, which is cool. You can go sign up at sentry.io slash sign up. That's easy to remember, right? If you use the promo code JSJABBER, you can get three free months on their base team plan.

 

CHARLES MAX_WOOD: So I don't know if we've covered Flutter on here. If we have, it's been quite a long time. So do you want to just kind of go through what the basics of what Flutter is? Like what it provides? 

ALLEN_WYMA: Yeah, this is a great topic. And I think this is actually kind of one of the most interesting things. So you can go ahead and take a look for yourself, go to flutter.dev. And the fun thing is that they actually, Flutter team describes Flutter as being basically a UI toolkit. If you think about it, it sounds kind of not so fun, not so interesting. And also it's kind of different. I don't think many kind of frameworks or libraries for cross-platform apps call themselves a UI toolkit. Not that I know of, maybe Qt or something, but most people don't. Usually they say we're a cross-platform or whatever, right? But that's really what Flutter's all about, is making really, really great, fantastic UIs across different platforms, right? So no matter if you're using your app on Windows, Mac...The big ones, of course, iOS, Android, your app will always look the same and it'll always be beautiful because it's doing its own rendering. And that's what really sets it apart compared to like React Native where you kind of still have to lean back on the official tools from each platform. 

CHARLES MAX_WOOD: Yeah, that's true. The other thing with React Native is that, yeah, you move into the web and they do have a React Native web, but it doesn't really do one to one. I mean, there are some other things there too, right? So it's kind of interesting. The other thing that's interesting about React Native in particular though, is that you rely a lot on the React ecosystem where Flutter, it sounds like you kind of have your own ecosystem. 

ALLEN_WYMA: Flutter is kind of really interesting, right? Where if you want to drop down the native code, you can. With, uh, I'm sure you can probably do the same thing with React, but yeah, I don't know, I never really delve into it. I don't know too many people who are that brave. I feel like it's a little bit more complicated, but for me, I, I've written a couple of plugins already for, uh, for Flutter. But I don't want to keep saying Flutter is so great. Definitely one of the bad things about Flutter is that if the plugin ecosystem is bad, then Flutter is really bad experience. That's something that people really need to know about. But we're quite lucky that Flutter has actually got a great ecosystem. And for some situations, there is more than one plugin. And I'm really happy and proud that there's a lot of companies out there, big ones, right? Microsoft, Sony. I forgot which car manufacturer it is. There are these people are kicking in a lot of effort to Flutter. To me, that really shows that people can see the power of this. The thing that going back to what I said about the UI toolkit, think about this. If somebody looks at your app and it looks like crap, they're going to immediately know and feel that it's crap, no matter how good it really is. And that's what I think is really important is that Flutter really is all about having a great UI and anybody can do it. I don't know about you, but I'm really, really bad at CSS, but for some reason I could turn out some pretty decent looking apps in Flutter. I'm quite surprised myself. Yeah, CSS, I still don't know if I should use MX Auto or try to just wrap a flex box around it. See what I can do. It's a... 

STEVE_EDWARDS: What? I thought CSS is a piece of cake. I'm not sure what you're talking about. 

ALLEN_WYMA: Yeah. 

STEVE_EDWARDS: That's tongue firmly in cheek, by the way. 

ALLEN_WYMA: I was going to say, you're one of the few out there, I think. 

STEVE_EDWARDS: Oh, no. No, no. 

ALLEN_WYMA: Some people definitely get in, some people don't. And I think most people don't. It's difficult, right? But yeah, 

CHARLES MAX_WOOD: I don't know. I'm pretty good at CSS. I can move stuff up, down, left or right. I can set the border width. Yeah. Don't ask me to do more than that. 

STEVE_EDWARDS: Now, layout's probably the hardest thing. It's a lot easier with grid and flexbox these days. But once you learn that. 

CHARLES MAX_WOOD: Yeah. So if you understand how those systems work, it does get easier. But it's still I've still run into stuff I didn't quite expect and not know quite how to work it around. So anyway.

STEVE_EDWARDS: So I'm a Flutter newbie, although I can remember listening to Floss Weekly and hearing Leo Laporte talk about Flutter and Dart many years ago. So I'm looking at the Flutter dev site and documentation and stuff. So it looks like you've got quite a bit of tooling that you need to install, depending on what you're working on in order to write Flutter. Is that correct? It's like on Mac, you have Xcode and some other things, or am I reading the docs wrong?

ALLEN_WYMA: No, that's definitely correct. I mean, you're gonna need some stuff. But the nice part about Flutter, the installation is actually pretty straightforward. I can give kind of a breakdown. You just have to get clone a repo, make sure that the bin path is in your path. You run a simple command called Flutter doctor and then it'll list out everything that's not prepared yet. And let's say that you don't want to write iOS apps, even though you have a Mac, you could just skip that section if you want. So that's kind of nice. Out of all the times I've installed, so I've helped people install Flutter quite a few times. I think only one person I couldn't get it running on. I'm not too sure why, they just had some weird setup that just didn't work out. But I think out of like about 20 or so I've worked on, it's been pretty smooth even for Windows and Mac. 

STEVE_EDWARDS: So let's step back a little more. I'm always, as Chuck will tell you, I'm always real big on outlining the basics for someone who comes in and doesn't have a clue what Flutter is. So it's basically, if I'm reading correctly, it's, I don't know if you want to consider, if it's similar to something like Cordova or what other tool, Electron maybe, but the idea is basically one code base for apps across multiple platforms, is that correct? 

ALLEN_WYMA: Yes, but actually I love that you bring up those two platforms, right? Cordova and even React Native and stuff, right? They still, if I understand correctly, they all kind of still require some type of embedded web browser. Am I wrong or maybe you might know more? 

CHARLES MAX_WOOD: No, you are incorrect there. So no electron works that way, right? It's basically an embedded browser. Ionic used to work more that way, but they've invented their own thing called capacitor, which is kind of parallel to Cordova, but Cordova and capacitor, they actually can communicate to the operating system and react native is another example of this communicate to the operating system over the JavaScript runtime on the phone or the device and then manage their own layout in a more native way. 

ALLEN_WYMA: Yeah, okay. I see what you mean. Yeah. I was kind of thinking that way. 

CHARLES MAX_WOOD: Well, Cordova itself does require a web view, you're correct. But React Native doesn't. And I don't think Ionic relies on Cordova with a web view anymore either. 

ALLEN_WYMA: Yeah, I think what I was more thinking about is actually in line with what you're saying. But yeah, you're right. But yeah, they still require, I mean, basically, I think, is it still using V8, do you know? Or is it using something similar, I guess? Is it using JavaScript? 

CHARLES MAX_WOOD: They use V8 on on the Android phones because that's what the JavaScript runtime has. On iOS, it's JavaScript core and on other systems, I don't know. I think it depends. 

ALLEN_WYMA: Okay. Yeah, but in the end, I mean, you're still running JavaScript, 

CHARLES MAX_WOOD: Right 

ALLEN_WYMA: That's kind of the... So that's a huge difference between Flutter and most of the other platforms, right? So I think it sounds like nearly all of them are using a JavaScript interpreter in between, if I understand correctly. Is that right? We can say that much about their bin being sharing this part that they are running with JavaScript nearly? 

CHARLES MAX_WOOD: Yeah, they do. They all run with JavaScript. Even if they run in the browser, they run on whatever's in that browser. And it's usually a chromium on the desktops, which is also V8. So yeah, 

ALLEN_WYMA: Okay. We can say that much. But okay, thanks for correcting me. It's good to hear that you know all this because I've been asking people if they know what how it actually works in the glad to hear that you know it. But yeah, okay, so they all run with the JavaScript, right? You still have that interpreter in between which could be good, could be bad. The good part is I understand that React Native at least can support some type of hot code pushing, which I think is nice to have. And what actually happens for Flutter is that it actually gets compiled directly to binary native code for the device itself. So you're actually running native to the hardware, like you wrote C basically, just a binary blob, right? So we'll program like that. So obviously, like I said, of course you cannot do hot code pushes. They talked about doing something like this, but in the end, you're not going to get the performance out of it. So kind of, you know, you take whatever you can get. But because they actually use the Dart programming language, Dart actually has the ability to run also as a VM similar to, you know, like, I guess, almost like JavaScript, right, where you can push new code and actually see the changes live. So that's definitely also a huge bonus, right? So I think React also has this where you can make a change, save it, and it comes up right away. Basically, you have some type of hot code reload, right? 

CHARLES MAX_WOOD: React Native? Yes, it does. 

ALLEN_WYMA: Yeah. But if you look at the native SDK, I think even for Android and iOS, I don't think they have this. I think you have to literally just press play and recompile again, which is really not a fun cycle. So it's also a power strength. So now you get the speed of running things at a binary, straight level in production. But you also get this hot code upgrade where you basically, as soon as you save, the code gets compiled to a bytecode and sent across your USB to your device or maybe your emulator. And it just gets reloaded right in front of your eyes. Like literally before I even take my finger off the S key, when I do Command S on my machine, it's already running. It's really fast, really nice. And it helps to make your UIs, right? Because you just say, okay, let's tweak this. Okay, this looks good. Let's try that. Maybe that's not so nice. Command C, save it again. Everything just kind of runs very nicely. So I think I hopefully answered your question. 

STEVE_EDWARDS: Well, okay. So, so let's say I want to sit down and write a Flutter app. First of all, the language. Language you're using. Dart, that's its own, obviously its own language with its own syntax. Is that correct? 

ALLEN_WYMA: Yeah, it's its own language, right? Um, it was originally made to replace JavaScript and then now it kind of, it can transpile to JavaScript, but yeah, it seems like it can actually compile directly to, to binary and everything else. It seems to be quite a versatile language. So yeah. 

STEVE_EDWARDS: So any, is there any, I see any other well known language, the Dart that you would say it's most comparable to like a Java, I was supposed to replace JavaScript, so is it? I'm looking at some of the code samples. It seems sort of like JavaScript, but not really. What any, 

ALLEN_WYMA: I would say, I would say it's like, it's a nice mix between JavaScript and Java and that I think is the history of, of basically, uh, of two guys. So it's Lars Bach, I believe, and definitely, uh, Casper Lund. So if you look into the history of these two, they, one of the first things that they worked on together was actually a Java hotspot. So there's a lot of Java in their history. And then they ended up going and working on VA much later on, right? So I think those two languages themselves kind of played a lot into their, their, uh, their thinking, their mindset. So I think that's kind of where the two mix came together from. 

STEVE_EDWARDS: Okay. And then it's so it's basic building block is widgets. Is that right? Is that sort of like a component in a viewer or react app? Where's, uh, are there differences? 

ALLEN_WYMA: Uh, yes. So it's been a while since I wrote React. I guess you're asking private school me on this in case I say something wrong, but, uh, I think we have React. You have also have the idea of components, right? You can reuse these. So you can think of widgets similar to a component in that case. Yeah, so basically everything is a widget. It sounds really weird, but that's actually what it is. So you have a text widget for a label. You have a container that could be like a div, an HTML. You have basically a widget for everything. And you also make your own widgets. So even your app itself is actually a widget too at a high level. So yeah, literally everything's a widget. So once you kind of wrap that around your, once you kind of wrap your mind around the idea of widgets and everything being a widget, you can start see how you can start composing things to make whatever you want. And that's kind of really the power of it is that you can say, okay, this one looks like a container and looks like there's a row over here inside my row. I have a, you know, another container or an avatar or something, right? You can just start compiling these things together, like almost like taking. Legos and making bigger Legos and taking those Legos and assembling those together and making more things. 

CHARLES MAX_WOOD: Yeah. That's not so foreign to anybody who's done development with these front end frameworks, most of the, in fact, all of the, what do you call it? All of the front end frameworks that I've used, react view and angular all work that way, right? Where you essentially have a component. That's your app component. And then you just build everything else underneath it. There are a few others that are a little bit different that I've played with, but those are the big ones and that's generally how they work. So that's not all that unfamiliar, I guess, to people who are doing modern framework-based JavaScript development on the front end. 

ALLEN_WYMA: I think the tricky part comes into knowing when you should use a widget and when you shouldn't because there's some... I mean, like I said, I don't want to give all the shiny stuff and say it's the best thing in the world, right? One of the things that does get confusing is that you sometimes don't know what you should use in certain places because when you assemble your widgets, you're making basically a widget tree so you can swap things in and out. Good and bad. I mean, it depends on how you look at it. To me, I think it's kind of good, right? You can swap whole pieces of the whole widget tree out if you want to, it's totally fine. I mean, the bad part is that you don't know if you should be using, you know, some parts of certain things should be a widget and some parts shouldn't be. So like for a button, you actually have to put another text widget inside just for the text of it, which I think is a little bit weird. You just think you're just passing a string, right? But that could be more powerful because you could actually wrap a, you know, some padding around that text and make the button bigger. So kind of make padding like you would in CSS. So, I mean, it takes time to kind of understand what you can and what you cannot do. And there's just so customizable. That could be positive, could be negative, but I think starting off, it's a little bit negative. It takes some time to really start to learn how to use what's available to you. 

CHARLES MAX_WOOD: Right, so let's back up a little bit because I kind of want to walk through, I guess, the journey or story of building an app in Flutter. So you get Flutter installed. It sounds like it's a little more involved than just NPM install Flutter, right? 

ALLEN_WYMA: Well, it's not NPM install Flutter, right? Because it's running its own tool kit. So there's multiple ways to do it, but yeah. So you're saying just run, run the command to create that your initial skeleton, right? There's a, just a Flutter create and you name it. Yeah. 

CHARLES MAX_WOOD: So you have Flutter installed, you run Flutter create, create your app. And then the next step it sounds like is to kind of create your core widget, right? 

ALLEN_WYMA: Yeah. You can make your, what they call like material app or Cupertino app if you want.

CHARLES MAX_WOOD: A Cupertino app, that's funny. And so a Material app is Android or something similar, right? 

ALLEN_WYMA: Yeah, so this is kind of nice and kind of what's up to you. You can make what they call Cupertino app, which is basically just an app that looks like it's on iOS. So that's why it's called Cupertino app. So if you make basically an app that only runs on iOS, you can just make it look like iOS. 

CHARLES MAX_WOOD: Right. And if you do that, then do your Android apps look like they're running on iOS? Or do they look like iOS apps as well?

ALLEN_WYMA: I haven't tried it, but I'm pretty sure they do. So if you want to, you can do it, but you're definitely going to confuse your, your audience, I think, you know, Android people probably freaked out. 

CHARLES MAX_WOOD: Yeah. Well, I'm sure they, it wouldn't be the first one they've seen, but it sounds so a material app, you're using material UI to design your app. 

ALLEN_WYMA: Correct. 

CHARLES MAX_WOOD: And so you can make that look more or less however you want. Right. 

ALLEN_WYMA: Exactly. Right. That that's definitely the power, right? You can choose the power, the colors you want to use. You can choose, um, padding, whatever. Right. Yeah, you can build stuff from scratch if you want to. 

CHARLES MAX_WOOD: So, so, uh, anyway, so you go ahead and you pick Cupertino app or material app. You move ahead with that. And then let's say that I need like a video widget or something like that. I almost said component. Let's say I need a video widget and I want to put that in. So where do I go and get those kinds of widgets if they're not built in? 

ALLEN_WYMA: Yeah. If you go to pub.dev. There's basically all the widgets that are kind of, it's like the package directly, like Ruby gems for Ruby or I forgot what the one's called and NPM. Is that the name? 

CHARLES MAX_WOOD: Yeah. 

ALLEN_WYMA: So, so you can even search over here. So video, I can look that up. There's just a ton of different video stuff out there. 

CHARLES MAX_WOOD: Gotcha. And so then it, that translates the dart and flutter stuff into native stuff. Right. So that I get like a native video widget that I can embed. Do players and stuff like that. 

ALLEN_WYMA: Exactly. Yeah. For something like video playback, I don't think you can do that out of the box. So you probably have to look future into something native to each platform, especially if you're going to be exporting to, you know, more than just IOT, Android and iOS. 

CHARLES MAX_WOOD: That makes sense. And then let's say that I get this thing built, right? You know, I've got my fancy YouTube clone app. Yeah. I'm ready to publish it. What's that process like to build and publish?

ALLEN_WYMA:Okay. So you've already been developing your app, right? So then you want to actually build it for the store. 

CHARLES MAX_WOOD: Right. 

ALLEN_WYMA: Okay. So for Android, you would just... You have to do some setup to of course get your signing to sign your app. 

CHARLES MAX_WOOD: Yep. 

ALLEN_WYMA: And they have some good documentation. I ran through it the first time. It's pretty straightforward. On the website,CHARLES they show how you can set it all up, including generating a key, all that kind of stuff. So once you get the initial stuff... So again, this is going to be what you have to do for any kind of Android app, no matter what. So this is not like anything special just for Flutter. So just like, if I remember correctly, right, even React Native, you have like a separate folder for iOS, separate folder for Android. You have all of your kind of project specific stuff in each one. You have the same basic layout for Flutter. You have a lib folder for all of your Dart code. And then you have each platform has their own specific folder, which you can make your specific platform changes. So for Android, you have to set up your key signing by hand. So once you do all that then from the root, you just run Flutter build app bundle, which will create an app bundle for you, which is basically just a bunch of APKs and zip file, if I understand correctly. Then you could just upload that directly to the store. So it's pretty straightforward for iOS. You do have to run building twice. I think they solved that already, but I still do it the old way, which is just running Flutter build iOS, which will compile everything for iOS. Then you have to open up the, a runner.workspace file, which will load up all your CocoaPods and everything else. So for iOS, you want to add more things, you have to have CocoaPods. And then from there, you just archive it, which I believe is a process. You have to archive it, it'll create a archive for you. Then you can upload it, et cetera. So if you've done iOS before, it's all about the same. 

CHARLES MAX_WOOD: Makes sense. Do you have any questions about that process, Steve, that I didn't ask? 

STEVE_EDWARDS: Nope. Thank you, Kaverjit. 

ALLEN_WYMA: I've also built Flutter apps for web and desktop, right? For Windows, it's the same. You just Flutter build Windows, you're done. You get a nice executable, I think with a couple of DIL files. I know I did it quite early on, so there was a bunch of DIL files, but it seems like this last time there's less DIL files, I feel. Mac OS, you get a.app file, the same folder, right? So you get that out of the box too. 

CHARLES MAX_WOOD: Is that built on Electron or does that run? 

ALLEN_WYMA: No, no, it's native. It's completely native. It's a completely native experience. All the platforms are native. 

CHARLES MAX_WOOD: Interesting. So it statically compiles through LLVM and gives you an executable, native executable file. 

ALLEN_WYMA: Exactly. Yep. So you get the EXE for your, your windows. You get a dot app folder set up app thing for your Mac. Everything is native. That's really the, one of the big differences. 

CHARLES MAX_WOOD: That's really cool. 

STEVE_EDWARDS: So how quick is the ecosystem to keep up with OS changes? 

ALLEN_WYMA: That's a good question, right? That I think iOS has been the most difficult part. And to be honest, from my own experience, I think iOS has been difficult in itself. I had a recent issue where for some weird reason, deep links just was changing between different versions of I was 14 recently, like 14.5 and 14.6, I get different responses for some weird reason. And I see people also complain about SwiftUI breaking in certain builds. So I wouldn't, I would expect the same in Flutter if you're going to get this kind of difference even in the old ecosystem itself, the original one. Oh yeah, I think it's a valid concern you have, right? So don't forget that Google is working on this and I'm sure they can afford the $99 to get a license right there. They already have that. So they're going to be working with this and they're going to be... They do work on it. It kind of just depends on Apple kicking things out and making sure that they have enough time to work at the Gold Master before it gets released. So you probably will have some issues for maybe a couple weeks or so, but they die down. So that's just going to happen no matter what. And I think this happens even for native people, like I said, for native iOS apps, you're going to get some, some problems. That's why you have to test early and test often. Right. But Android works, works well. It works pretty well. I've actually had more issues in Android than I have in iOS for some weird reason. So usually the Android X issue was always a problem for me. So yeah, I mean, with any ecosystem, what the issue I had before was that with Android, I can't remember what the exact reason was, but there's this thing called Android X, I think it was to kind of solve the issue of the fight, the legal fight that Google had with Oracle. I think this is part of it. I may be wrong, but you had to basically make your plugins all Android X compatible and some people did some people didn't. So it was kind of a pain, but that seems to be pretty solved. So now I think the next one is just upcoming, you know, iOS 15, right? I don't know what that one's going to be like. So that's going to be interesting. But I think it'll be fine. It's going to get solved. They're really working on it. They're actually sort of hiring again for iOS developers for Flutter. So they're really doubling down. 

 

When I went freelance, I was still only a few years into my development career. My first contract was paid 60 bucks an hour due to feedback from my friends. I raised it to 120 bucks an hour on the next contract. And due to the podcast I was involved in and the screencasts I had made in the past, I started getting calls from people I'd never even heard of who wanted me to do development work for them because I had done that kind of work or talked about or demonstrated that kind of work in the videos and podcasts that I was making. Within a year, I was able to more than double my freelancing rates and I had more work than I could handle. If you're thinking about freelancing or have a profitable but not busy or fulfilling freelance practice, let me show you how to do it in my DevHeroes Accelerator. DevHeroes aren't just people who devs admire, they're also people who deliver for clients who know, like and trust them. Let me help you double your income and fill your slowdowns. You can learn more at devheroesaccelerator.com. 

 

CHARLES MAX_WOOD: Yeah, it's, so my experience primarily with React Native. And yeah, I mean, between versions, sometimes you get kind of that same weird stuff, but yeah, they solve it pretty quickly. React Native is built by Facebook, right? It's the same boat, big company running it. And yeah, they solve those pretty fast. But most of the time, I've also done a little bit of native stuff. And from one, OS version to the next, it's usually not a major issue. But there are occasionally things that yeah, you have to go in and upgrade the libraries that you're using or things like that, because there are breaking changes in the Apple frameworks. But they usually know those well in advance. And so if you don't fix them before they come out, it's because you haven't gone and gotten the yeah, like you said, the gold master or the beta versions and been trying to build your your app against it and then run it. 

ALLEN_WYMA: Yeah. I've seen some people complaining. I think when I was 13 came out, it was really a disaster for a lot of people, even I think Apple and some people were complaining saying, why didn't you guys test this? And they said, oh yeah, no, we tested it, but the gold masters thought they're different than the release for some reason. 

CHARLES MAX_WOOD: It just happens. 

ALLEN_WYMA: Yeah. It happens. Right. So I mean, I think you're just going to get that no matter what you do. It's just the way Apple rules, I guess. I think they're just quite different than Android, right? Android is very open. Everybody knows what's going on. They could see it.

CHARLES MAX_WOOD: So yeah, Android's open source. I think that brings a whole set of advantages and a whole set of problems with it. So, and, and a lot of it's down to not necessarily that it's open source, but how the companies manage it. Right. And so anyway, it's always interesting to see how that all shakes out, but I agree. It, it, you just kind of have to roll with it when it comes. Hopefully it doesn't break on too many people's stuff. The other thing though, that's interesting that I've seen is that with Ios as long as your device is supported, you tend to be running on the latest iOS, right? It'll automatically push you to update your phone and run the update so you're running on the latest stuff. Apple TV is kind of the same deal. In fact, Apple TV is actually iOS. Just a little different. And so people are generally, not always, but generally running on the latest version of the OS, which means that you can target the latest version of the OS and be 90-95% of fine with your users. Whereas Android, I've seen that a lot of people kind of wind up on whatever version gets put on their phone and then whatever updates either the carrier or the phone manufacturer actually push out to the phone. And so because they run custom updates to the OS because it is open source and they can do that. And so that's the other thing. And I don't know if this has affected you at all, Alan. But Yeah. So iOS, you just target the latest version with Android. You have to support multiple versions. 

ALLEN_WYMA: What actually has affected us, which is sad is we, how do I say this? We did want to actually add a pedometer to an app recently. And it turns out that Samsung actually blocks certain API's for some reason, because they want you to use your S they want them to use your S that the S health or something. Yeah, it's actually documented quite well that certain API's just blocked from from this so you can't really run a proper pedometer. And it's not even all Samsung devices, it's just some, at least enough that people have to say that this plugin doesn't work, which is a little bit sad because you really could use that. And yeah, and then we just have to tell people, sorry, but if you have a Samsung, we can't guarantee this works, which then just makes you look like you don't know what you're doing, right? But it's just out of our hands, that's the problem. And I think Xiaomi probably also gets the same issue. I think Xiaomi also has some weirdness to it at certain points trying to think what else but yeah and also don't forget about Google Play services right some Android devices don't have that so that's this also could be an issue like we work with like Google Fit and so if you don't have Play services yeah we can't help you so that's that's sad but that's the Android ecosystem right this is not Flutter this is Android ecosystem right and that's a that's a big mess to deal with but I think you know it depends on what you want to do and actually a side note right is we actually wrote an app for a smart mirror, which uses Android, there's no Google Play services because you had to apply for it and pay money, I think. And so they didn't do it. But we actually use Flutter to write an app for that. And it worked out great. I really enjoyed the experience and it looks beautiful on there. 

CHARLES MAX_WOOD: Good deal. 

STEVE_EDWARDS: So you mentioned, you said something about testing earlier. So what is there a specific Flutter framework for testing? Or can you use something that's already out there?

ALLEN_WYMA: There is testing built into Flutter where you can actually say, okay, you know, find this button based on this label and click it, and then look for this thing to happen, you can do this kind of testing. Of course you can do unit testing also. You can do lots of things. So yeah, they do have a pretty good testing framework, I think works quite well. So you can also do TDD if you want to, which I do sometimes. And there was also supplementary libraries, which can also add to your, your testing. And they also have very great Makito, right? So you can actually mock objects out for your testing too. So I think the testing, surprisingly, usually testing is always not very good, I think. And not every language has good testing. Ruby is good, I think Elixir is good. And I think Flutter is good. JavaScript, I mean, just so many choices. I don't know, it's hard to say. Jasmine's probably the big one, if I remember correctly. Seems okay, whatever. Yeah, yeah, Jess is the one I'm thinking of, sorry. Jasmine's the old one, right? 

CHARLES MAX_WOOD: Yep. 

ALLEN_WYMA: Yeah. So Jess is kind of the, the one, the de facto one, I think. Right. So, yeah, I think the testing in the automated testing is good. 

STEVE_EDWARDS: Yeah. And then we were talking about how much we all love CSS earlier in the podcast. So what are your options? I mean, are you free to use like just plain old vanilla CSS versus chocolate or, uh, you know, maybe a framework like tailwind or Bulma. I know you said use the Google material for design. So what are your options for CSS implementations? 

ALLEN_WYMA: I mean, what do I use? My actual CSS or do you mean using CSS within Flutter? 

STEVE_EDWARDS: Both. 

ALLEN_WYMA: Yeah. I mean, there's no CSS. I mean, everything is just rendered using mostly with canvas. So if you take my web stuff, yeah. And, and because this is using the widget tree idea, there's no, there's no nothing like that for any other platforms. Yeah. So, uh, but yeah, if you want to know what I use for CSS, I also use Tailwind. I love Tailwind.

STEVE_EDWARDS: Okay. I'm confused. You confused me there. I said, no CSS is used, but you use Tailwind. What did I miss? 

ALLEN_WYMA: I used Tailwind for my other projects. Yeah. So if you want to talk about Tailwind, I'm more than happy to talk about Tailwind. I love it. Same with Tailwind, Alpine, JS together. Really great. 

CHARLES MAX_WOOD: Yeah. That's kind of tangential to this if Flutter doesn't use CSS. So what does the styling code look like? Is it just properties on your widgets or is there kind of an overarching, hey, here's kind of the default look and feel or how does that all work? 

ALLEN_WYMA: Yeah. So you have a theme. So we have this widget tree, right? You make something called material app, part of material app. There is a theme which you can start to set certain settings. I believe there's some, some spacing, the font, font size, et cetera. There's a lot of these kinds of settings for style. And also there's, you can set colors, right? So you can set your palette of colors. So they have default like blue and purple, et cetera. But then you can also get down and really define like, I want, I forgot the syntax off the top of my head because I usually just interrupt, you know, changes at the, at each components level. But you could say like, I think it's something like primary color is like whatever, blue, 50, 500 or something like that. But you can also use, still use the hexadecimal system too. So you can just define a color object put 0xff and then your hex color, then you can really get down to exact color that you want to use. And then of course, like I said, a lot of these widgets, you can also just send in colors if you want to. So you can say, okay, for this widget, you can set a setting like the text color for the text widget. You can say it's whatever color you want it to be. You can override it at that kind of level. 

CHARLES MAX_WOOD: Gotcha. So what kinds of apps have you built with Flutter? I mean, you said you built like a smart mirror. What can you do with it? 

ALLEN_WYMA: Yeah, I built a smart mirror app. I built a app which runs on Android iOS that uses Apple Health for your health data and Google Fit for your Google Fit data. We also integrated with Strava so you can pull your Strava data from there too, directly. We worked on an app which actually pulls in data for clients. So we have a client who's a SaaS platform like Google Drive for law firms. And what they had before is basically like Google Docs kind of like web UI, but like 50 times worse than that. I know it's good, right? But Google Docs is pretty decent, but theirs is not that great. So they asked their clients for asking them for a desktop app for Windows. So they want to be able to actually download the files, edit them locally, save them and have them uploaded. So we built all that for them, a quick prototype. They asked for Windows, but because we did Flutter, we actually did all the development on a Mac because we all use Macs over here. And then all I did was just switch over to my Windows VM, export the executable, run a script to set up the installer and kick it over to them and then it just worked. 

CHARLES MAX_WOOD: That's cool. 

ALLEN_WYMA: That's a great success case, I think. Another thing is for a client, another client of ours who does financing for retailers in the US, want to buy products from China, we actually built him also a Mac app, just because he's worked with other developers before. He's probably more on an individual level and I've seen his workflow where he gets an email with a bunch of JSON text, which we all been through that. And so I wanted to give him something nice because he's been good to us. We've been good to him. We have a good relationship. So we built him a basic Mac app because he's always on his laptop. His partner saw it, wanted the same thing. So we exported a Windows one for him. And he also asked for an Android version. So we export an Android version just by making one small tweak in order to make it all work was this one small layout change we had to make because obviously desktop and phone is different. 

CHARLES MAX_WOOD: Yeah. I was going to ask about that. Is, yeah, do you have to, I mean, on the web we have responsive design, right? But I mean, I've done enough iOS work to, yeah, it's like, okay, well, I've got a layout for the iPhone and then I've got a different layout for the iPad and then I've got a different layout for the Mac. How much of that do you have to do with Flutter? 

ALLEN_WYMA: I mean, of course you have to do it, right? Because you're going to be expecting things different on your iPad, even versus your iPhone. You have different layout. So yeah, I mean, there's different ways to achieve this. One is that you can check the size of your screen. There's ability to say, okay, what's the max width that I can have? 

CHARLES MAX_WOOD: Yeah, basically responsive design kind of idea. 

ALLEN_WYMA: But then you can also say, what platform I'm running on? Am I running on the web or running on Android, iOS, Fuchsia? It also supports Fuchsia. So for the recent Nest came out, you can already run your app on that already. So yeah, whatever. You can be very specific. And the other thing too is I also want to state one more really, really nice thing about Flutter is that although things look very similar, there is some slight differences, even in the physics. So when you scroll on Android versus when you scroll on iOS, you're actually going to get slightly different behavior. Because when you're using each platform, you actually expect different types of behavior. So for instance, when you're on Android and you scroll to the bottom of the list and you pull up, you get that little ink well at the bottom. But for iOS, you don't get that. That's just a kind of a very easy to spot difference, but there's other, of course, there's other differences too. 

CHARLES MAX_WOOD: Yeah, that makes sense. 

STEVE_EDWARDS: So what are your options for connecting to a backend for your data? I believe I saw that there's an included HTTP library that's in there. Is that sort of your go-to for connecting to your various backends? I mean, is there a GraphQL option built in? What are your options? 

ALLEN_WYMA: Yeah. So sadly, actually, the one thing I didn't quite figure out, but I don't know, maybe there's a reason for this direction, is no built-in HTTP client. You have to actually pull in a package for that. 

STEVE_EDWARDS: Okay. 

ALLEN_WYMA: But they do have a Graph2L one. It's not written by the Flutter guys, written by another company. And there's also a Graph2L Flutter one too. So you actually have widgets, right? So you know how you have to paginate your results. They actually have a widget for that. And also something that also can do... I forgot what that's called. Basically like Apollo-like caching. So you have a centralized cache and all that kind of stuff. Things will get updated if you kill certain parts of the cache. They have all that too. So that's what I usually actually use. I usually mostly use GraphQL. That works out quite well. I think one of the more difficult parts about Flutter too, is that there is different ways to manage your state. I think even React has this situation too, right? You have Flux, you got, I think also MobX. There's other things you could use. The same thing with Flutter is that you also have to figure out which one you want to use. 

CHARLES MAX_WOOD: It's really interesting. So, one of the things that I've experienced with React Native, and I'm curious what the experience is with Flutter, is the upgrade path, right? So sometimes I wind up upgrading from one version of React Native to the other, and then I'll have some of my plugins that don't work, or there'll be some breaking change in there that I wasn't aware of, and so I have to go and tweak it. Most of the time, it's fine, but some of the time, it's painful. How has that looked with Flutter? 

ALLEN_WYMA: I think, honestly, it's been pretty good. The biggest issue I think that comes is when you update your version of Dart further than anything else, because maybe you're relying on some newer features of Dart, that's kind of the problem. But otherwise, I mean, I haven't had much issue of like upgrading my SDK, you know, to say, okay, I'm going to use version 1.22 or something like that versus 1.17, I think now it's on 2.22, I can't remember what the latest version is now. Even when you go from one dot whatever to two dot whatever, it's actually not that big of a change, I think. A lot of it's kind of under the hood. So I think the process of upgrading is pretty straightforward. The only thing that is a problem is now they have no safety, which is something that's a little bit of a problem for some people they have to update. So no safety is definitely a nice feature to have. I think I probably should dig into that, what no safety is, I think. So no safety is the idea that you can guarantee certain pieces of data in your program are actually not nullable. And so that obviously will solve a huge class of bugs because of course the compiler will stop you and say, Hey, no, this thing, you know, you have to set a value or this thing you have to check it because it could be, it could be null. Which I think I've been bitten quite a few times by, by null things or non-null things. So it's definitely a powerful feature to have. And also the nice part too, is actually if you turn on null safety, you will actually get a smaller app size too because now the compiler doesn't have to add in all that kind of null checking and this kind of stuff. You could just say, these things are always never going to be null. And it actually reduces your code size by at least a little bit. 

CHARLES MAX_WOOD: Cool. Well, I don't know if I have anything else to ask. Is there anything that we should have gone into that we just didn't think of? Cause we're not Flutter devs. Well, I'm going to take the quiet as that we got it covered. 

ALLEN_WYMA: I think, I think something to kind of talk about is like, how does the community of JavaScript kind of look at Dart, right? Because I think it was almost like a I don't know. I felt some people always felt like it was an attack, right? With Google trying to bring it into Chrome. 

CHARLES MAX_WOOD: Well, it felt like they were pushing it for a while, like back, what, like nine years ago or when they, or so when they created it, they were really trying to get like browsers to adopt it and stuff. And it felt like they kind of gave up on that. But yeah, that's a question that I just figured that they used Dart because they made Dart. But is there a reason? Like, do you like Dart versus JavaScript for things like this? I don't know. Do you have a feel one way or the other? 

ALLEN_WYMA: I can tell you this much. I refuse to write JavaScript as much as possible. So it's got a lot of... I mean, it's got a lot of baggage, right? And it's got its niceties. It's also got its baddies, what you call it. It's not so nice parts. I mean, when you have a book called JavaScript, the good parts, that's a little bit freaky. I don't know too many languages that have this kind of book. But maybe I don't know that many books. But I mean...It's got its baggage, right? And that's just the way it is. Every language has something that they can't shake. And I think Dart, of course, it's a newer language. So it's going to have, it's going to have some learnings that came from the past. And it's had its time to kind of work out what's good, what's not good. And it's written for a specific reason. And I think the original reason was to make excellent running, fast running JavaScript, right? That was the original reason. And it just so happens it also has other properties, which are also good. Right. I mean, I don't know any languages that can transpiled to JavaScript, compiled to native code, and compiled to bytecode. That's very few and also runs on so many different platforms. I mean, even Ruby can't run on so many platforms. Even Python cannot run on so many platforms. Or no, no, actually, I think I heard recently, there's actually a mobile framework for Python. But yeah, I think that's definitely, not a lot of languages can run on so many platforms. So even SAS, right? The SAS compiler, I think, is officially written in Dart. Wow, why is that? I wish I knew why, I don't know. I'd love to know why. So I mean, there's definitely something to it. 

CHARLES MAX_WOOD: Yeah. Yeah, Ruby does have a mobile option as well, but it's not widely used. One thing that I'm curious about though, is I was just doing a little bit of looking around and I saw Flutter 2 versus Flutter 1. And I'm curious, are you writing apps in Flutter 2? And how does it compare? 

ALLEN_WYMA: I think an important distinction I really want to bring out is that, to be honest, I don't see much between Flutter 1, Flutter 2. In all honesty, right? I think there's a reason why they bumped the number. There's two reasons that I think. One is that they wanted to get more... It's a good press coverage, right? When you go from one to two, that shows that you're really in the game, right? This is no longer like a beginner number one version, right? We're on number two. And I think the other thing too is that they also bumped it because they said that now web is finally production ready. Now they say it's production ready. I don't think it's totally production ready yet. I had not so great experience using web. I mean, it renders fine I don't have a problem with that. But developing with Google, sorry, with Flutter Web has not been good because sometimes the high code reload just doesn't work. It just doesn't work as well. I'm not too sure why. And also it doesn't support SEO. So because everything's basically rendered with Canvas. Which obviously makes it look nice. It works out well. But in the end, you're going to want SEO. Well, it depends on your app too. But a lot of people are going to want to have SEO or text-based reading and things like that. So if you have people who are blind, et cetera, disabled, cannot read it, then you're gonna wanna have that. 

CHARLES MAX_WOOD: Yep, cool. Steve, anything else you wanna dive into here before we go to picks? 

STEVE_EDWARDS: No, I can't think of anything else. I think we covered my questions. 

CHARLES MAX_WOOD: All right, well then let's go ahead and do some picks. 

 

Hey folks, if you love this podcast and would like to support the show, or if you wish you could listen without the sponsorship messages, then you're in luck. We're setting up new premium podcast feeds where you can get all of the episodes released after Christmas 2020 without the ads. Signing up will help us pay for editing and production, and you can go sign up at devchat.tv slash premium. 

 

CHARLES MAX_WOOD: Why don't you start us out, Steve? 

STEVE_EDWARDS: Okay, as soon as I can get my, here we go. So going with the dad jokes for the weeks. So question for you, Chuck, what did Spartacus say when the lion ate his mother-in-law? Nothing, he was glad he ate her. 

CHARLES MAX_WOOD: Ah. 

STEVE_EDWARDS: Yeah, and then of course, everyone has heard of the historical figure, Karl Marx, but no one remembers his sister, Anya, because she invented the starting pistol on your mark gets it anyway. 

CHARLES MAX_WOOD: Oh, 

ALLEN_WYMA: I got it. 

STEVE_EDWARDS: Good, good. There's always somebody that doesn't get the joke. 

CHARLES MAX_WOOD: I didn't get that one until you explained it, which is sad, I guess for me. So it says, 

STEVE_EDWARDS: and you know why the dad joke crossed the road, right? To get to the other side. Yeah. Wow. Tough crowd today. Anyway, that's my contribution. 

ALLEN_WYMA: I got it. Oh, 

CHARLES MAX_WOOD: I got that one. I just, 

STEVE_EDWARDS: right. 

CHARLES MAX_WOOD: All right. Well, I'll go ahead and throw in some pics. So I've been listening to a new book on Audible, it's called outwitting the devil. It's by Napoleon Hill. You may have heard of he wrote, thinking for rich. And it's kind of this interesting, like become a better person and gain what you want in the form of an interview with the devil. Right. So it's, Hey, this is how I get people discouraged. This is how I get people to make self-destructive choices. This is how I get people to do things that they really ought not do. Right. And it's not, so it's not really a sermon. It really is down to, I get people to to be afraid and then I can get them to do all these kinds of things. Right? I get people to be depressed and I get them to do these kinds of things and I set up societal pressures in these ways and it gets people to do these kinds of things. And it just made me really think about, okay, you know, so how do I as a person who wants to be a good person, be a better person, you know, how do I stand up to some of this stuff that's probably going to come my way and remain true to myself? And so it was really, really interesting. I don't think there's anything like super doctrinal or anything about it. It was mostly just a way of him being able to go into his thoughts and philosophy around how to stand up to some of the negative pressures that come into your life. And anyway, I've really been enjoying the listen, so I'm going to pick that. And then I also watched a movie on, I watched it on Daily Wire. You can get it on a bunch of other places. Daily Wire is a conservative news outlet. But they got the rights to distribute the...It's called created equal and it's Clarence Thomas in his own words. And he kind of talks about his history, which I find fascinating, right? You know, I was always interested in, okay, you know, why does like Ruth Bader Ginsburg do, do and say the things that she says, right? And there are a couple of documentaries out there about her. So you can go find out, you know, why she was the way she was in some ways. Right. And this is, this is the same thing, except it's for Clarence Thomas, who's another Supreme court justice, and it was interesting just to kind of see his past and how he kind of came to where he was. And anyway, this kind of modern history that still has echoes and ripples into the way the world is today, I just find them really fascinating, right? So you go look at some of these movements from the recent past that you either agree with or don't agree with, right? But as you kind of are able to dig into it, you're like, oh, I see, in this case, it was like, I see echoes of what's going on now back then, right and some of the people doing some of the same things then that they were doing now and this is what we're dealing with and stuff like that. Anyway, I just found it really, really interesting as a way to explore kind of, okay, so this is how he came to his philosophy on government and judicial stuff and things like that. And then go, I encourage you to go back and watch some of the ones on Ruth Bader Ginsburg. I don't know if there are documentaries on any of the other Supreme Court justices. I'm sure there are documentaries on some of like the recent and current presidents, you know, things like that. But it's interesting to kind of see, okay, this is the history that we're kind of living through today. So I'm going to pick that created equal Clarence Thomas in his own words. And my last pick is, I just want to remind people to go check out Dev Influencers podcast and you can get that at devinfluencers.com slash podcast. And you can come and check out all the shows and stuff that we have there. That's pretty much all my picks. Alan, do you have some picks for us? 

ALLEN_WYMA: Yeah. So my first pick is actually the talk I did or not talk. The interview I did with Casper Lund about basically where did Dart come from. And we went all the way basically through his history. So when he graduated school, what he started doing. And then finally up until he made Dart and then actually started working with Flutter and how they actually went Dart and Flutter started working together. Before Flutter was even Flutter, everything was called Sky, right? So before they actually started working together. So it's a really a great kind of history. So like, I'm also a big history fan. So you're talking about Clarence Thomas and everything. That also really excites me, right? These kinds of things. So hearing about, you know, how things came about, I like to hear a lot about. So it's usually when you hear like, you know, what's his history, why did it come this way? And you can start to see looking at Dart, why it looks the way it looks, right? He has a big history with Java, a big history with JavaScript. And so to me, when I look at Dart, I see Java mixed with JavaScript and I just see good things from each side. So my second pick is a book from Manning's. Manning is called Rust Servers Services and Apps. So I've been getting more and more into Rust recently. We actually also did an episode with basically how to mix Rust and Flutter together, which is quite popular. In any case, if you're interested in Rust, I think this is a really, really great book where you can use Rust both back end for services and also even with WISOM. I think it's a really good book. I've been reading it so far. Third pick similar, but more on the kind of full stack side of Rust web development. It's very similar, but yeah, I think both these ones have different ideas, but same topics, similar topic, but they also use different Rust service, what do you call it? Rust frameworks. But in the end, I think both of them really, really good for picking up stuff about Rust. So those are my three picks. 

CHARLES MAX_WOOD: Awesome. All right, Alan, just to give you a chance again, to remind people how to find you, what are the best places to go? 

ALLEN_WYMA: Yeah, I have I'm a core log Twitter. So you can always check me on Twitter. I got my own at alenwyma for Twitter. Also my company, Plangora. P-L-A-N-G-O-R-A. And for Twitter for the podcast, we also have... Is it FLW? I think I need to look it up. It's been a long time. I never really tweeted myself. Nobody ever twits herself. 

CHARLES MAX_WOOD: Yeah. 

ALLEN_WYMA: So one second. It is FHW Flutter. So it's short for Flying High with Flutter. So FL...H sorry, FLHW Flutter. And then if you follow that, you can see all our new episodes, release a new episode every Wednesday. So we really spoke the video and just an audio podcast. If you just want to listen in and not actually watch. 

CHARLES MAX_WOOD: Awesome. Sounds good. Well, let's go ahead and wrap up here. Thanks for coming out. And this is really, really interesting. 

ALLEN_WYMA: Yeah. Thanks for inviting me. I'd love to come on here and talk about Flutter. And it's always good to chat with you guys. 

CHARLES MAX_WOOD: All right. We'll go ahead and wrap up here until next time. Max out. 

STEVE_EDWARDS: Adios.

 

Bandwidth for this segment is provided by Cashfly, the world's fastest CDN. To deliver your content fast with Cashfly, visit c-a-c-h-e-f-l-y dot com to learn more.