#378: Flet: Flutter apps in Python Transcript

00:00 Have you heard of Flutter? It's a modern and polished UI framework for writing mobile apps, desktop apps, and even web apps. While interesting, you may have kept your distance because Flutter is a Dart language based framework, but with the project we are covering in here today. Flet, many Flutter UIs can now be written in pure Python. Flet is a very exciting development in the GUI space for Python devs, and we have the creator Feodor Fitsner here to take us through it. This is Talk Python to me. Episode 378, recorded August 18, 2022.

00:46 Welcome to Talk python to me. A weekly podcast on Python. This is your host, Michael Kennedy. Follow me on Twitter, where I'm @mkennedy and keep up with the show and listen to past episodes at 'Talkpython.fm' and follow the show on Twitter via @talkpython. We've started streaming most of our episodes live on YouTube. Subscribe to our YouTube channel over at Talkpython.fm/YouTube to get notified about upcoming shows and be part of that episode. This episode is brought to you by Sentry. Join Sentry at their conference. Dex: Sort the Madness, the conference for every developer to join as they investigate the movement and trends for better and more reliable developer experiences. Save your seat now at 'Talkpython.Fm/dex'. It's also brought to you by IRL, an original podcast from Mozilla. This season, they're focusing on a topic very relevant to Python developers AI in real life. Check out an episode at 'Talkpython.Fm/irl'. Transcripts for this and all of our episodes are brought to you by AssemblyAI. Do you need a great automatic speech to text API? Get human level accuracy in just a few lines of code? Visit 'Talkpython.fm/assemblyai'. Hi, Feodor.

01:56 Hi, Michael. Thanks for inviting me to your podcast.

01:59 Yeah, absolutely. I'm so happy to have you on the podcast.

02:02 I'm Feodor Fitsner. I'm working on this Flet project.

02:06 So excited about your project.

02:07 Well. I'm excited as well. It's something new. Yeah, it's open source. I love open source.

02:13 This project is a spin off. It's like a second iteration.

02:17 You had a project called Pagelet, right? Is that what you're referring to?

02:21 Pagelet? So, yeah, it was pagelet. So it started as an internal tool for making quick apps, like throw away apps, and it was for Web mostly. So it started as a Web thing, and it was Pagelet. Then I shortened the name to PGLET, and some guy on hacker news said that it's probably about, like all gram, something like postgres.

02:52 Yeah. So I got confused and I started calling, like, be glad. So I didn't like the name, and I did like that it's only Web because the next step right after Web, I started looking into doing desktop apps with this stuff and realized that actually the only choice is using WebView, and WebView is really platform specific. So on macOS is one thing. It's like Safari on Windows, it's like either like WebView one, which is quite separate, etc and etc.

03:28 But a lot of times they don't have full support for modern HTML as well. So certain things you do might act janky on a certain version of an OS. Yeah. It's always a weird thing, isn't it? Yeah.

03:39 So this page web was laid on React, and I realized you cannot open it right away in a web view on Windows because it's this Microsoft Edge browser. So you have the polifills, et cetera, et cetera, to make it work on Windows.

03:58 Then I don't remember the exact moment, but probably I saw an announcement from Google that they're releasing this, like, flatter, something like into production for Web and desktop, and I become interested. What is that? And they look into like, flattering.

04:19 And I realized that it was on the market for a long time and mostly useful absolutely. For mobile apps.

04:28 I'd always kind of dismissed Dart as just kind of like a weird coffee script type of thing. It's like just another language to program to write JavaScript. But then when Flutter came around, it got way more interesting. So before we dive into what Flutter is and how we work with it and why you built it and so on, let's actually take a bit of a step back.

04:50 Let's actually talk about the two building blocks, or one of the building blocks. We have Dart, the programming language, which has been around since 2011 or so. And then we have Flutter, the UI framework that traditionally, or normally you would use a dart to build initially, I think it was just initially web apps, wasn't it?

05:10 Yeah.

05:10 And then they added mobile, and then they added desktop. And the combination of those three things is fantastic.

05:15 Exactly.

05:16 All right, we'll start with Dart. Tell people about Dart. I'm not a super expert in it, but I have been experimenting to see whether using Dart and Flutter might be the right way to rebuild the Talk Python training mobile apps. Because they're okay now they have bugs. There's a whole story about the App Store, about why they're not fixed as part of the problem, not just the way that they're written, but I would really like to modernize them. And I'm thinking that Flutter is the way to go. So I'm personally interested, but not very experienced in it. But I've done a little bit. So that's the perspective I'm coming at this with. Tell us maybe about your background with it as well, and then we'll talk about Dart and Flutter before we get into the Python side.

05:57 Sure. So I have to say I'm coming from Microsoft World.

06:01 Okay.

06:02 From Dotnet. I've been in net, like, since the.

06:05 Latest since like the year 2001 or something, right?

06:10 Yeah. I remember we were going through the language specifications sent to us by Microsoft, microsoft Word file at that time. So I'm a JavaScript guy. Of course. And then I learned, like anyone else, like Typescript and then Flutter. So my impression about Dart are very positive. It's so nice.

06:36 Maybe it's me, but it looks and it feels better than typescript like to me. Maybe it's because of they have a great tool in Visual Studio code. Maybe but it felt so natural to write something in Dart and especially I love this sound new references like where you can have it basically new it's a really huge problem like this news or nails.

07:03 So yeah, Rust like deals with that there are no rules. Go somewhere like in between. So this flet survey is written in Go and in Go you can't have like new streams but you can have new references. Like new references. But Dart is great by default. It doesn't allow news and it makes your app working as expected.

07:26 Yes, and for people who don't know, Dart is out of the audience. Tishar puts it as a modern language which is the mix of the good parts of JavaScript and Java. I would say it feels a bit like Java, a bit like C# in its syntax and the way that it works. Also a little bit like Swift with its explicit optional type system. Kind of a mix of all the stuff that was either in those languages or came out in Swift later. And it's a pretty nice language. It's really different than Python. Oh, well, yeah, especially untyped Python. Right?

07:58 Yeah.

07:59 You can see all different things in the Dart, like Typescript like C#. Yes, I agree. But I would love to see many things like implemented in Dart transfer to JavaScript or typescript. It's pretty easy to write.

08:15 Yeah, it is. Before people who are listening, we might not want to scare them away thinking they would have to learn Dart in order to do this right.

08:23 Sure.

08:23 The whole project that you are working on is sort of what if we use Python instead of Dart but we still kind of use the building blocks of Flutter which I think we should probably discuss as well because it's a unique way of programming.

08:37 Absolutely. Yeah. The problem is not in Dart itself. Dart is a great language. I mean, you can spend like a few days and pick up basic things and you become really decent. And the Dart is not the problem. The problem isn't in flutter. I mean, it's a great framework, it's so flexible, it's so powerful, but it could be kind of like a steep learning curve. I would compare flutter to react. So if you coming from React, could be easier to you react native.

09:08 Yeah.

09:09 You know what. Again. As a guy coming from dot network. I remember those times when we were writing apps using ASP netforums. Stateful controls sessions on server side and now we translated to these stateless apps like single page applications where the UI is built of like application state and to my mind this application state management application state like mutation application state is the most challenging thing.

09:43 It is.

09:44 It's all right for a simple hello world apps, but if you write something really complex, there are a lot of tons of libraries, like Redux probably the most forbidable there is block for Flutter. So it's a really challenging problem. Yeah.

09:59 And I've been working like I said, I've been exploring and trying to learn some Flutter to see if it makes sense to work with. And the state stuff about it is crazy. It's really difficult to figure out kind of where does this fit in my application code?

10:12 Yeah, sometimes you just want to take something and write like a simple app.

10:20 Don't bother with this state. Yeah. It could be really challenging.

10:24 There are a lot of questions. Why would, if we're talking about react like rerenders all the time, what's going on, is it all right to use this or that? So it's kind of like if you look at any event, trivial app in react or Flutter, it's pretty complex right away. And we're not talking about backend because you have to fetch data, like synchronized data with the database on server side. Right. So it has even more complexity, like having like a backend.

10:59 Yeah, for sure. You got to create all the APIs and then you somehow got to keep them in sync. Then you've got to do security from the front end to the back end, and there's a whole bunch of stuff. So just having a exactly single app that just has all your code, all your state running is really convenient.

11:13 Yeah, I mean, I don't remember exactly when we transition, like we developers transition to the common concept.

11:24 Those apps should be made like frontend and back end.

11:28 So we abandoned the idea of monolith or like, maybe because they are not scaled. But you know what actually the idea behind flet, so we're not trying to pursue a framework for building app service like millions of users. Right. So if you build like a line of business app and you have a huge developer team, maybe you don't need that framework. But if you're doing something small to serve like hundreds of users, it's all right to assume that you get memory. You can be a little bit slow here, so you can lose a little bit of your requirements.

12:08 Yeah. And I think it's probably worth just taking a step back just for a second and talking about Flutter and how it runs. Because while some of these things you're saying are true, a lot of this would be running on the client side. So that's fine. It's running on the desktop app, it's running in your web browser, but as a sort of a front end type of thing or whatever. Right. It's not so server focused.

12:28 Yeah, it depends on the application. Exactly. So if you write in a game, let's say everything is running on the client. Right. So most of business applications. I don't know, like admin panels or tooling.

12:42 Yeah, I just need a dashboard that shows me the recent orders, and I need to click them off to turn them to say we've finished them or they're pending or like that kind. It doesn't have to be Netflix level of design. You just want something quick and get it up and share it. Right?

12:56 Yeah. And in these apps, if you look into these apps, every click on UI, actually it's a call to the back end. So if you write something that can work on a mobile, like on a desktop, yeah, it's a standalone app. Maybe it requires some service, like for authentication, but if it's mostly standalone app yeah, you don't need back end, then Flutter is great, et cetera.

13:21 Yeah, so if you look for people who are listening, if you go to Flutter Dev, you can see some of the apps that are in the App Store with Flutter. And there's some really nice ones here. You've got the BMW Car app, you've got Stadia, you've got whatever the heck is called Google Pay. There's a showcase you can go and they actually talk about the different apps that are up here. Google Pay, Bite Dance, ebay ,Irobot.

13:44 Like there's legitimate irobot. Oh, nice.

13:47 Yeah. Irobot.

13:49 I got this airplane.

13:52 There's a question in the comments. We'll get to you in a minute about that actually a bunch of apps. And then you can also go and see that there's a thing called it's all widgets. As you'll see, the way in which you design these apps is code first, and you create these things called widgets. You have some interesting ideas around that, but yeah, you can flip through and there's just tons of apps. So here at least the ones people submitted, there's like 3000 apps in the showcase. It's pretty well used project, right? So we have Flutter, and it's not like react native or something where it puts HTML into your code, but it kind of is powered on top of the HTML engines. It runs by using an HTML canvas, but then it just completely does its own rendering to that like 120 frames a second type of render. But the idea is it's supposed to be completely in control of the pixel so that it looks pixel perfect across all the devices. That's their selling point, and you can see how well they go. But until recently, I thought the only way to program that was Dart. And then I learned about your project, Flet, and I got to say, I'm not the only one who thought it was pretty cool. Out in the audience we've got Abe says, I love you man, thanks for creating Fletch. And then there's another nice, thank you for your support, there's another biggest fan and so on. So people definitely appreciate this project. So what is the story? I gave my limited experience with what Flutter by default is also, we mention this, but it's worth just emphasizing once again, Flutter compiles to different targets. Flutter runs as a JavaScript app on the browser, but it compiles natively with ahead of time compilation to execute on the desktop and on mobile. Right. So it's not just running some sort of web interpreted type of thing. It's literally compiled in native code on the other platform.

15:44 This portion of Talk Python to Me is brought to you by Sentry. You know, Sentry. As a longtime sponsor of this podcast, they offer great air monitoring software that I've told you about many times. It's even software that we use on our own web apps. But this time, I want to tell you about a fun conference they have coming up. Sentry is hosting DEX Sort the Madness, the conference for every developer to join as we investigate the movement and trends for a better and more reliable developer experience. What is this madness, you ask?

16:14 It's the never ending need to deploy stable code quickly. Come to DEX to engage with developers who will share their epic fails and their glorious saves. Since we can't fix the madness, but they can start sorting through it with you. Register today to join in San Francisco or attend virtually on September 28 at Talkpython.fm/dex. That's Talkdex. The link is in your show. Notes thank you to Sentry for supporting talk Python to me.

16:46 Tell us about Flut. This flet the fastest way to build Flutter apps in Python. So exciting. What is this thing?

16:53 All right, I have to admit, maybe the current title a little bit clickbait.

16:59 There's a whole thing about marketing open source projects and gaining momentum.

17:03 Yeah, I'm not going to hold against you.

17:06 Yeah, I was thinking a lot about how would I tell people what I'm working on? Like, but heck, why not? Maybe we're not building Flutter apps per se, but we help to build your Flutter apps. What if that is not Flutter apps? So, yeah, I can say, yes, you can build Flutter app in Python, and it's good, flet it's not just about replacing all the widgets, all the power available in Flutter, like, to Python space.

17:36 It's not we trying like in in Flet. We try to cater all these to present all those widgets and their combinations to biden users in a very digestible form, like Flutter.

17:53 Those widgets, they're very highly specialized. In Flutter, there is a widget for padding, there is a widget for opacity, there is widget for debt. So it's like if you try to write something like real, you will get this letter like widgets. It could be really challenging to work with this fleter and in flet we are trying to combine some widgets to flatten this hierarchy to make people more productive.

18:23 I've been trying to look around the Flutter side, and I'm not doing very well while we're I'm talking for an example, but the way that you write code, the Dart code version and the Flat code version the Python version is some UI frameworks have kind of a designer, right? Think Xcode and Storyboards. Think Visual Basic or Windows Forms or WPF, like where you can see it and you can drag things around. Flutter is very code focused on using these widgets. So you might create a list tile, and then you would have the contents equals a list of rows and the row object you're allocating or creating there has like a list of things that are buttons and you see almost the hierarchy on the screen, right?

19:09 Yes.

19:10 And in some sense, programming and flat feels a lot like that. You can sort of see on the home screen that there's this place where you're adding going to a page and adding a row, which takes a list of icons and so on. But it sounds to me like you've also done some work to build larger building blocks than just that. Right? You call them components and not just widgets.

19:30 Yeah, well, definitely to work with these frameworks, you have to have pretty good sense of imagination. You put these controls and you have to imagine who will be on the screen. And also Flutter has like hot reload, so you can square me and be fast. And there is also a project, Flutter Flow. I looked into that project and it's really nice. It's a new startup. Maybe you can cover it in some of you.

19:56 What's it called?

19:57 Flutter Flow. It's like web flow.

19:59 Flutter Flow, like that?

20:01 No, like flow.

20:02 Oh, I see. Flow like that. Got it. Yeah. Flutter flow. Okay.

20:05 Yeah. Here you go.

20:06 Interesting.

20:07 Okay, so this is news to me, these guys. So, yeah, you can drag and drop and they produce a flatter, like a package like this.

20:16 I see it's a UI designer and it will generate the hierarchy of widget. Probably it writes the codes behind the scenes for you or something like that. Right?

20:22 Yeah.

20:23 Okay. Wow, interesting.

20:24 Okay, we have something in our roadmap as well, so we're going to make something very similar, but instead of like flutter code, it will be generating like black and gold. So it's going to be interesting as well. So, yeah, components. So we called them controls. We call them controls. People asking about why control? Like, why not call them widgets? I don't know, maybe I didn't use the term widget a lot at the time, but it's historically maybe it's because of it's coming, like, from design to replicate asp.net web forms.

21:03 Yeah, that was the terminology there.

21:04 Sure, yeah. Controls and WPF. Windows presentation foundation. Also like Controls and the Xamarin. Controls.

21:12 You've been swimming in this terminology, so here it is.

21:14 Right, so yes, controls. Again, it's not like one to one like reflection of Flutter widgets. We're trying to be creative, so we try to have some premium, you know, like what we like to put into control. So we don't want them very generic. We don't want them very complex.

21:35 And actually, it's an interesting thing if we talk about paradigm, it's reacting. Flutter, they're like declarative style programming. And we are converting these back to Imperative style. So you can find an article on Flutter website describing the differences and why it's cool to build UI from the state. But with Flet, we are going back to invert style, Xamarin style right, okay. Where you change control provenance.

22:07 And they have a state yeah, like a dot text equals type of model.

22:14 I think maybe the best way for us to understand this, there's a ton of questions about how it runs. Like, does it transpile, does it compile? I want to get into that, but I think the best way for us to set the stage for that discussion is let's talk through your tutorial. Okay. Because that will cover a lot of the capabilities, some of the programming model and so on. And if people drop over to Flet.dev/docs and click on the tutorials, you have the obligatory to do app. But the one that looks interesting to me is this calculator app.

22:46 Here's something that looks literally like the one that I have on my iPhone. It boggles my mind that a trillion dollar company cannot put a calculator on their larger version of their iPhone. So I can't say it looks like on my iPad one, but this would run on the iPad as well.

23:02 But this looks something I would really interact with. This is built with flet running on flutter with Python. So let's go. And what's cool is you can find a live demo because Flutter runs on the as, a single page app in the Web, it runs on iOS, Android runs on iOS, and Android, it runs on the desktop. So if I say five times ten. Granted, it's a calculator, but it's pretty neat and it's just one of the deploy targets. Right. So let's talk us through. First thing I can. pip install Flutter. Do I have to have flutter?

23:34 There's like, quite a series of steps to set up your machine. To be a Flutter dev machine, it's got to have like, iOS simulators, potentially, and the Flutter and Dart SDKs. All of that is a prerequisite to this, right?

23:45 Yes. You know what? Actually, it's also a huge obstacle. Like, if you want to start doing Flutter, I have both Windows and macOS machines at work. Then you have to install a lot of things to start doing something like special on macOS, it's Xcode. You know something, I'm still trying to figure out the whole bunch of tools you need, especially for deployment.

24:09 So flutter actually comes with this thing called flutter? I'll put up a screenshot of what I get when I run it. I'm running it right now and it's still running. There we go. Here, hold on. I'll put this up so people can see.

24:22 Sure.

24:22 So I'll try to include a screenshot or link to this, but it's like check that Flutter is installed, check that the Android tool chain is installed. Check that Xcode installed. Check that Chrome. Is there Android Studio, IntelliJ or Vs code? That there's hostage like there's a bunch of steps to make all this happen, right? So we still need to do this. So that's my question is I still need to go through the steps to generate like the Flutter configuration on my machine.

24:46 So I have to see you have ideally green with because I have some gaps.

24:53 I didn't install INTELLIJ.

24:56 So in Flet, this client part, it's a Flutter app which knows how to render, let's say, JSON tree like page or UI presentation in JSON format. So it knows how to render it and it has like a final functionality. So it's compiled, it's recompiled for all the platforms, like Windows for Mac and these Executables, they included in Python wheels. So when you install Flat, it basically downloads as a part of a will it download Flet client. We should Flutter like compliance app and it downloads Flet server.

25:36 So I might not actually need to do this.

25:39 Well, yeah, you don't see it. I mean, you can see it in locks or if you go and see site packages of your fight and installation, you'll see all those executables.

25:48 Okay, interesting.

25:49 Yeah. That's why you need nothing, you know.

25:52 That's fantastic.

25:53 Yeah, it's for desktop, for Web, like compiled flet or Web app is embedded into Flet server. So it adds another two megabytes of Executable itself.

26:07 So, yeah, we have embedded Web part and you download either Linux, Windows or Macros clients with your wheel.

26:15 Right, okay. Yeah. The wheel knows which platform it's being installed on.

26:19 Yeah, exactly.

26:20 Yeah. Let me check how big this thing is. I went through your example and that we're going to talk through and I compiled it to a Mac app application and it's 38 megs. That seems totally reasonable for me for the base runtime, basically.

26:35 Oh yeah, I'm frozen.

26:38 I was sorry, I was just thinking about it. I was just thinking a lot, that's all.

26:43 Yeah.

26:46 For macOS it's the biggest, like 30 something. Like for Windows, it's probably the smallest size, maybe not news per full units.

26:53 Yeah, but when you compare that, say to an Electron app, an Electron app is very large compared to that.

26:59 Yeah, because it packages browser. So you have the same picture on all platforms. Right. So Flutter is nice because like you said before, it's same rendering engine like on all platforms skill something like even on Web Canvas. So you have the same picture on all platforms. And this is nice.

27:19 Yes, fantastic. It is. All right, let's talk to this. Let's talk to this example. So pip install flet, that takes care of all of it. I'm sorry, I derailed us talking about all the setup of Flutter and Dart and all that. And so in order to write code with this, I don't want to talk through too much code, but I want to give people a sense of what it feels like to write code with this. It feels like very much like kind of a Python variation with the difference that it's more imperative, as you said. So we would say from Flet import page and text, and you have a main method that is past a page, and then you just say add text and you set the value. You could set the background color, and then you just say run and well, hello world Flet. There you are. Right. But you have other controls. Like you have elevated button and then you have a bunch of layout.

28:04 You as the developer. Yes, because Flutter provides a lot of these. It provides row and column and containers and all of those things. You just have a way to talk to those from Python, right?

28:18 Yes.

28:18 How does that happen? What's the interrupt layer between Flet and Dart and Go and all those low level aspects? And then when I write Python code, how does that work?

28:28 So, yeah, it's a good question. Right. Because people are constantly asking about, like, during APK or IPA files from this stuff.

28:37 Those are the compiled output for what you ship to the App Store for people who haven't done that.

28:42 Yeah. So the way it works is the folding. In the middle of all these, there is a web app basically like written in Go in Go lang. It's called flet server or flat D for sure. And it holds in memory this current state of the page.

28:59 From one side of this server is language or this python library. Basically, when you do this page.add, it sends like json basically to this web server and updates the state.

29:14 I see. So when I do this, I'm working in Python, and the result is to build up this control structure, this widget structure, and then it sends over to this embedded web server that's native, that says, build this in Flutter now. Right? Something like that.

29:31 Exactly. So this Flutter client from other side, it connects to this server with WebSockets in real time. And there is like a bi directional channel between the server and the client. When you push changes from the language to this server, it sends an update to Flutter app. And when you click something on Flutter in Flutter, like, you do some type text in the text box, they sealed some advantage raised.

29:59 Yeah.

30:00 It sends back to server and server routes it back to python code. So, yeah, it's like three components, like client library language right now is fighting server and client. So it's like three things.

30:15 Okay, so when I execute my Python code, is that running on full CPython or is that running on some limited lesser thing? Like, do I have full access to all of Python while I'm here?

30:27 Exactly. And when we're talking about deployment this stuff to mobile devices. On the first stages, we're going to support this call web server driven UI approach. And yes, your code runs by real Python and you have access to all libraries. Yeah.

30:47 Wow.

30:48 Because if you decide to put this on a phone like Python, there could be limitations. Right. And most of those projects I went through Kylie and Beware project as well, beware Kivi, they do an absolutely amazing job packaging Python for mobile devices. But there are always like but mostly they encourage you to use pure Python modules. Right, yeah. Because if you decide to use, like, modules with native libraries in them, you have to make sure that those are compiled for Arm 64 architectures. Right, right.

31:25 Which gets really tricky sort of related to that out in the audience. Maybe the first question we'll take for you get to some of the others is, can we use other Python packages with flet? Like, can we run machine learning code on the click of a button? Ask Raul.

31:38 Yes, absolutely. And the idea of Flet was not, like, to be a Central Park like in your app, but to be on the side to add UI to your application so you can make your app live. And goal was, first of all to add, like, web based right now, so you can share your app with your colleagues, with your team and your customers. So, yeah, absolutely. You can use any libraries, but we lack some visualization controls compared to other tools, like streamlit, for example. Like for scientists. Sure, absolutely. Or there is another project.

32:16 Like dear Py Gui. I've had both of those groups on the show before.

32:22 Yeah, which is amazing. Like for very fast visualizations that wouldn't be there.

32:28 Probably like yeah, right. More of building interactive applications, perhaps, with low latency.

32:35 Yeah.

32:38 This episode of Talk Python is brought to you by the IRL podcast, an original podcast from Mozilla. If you're like me, you care about the ideas behind technology, not just the tech itself.

32:50 We know that tech has an enormous influence on society. Many of these effects are hugely beneficial. Just think about how much information we carry with us every day through our cell phones.

33:02 Other tech influences can be more negative. I really appreciate that Mozilla is always on the lookout for and working to mitigate negative influences. A tech for all of us. If those kinds of ideas resonate with you, you should definitely check out the IRL podcast. It's hosted by Bridget Todd. And this season of IRL looks at AI in real life. Who can AI help? Who can harm? The show features fascinating conversations with people who are working to build a more trustworthy AI. For example, there's an episode on how the world is mapped with AI, but it's the data that's missing from those maps that tells as much of the story as the data that's there. Another episode is about gig workers who depend on apps for their livelihood. It looks at how they're pushing back against algorithms that control how much they get paid and how they're seeking new ways to gain power over data and create better working conditions for all of them. And for you, Political Junkies, there's even an episode about the role that AI plays when it comes to the spread of disinformation around elections. Obviously a huge concern for democracies around the world. I just listen to the Tech That We Won't Build, which explores when developers and data scientists should consider saying no to projects that can be harmful to society, even though we do have the tech to build them. Does this sound like an interesting show? Please use the link Talkpython.fm/IRL to subscribe yes, you could search for it in your podcast player, but use the Link Talk Python FM IRL to let them know that you came from us. The link is in your podcast player. Show notes. Thank you to IRL and Mozilla for supporting Talk Python to me, I feel like we kind of answered this, but I think it's also maybe worth pointing out. Tuhar asked, is this a transpile to Dart project? It sounds like definitely no. It runs in CPython, and it serializes the UI to this other part of its process. Is that right?

34:58 Yeah, there is no transpiling.

35:02 I know what people talking about. Like, I saw a lot of horrible implementations like transpiling, rust to dart, dart to rust, fighting to all these guys. I mean, it's going to be a fragile solution, unnatural to my mind.

35:18 Well, as soon as you say, well, can I use this library or that library, the answer almost is always is no. Right. If you think of something like Sculpt or Python, which is like Python in the browser, but transpile the JavaScript well, how do you use these other libraries? There's no way to really you will hit the wall.

35:34 You will hit the wall at some point. So if I were like an engineering manager, I would never go for that in a real project.

35:41 Yeah. Except for maybe some really special tools or use cases, but yeah. All right, moving on down the line of our tutorial here, one of the things that you have to keep in mind and focus on when you're working with Flutter in general, and Flet with Python is how do you build out these layouts and how do you position the controls? And it looks like if you know one, you kind of know the other pretty well. So, for example, here we're adding a row whose control is like, the output, but then the next row is you say the controls are the first row of buttons, and then another row whose controls are the next row of buttons. And you just keep building this up and you pretty quickly end up in something that looks like a kind of a real basic calculator app, and then you get into containers, right? Where you've got a container contains like a column that has each row, and you kind of like, put it together like this. Right. But I guess the question I wanted to ask you here is how similar or different is this than flutter? It feels to me like it's pretty similar, at least in the Zen of it.

36:39 Yeah, exactly. So it was based on microsoft flew into a library and for making new layouts, there was like, stack. So stack could be like horizontal or vertical. And here we decided to do not bend flutter into something else, but go with the same terminology. So stack is like a bunch of layers, and we use row and column and all this stuff, and it feels good.

37:11 And columns inside, rather than having stack everywhere, or like div, if you will, like div and semantics to dive by classes, it's still formal, at least. So you can distinguish this visually.

37:31 Right. One of the benefits of structuring your code like this, and you do touch on it in this tutorial, is that you can build little reasonable segments. Right? So, for example, if you've got a row that has a column of stuff and then another row, more columns, you could take just that column or even build up just one row at a time and put that into its own function or its own class. And then sort of include that kind of in the control sense of the traditional Visual Basic Windows forms.

37:59 Now I have a bigger thing to drag around. But in this world, drag around is just like write code to create it and put it in the right spot.

38:06 You know what?

38:07 I've been really amazed because it works so good. I understand the first question people ask, like, how would I make my own other component? But you know what? You can do this user controls made of these primitives flet provides, and it was pretty well, they isolated. They can handle events inside them. If you put few of those user controls on the beach in different places, they will be all behaved separately. And it's so nice. I mean, maybe it's side effect.

38:44 I wasn't thinking about that while doing this stuff. But it's so good. So you can build yeah.

38:51 In these controls, do they have their own state?

38:53 Absolutely. Yeah.

38:54 That's awesome. So you could have like, put information about it and some buttons to interact with it and they sort of keep track of just that little block. Right.

39:01 Even better. Whatever you do on flet UI, it's getting persisted right away. So let's say if you have a huge form and you type something into this form and you do refresh in your browser, all the information will be there after refresh.

39:19 And for a desktop app, say, if I close it and open it again, will it remember?

39:24 It depends. So right now it's a standalone app. And when you open it again, it will log another instance of this Flet server with the Clean state.

39:34 Right. So it kind of loses the state. Yeah. But I suspect you have access to the file system somehow. You could save it if you wrote the code to do it.

39:43 Right, yeah, sure. We're going to make it.

39:45 Since this is Python executing, could I do like SQL Lite?

39:49 Absolutely.

39:50 And say SQLAlchemy and figure out, like, I'll put the file in my user's app data directory in the profile?

39:58 Absolutely. Right now we're working on a more advanced example with using Database. I mean, not advanced, but with using the database. And also we're going to add data table control for working with Greece.

40:12 Nice. Because it's recent right now.

40:14 Yeah. Related to that, out in the audience, Roll asks is the way it looks and feels, is this Material UI? Can we change the theme and styling? I know in Raw Flutter, you can have buttons out of the Material design, or you can have buttons out of what do they call they call it Darwin or whatever, the iOS equivalent. There's like, different places you get the buttons to look different. And what's the story around that?

40:37 So it's a good question.

40:39 Again, I came from Microsoft World, and there they have Fluent UI and it looks different. And what actually Flutter was my first experience with Material UI. And you know what I see, honestly, even compared to Fluent UI, is pretty solid. And I would say they have a strong commitment to this Material UI strategy. And it looks really nice. You don't have to sell people what it is. I would probably need to sell people Fluent UI, but I don't need to sell people like this material. It's nice right away. Looks nice. It looks really soft. But for different styles. Yes, you can style. There are limited styling features right now, like in Flet, but we got to pull more. And also we will be doing this adaptive controls.

41:32 Oh. So if I run the app on Windows, it might look different that it might be Material versus hovering on macOS. It'll be whatever the heck is the Darwin variant.

41:42 Yeah, exactly. So, yeah, actually, I don't know how to share a link with you.

41:48 Yeah, there's a private chat here and that's streaming through it, and I'll pull it up for us.

41:52 Yeah, I will show you how it might look like.

41:54 Oh, fantastic. While you're looking it up, I just also want to point out for event handling is a super important thing in UI. UIs are basically get the stuff on the screen and start handling events and updating the UI accordingly. And so in Flet, all you got to do is, for example, for your button, you say on click equals, like a function called button clicked, and you get pass the data.

42:16 And you could also associate, like, here's, the indicator or the data of the button and when it's clicked, pass that over to it, like, for example, the action to take. And those can even be lambda expressions, right?

42:26 Oh, yeah, absolutely. If you manage to put it in the single line.

42:31 So Lambda is in python limited somehow.

42:35 Yeah, they're single lines. They're like expressions of that language.

42:40 I use it a lot, like print something this event to see if it's being called.

42:47 So I dropped you a link to Fluent UI.

42:51 It's a library for flutter. It's really cool. And there is a web demo even like and there is also, like, flutter macOS.

43:02 I'm dropping your link as well.

43:04 All right, cool.

43:05 So, for mobile apps, we have a lot of controls, like this Cupertino library built into Flutter.

43:13 That's what it's called? Cupertino, yes. Not Darwin Cupertino.

43:16 Yeah, right away. So, yeah, I get it. For many users, it could be really to see a Fluent UI, fluent, let's say, toggle button on iOS.

43:29 It looks fantastic. Yeah.

43:32 When you open an app and it clearly looks like it doesn't belong to the platform, you're like, this is weird. What is this?

43:38 It doesn't bring the right impression and the stuff that you're showing on the screen and I will link to the examples. I can be convinced that this is a proper macOS app, as well as proper Android or whatever it is you're looking at. Right. Beautiful.

43:53 Well, if you like a specialist, you can definitely see some odds that it's not, like, native.

43:59 Yes. You're like, oh, that button is not quite yeah, it's drawn.

44:05 Right.

44:05 The way Flutter works is it doesn't pull in the underlying window widgets out of your OS. It literally redraws them from scratch. But they try really hard to make it look the same.

44:14 You know what? It's always a debate. If you go somewhere, like in Harton years, you'll have these debates what would be like because React Native is about displaying native controls. Right. But is it a good thing when you precise design and I work with designers and big companies. It could be a problem if you cannot deliver the size of design.

44:36 Yeah. This gives you more stability across platforms for your look and feel. A question in the audience, which I think we're going to get to in a second.

44:44 Hey, Sugato, can you create mobile apps with Flet? And I don't know if this is on the roadmap or this is already ready. We might have to save a bit of the conversation for the roadmap discussion.

44:54 Sure. So, as requested, multiple times by our users, I put this I assembled this model strategy. Michael, if you can open this in a blog. It's in a blog.

45:06 The blog got you. Okay.

45:07 It's blog flet mobile strategy.

45:09 There you go. Cool.

45:11 So it's not like we forgot about mobile devices. No, quite the opposite, where I'm always thinking about mobile experience. We are getting there. Maybe slowly, but we're getting there and we will be there. So we want to deliver not just the way you can build like APK. We want to enable developers to quickly test, for example, these experiences on mobile devices because it's a complex process, it's very complicated. Yeah, like packaging and signing and publishing, reviewing, et cetera.

45:45 Many companies, they are moving to this server driven approach like Airbnb leaders so they can bypass like App Store reviews and push some new functionality right away from their web servers. So we're going to explore this approach first and yeah, definitely we will look into packaging everything into mobile package like, I mean Python compiled forearm 64, this go server compiled for Arm and so making this Sandwich, working on mobile and packaging it and delivering to mobile device.

46:27 Like the last this is the biggest challenge for you. All right, it's challenge it's not quite there yet right?

46:33 It's challenge. Yes, it requires you to be a low level programmer.

46:37 Yeah. And Sugato actually has a follow up saying cool PyTorch is trying to make model serving available with React and using flat could be a very accessible alternative.

46:47 I will look into that.

46:49 Yeah, that is interesting.

46:50 It's a fancy topic, right?

46:52 Yeah. So for now, out of the box, I can package this up as a desktop app or a mobile app and desktop means Linux, Windows, Mac, OS.

46:59 So yeah, just to make it right, you can package it as a desktop app, windows, Linux, Mac and there's a web app on the mobile experience you can use it as power BWA app.

47:12 Right, so you package as a mobile app and then you install that as a progressive web app and then it's kind of good to go.

47:18 Okay, yes, but not like a native mobile experience. I'm working on it right now and there is a branch of that we can always observe live, real time. Yeah.

47:30 Okay, very last thing, there's some stuff we talked about the events you have in there. You talk about how to package it up as an executable and basically that's Py installer and then you have its steps on how to package it up as a web app as well. Cool. So let me ask you maybe I'll pull up the roadmap but that is the background. Is this ready for people to build apps with? Like what's the state of flight? It's very exciting and it looks quite capable but should people be using it yet? Should they be giving feedback or where are you with us?

48:00 So basically like a second iteration so we've had this proof of concept like page let as a proof of concept and despite a second iteration it's still zero point something. So there could be I don't expect any drastic changes into API but there could be some breaking changes going forward and also to have a complete picture, I would love to have mobile experience to complete the cycle like web, desktop, mobile but in general it's pretty ready to build these apps with apps. It made for like simple app. Yeah.

48:39 We're talking the forms over data, the little portals and the dashboards that we talked about at the beginning, right?

48:44 Exactly. So I think it's pretty much ready for prime time. Why not?

48:48 Nice.

48:49 The old modern Southway is beta.

48:54 Always evolving. What's the contributor story? Are you open to having other people submit PRS and help out with tutorials and stuff?

49:04 Absolutely. All people welcome. And I know it's challenge for some projects, but I really want to spend time on that. Working with people, writing guidelines, etcetera. Establishing rules. Absolutely.

49:19 Because it's not an open source project if you're not accepting PRS or if you don't work with people. It's like published source project for sure.

49:28 Yeah, exactly. It's source open, not open source. That's right.

49:31 Yeah, I know what it is.

49:33 Let me put an idea out there. You have two really great tutorials here. Are you willing to accept more tutorials?

49:39 Sure.

49:40 So over on the Flutter.Dev/Learn section, they have some tutorials over here. Maybe it would be fun if people could try to create the equivalent of these tutorials. But in Flet, I don't know, that might be a cool thing to create and see how they come out.

49:55 Yeah, it's a nice idea, but you know, maybe it's not even worth a separate tutorial in flet it could be like a single page of code.

50:04 Yeah, absolutely. So when I look at this OK, take a look. When I look at this, this looks a lot like a Dart version of Flet. Or Flet looks like a Python version of this. Right. It has this same hierarchical code type of thing. There are some differences. We talked about like state and stuff, but it looks really similar. So if I am a Flutter developer, how easy is it to go to Flet? And if I learn Flet and like, I really need the true native version, how easy is it to go to pick up Dart and then go to.

50:35 Flutter if you already have Flutter developer? Well, the only requirement there probably is should know Python right? At the moment. Yeah.

50:43 I'm assuming that you know Python. Yeah, sure.

50:46 Yeah. And I think it's pretty acceptable to write something in Flet. I especially love the idea of using Flet as a prototyping thing because you can easily do something over weekend.

51:00 It is so much easier. It's so much easier. People who have not tried to write in Dart, I feel like I am constantly chasing what cost means. I didn't mean to double it up. Constantly chasing cost around. I do not understand this language. So you might have a class which you're passing as const.

51:18 Maybe this is why I complained as well.

51:20 And you might need to take away that const. But then it's required to have constant other places. But then like Cascade.

51:26 Okay.

51:27 There's like five places I got to either remove or add comps because I just want to change. Like, this is driving me insane and I don't see any of that in flet, and it makes me happy.

51:36 It sounds like you've been on this door.

51:38 Yeah. Because maybe you're a perfectionist. You're trying to avoid all those warnings.

51:43 Yeah, it's a hassle. So the prototyping story makes me think, like, maybe you could build that stuff really quick because you don't have to deal with all those little weird language edge cases.

51:53 Yeah, and I had a few customers, like, users on discord time from other worlds. So yeah, the way back to from Flet is also possible. Why not? I mean, like, if you grow up, grow out of this Flet thing, you need something really unique, like animations, like some weird transitions. So why not? So you can go and learn Flutter and dive into this world.

52:22 Yes, I agree that they should be pretty transferable. Certainly knowing one will help you know the other. No doubt about it.

52:28 Absolutely.

52:29 The way you think is real similar. So John asks, how do you handle Android and iOS permissions entitlements? It sounds like you're not quite there yet, but maybe you have some ideas on where that might go.

52:38 So, as right now, actually, we are not delivering this anywhere, but we already built in iOS Android packages as part of our CI process. So they're already there and they're already published into App Store, ready to be sent for review.

52:59 Do you just put the entitlement in that compilation target? Basically, yeah.

53:03 So all these permissions right now, they have to be put into this pre compiled Flat client app. Or right now we're working on a Flutter widget. So flutter widget called flat. So you can embed the Flet experience into any existing Flutter app.

53:25 So that sounds like you're doing it in reverse. So you create a build a Flutter application, a native one, compile it. But what you can do is you can create a section of your UI that is flet.

53:37 Yeah, exactly. Imagine you already have an app renovate it furthered or native. Native app, like four weeks. You can replace part of your app with this Flet driven by server side called written Python.

53:52 Cool. In that scenario, where does the Python run? It runs on the server.

53:57 On the server? Yeah.

53:58 Okay.

53:59 And you can actually having this app, your mobile app, deployed to client devices, you basically have to redeploy Python code in the server to deliver new experience, new UI, new clicks, whatever.

54:14 I don't know how relevant this is, but it might be. Have you looked at PY script?

54:18 Yeah, sure.

54:19 If some of the challenges is like, how do I end up running the Python part? Could you web assembly your Python in and get it native and get it locally, like for offline version?

54:31 So, yeah, people asking there are a lot of technologies right now, right? If we're talking about my script and the web assembly. It makes sense for web apps. Right? You know what, and actually Dart itself is being compiled. Okay. Right now it's only partner in the web assembly, but Google has plans to compile Dart Flutter apps into web assembly as well. Okay, so it makes sense for web for mobile, it should be native code.

55:02 Yeah.

55:03 So for mobile it should be native code. I'm not sure. Maybe tomorrow we'll see some engines. Translating. This was into native cold.

55:12 Yeah. If you could run WASM in your native application on iOS, then maybe this has opened some kind of door.

55:20 Again, as far as I know, it's really restrictive environment, mobile phones.

55:26 Yeah.

55:26 It's not the same as saying, well, sure, you can use Py Torch or Request or whatever.

55:30 Yeah.

55:31 Okay, well, I think we're just out of time, but I want to congratulate you on a super interesting project. It's really cool.

55:39 Thank you very much.

55:40 Yeah, you bet. Now, before you get out of here, you got to answer the final two questions.

55:43 Sure.

55:43 If you're going to write some Python code, what editor do you use these days?

55:47 Nice. I love Visual Studio code. Yeah, I mean, I would love some people recommend trying PyCharm and I believe it's a really great ide. Maybe I will look into that. Especially if it's like it's free for open source projects. But yeah, right now it's the escort. It's great.

56:05 Oh, well, I can tell you your calculator tutorial works all the way through on PyCharm because I just did it right before show, so it's all good now. Also notable pipe package.

56:19 Obviously Flat is a good one, but other libraries you may have run across like, oh, this is cool, people should know about.

56:24 Well, for me it's a really challenging question because I'm a new guy to python and I don't know, I don't have any really any favorite packages.

56:36 Yeah, well, we can throw a Flet out there. How's that?

56:41 It's not allowed. You pip install it. You can say that if you like.

56:45 Yeah, and you know, actually it's non trivial and I spend a lot of nights trying to put this wheels right to include this binary. So it's pretty cool. And if you guys have some questions like how would you repackage those wheels during the CI process. So I would be really too happy to share my experience.

57:08 Awesome.

57:09 Because I learned a lot of packages and the internal structure understands how it works. Basically zip files, what's inside.

57:17 Awesome. All right, well, final call to action. People want to get started with Flet. They want to build an app with it or maybe even contribute to it. What do you tell them?

57:25 Absolutely. Go and try hop on this course. I'm always online. Let me know what you like, what you didn't like. We're always listening. So indefinitely contributions welcome.

57:39 Awesome. And you at the bottom of the homepage of Flet Dev. You've got a subscribe to our newsletter. I guess people can get updates on the project if they want there, right?

57:46 Yeah. I haven't sent anything there yet, but there are a couple.

57:52 It's all about building up the group of people who are interested in what.

57:55 You're doing, so it's all state discord right now.

57:57 Yeah, got it.

57:58 So it's pretty active. Yeah.

57:59 Good to know. All right, well, once again, super exciting project. I've ranted on this before.

58:06 Having some kind of UI framework that is really modern and fresh in Python is super important. Flet is is quite interesting in that space. Having a very viable mobile story for Python also really interesting. So as much as you bring those things forward, more power to you. We love it.

58:23 Yeah, sounds great.

58:25 Yeah, thanks.

58:26 Thank you, Michael. Yeah.

58:27 Bye bye. Thanks, everyone, for listening.

58:29 Bye.

58:30 This has been another episode of Talk Python to me. Thank you to our sponsors. Be sure to check out what they're offering. It really helps support the show. Join Sentry at their conference, DEX Sort the madness the conference for every developer to join as they investigate the movement and trends for better and more reliable developer experiences. Save your seat now at Talkpython.fm/dex. You care about the ideas behind technology, not just the tech itself. And you know that tech has an enormous influence on society. So check out the IRL podcast. It's hosted by Bridget Todd, and this season of IRL looks at AI in real life. Listen to an episode at talkpython.fm/irl. Want to level up your Python? We have one of the largest catalogs of Python video courses over at Talk Python. Our content ranges from true beginners to deeply advanced topics like memory and Async. And best of all, there's not a subscription in site. Check it out for yourself at training.talkpython.FM. Be sure to subscribe to the show, open your favorite podcast app and search for Python. We should be right at the top. You can also find the itunes feed at /itunes, the Google Play feed at /Play, and the Direct rss feed at rss on talkpython.fm.

59:42 We're live streaming most of our recordings these days. If you want to be part of the show and have your comments featured on the air, be sure to subscribe to our YouTube channel at talkpython/YouTube. This is your host, Michael Kennedy. Thanks so much for listening. I really appreciate it. Now get out there and write some Python code.