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're covering here today, Flutter,
many Flutter UIs can now be written in pure Python. Flutter is a very exciting development
in the GUI space for Python devs, and we have the creator, Fyodor Fitzner, here to take us
through it. This is Talk Python to Me, episode 378, recorded August 18th, 2022.
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 at Talk Python. 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.
Get 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 Assembly AI. 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.
Hey, Peter.
Hi, Michael. Thanks for inviting me to your podcast.
Yeah, absolutely. I'm so happy to have you on the podcast.
I'm Peter Feitzner. I'm working on this flat project.
So excited about your project.
Well, I'm excited as well. It's something new. Yeah, it's open source. I love open source. It's
actually, this project is a spinoff. It's like a second iteration.
You had a project called Pagelet, right? Is that what you're referring to?
Pagelet. So yeah, it was Pagelet. So it started as a kind of internal tool for making like, you know,
quick apps, like throwaway apps. And it was for web mostly. So it was like, it started like as a web
thing. And it was Pagelet. Then I shortened the name to Pagelet. And some guy on Sacker News
said that it's probably about like old gram, something like, or Postgres, PL. Yeah. So I got
confused. And I started calling it like Pagelet. So I didn't like the name. Yeah. And I did like that
it's only web. Yeah. Because, you know, the next step right after web, I started looking into like
doing desktop apps with this stuff and realized that actually the only choice is using web view.
And web view is really platform specific. So on macOS is one thing is like Safari. On Windows,
it's like either like web view one, web view two, which is quite a separate number, et cetera, et cetera.
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. So this page web was made on React. And I realized you cannot open it like right away in
the web view on Windows because it's this, you know, Microsoft Edge browser. So we have to add some like
poly fields, et cetera, et cetera, to make it work on Windows. So yeah. Then I don't remember the exact
moment, but probably I saw like an announcement from Google that they're releasing this like
Flutter, something like into production for web and desktop.
And I've become interested. What is that? You know, like, and I look into like Flutter thing,
you know, and I realized actually that it was, it's been on the market like for a long time and
mostly useful. Absolutely.
For, yeah, mobile apps. And,
I'd always kind of dismissed Dart as just kind of like a weird coffee script type of thing. It's like,
oh, 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 and 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 with Dart to build initially, I think it was just initially web apps,
wasn't it? Yeah.
And then they added mobile and then they added desktop and add the combination of those three
things is fantastic.
Exactly.
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 a tad about Dart and Flutter before we get into the Python side.
Sure. So I have to say, I'm coming from Microsoft world.
Okay.
From .NET. I've been in .NET like since the eldest, you know, so.
Since like the year 2001 or something, right?
Yeah. Yeah. I remember we were going through the language specifications and sent to us by Microsoft,
you know, like in the word Microsoft Word file. So at that time, so web, then web, I'm a JavaScript guy,
of course. Yeah. And then I learned like anyone else, like TypeScript and then Flutter.
Yeah. So my impressions about Dart are very, very positive. You know, it's so nice. I mean,
maybe it's me, but it looks and it feels better than TypeScript. Like to me, maybe it's because of,
Yeah. They have a great tooling in Visual Studio Code, maybe. Yeah.
But it felt so natural to write something in Dart. And especially, I love this, like this sound,
no references, you know, like where you can't have basically nulls. It's a really huge problem. Like
this nulls or nils or like, so yeah, Rust, like did, dealt with that, you know, there are no nulls. Go,
some of the way like in between. So, you know, this flat server is written in Go and in Go, you can't have
like null strings, but you can't have null references, like new references. But Dart is great. By default,
it doesn't allow nulls and it makes your app working as expected.
Yeah. And for people who don't know, Dart is out in the audience. Tushar 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 optional,
like 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?
Yeah. Yeah. You can see all different things in the Dart, like TypeScript, you know, like C#. Yeah,
I agree. But I mean, I would love to see many things like implemented in Dart, like transfer to
JavaScript with TypeScript, you know, like it's pretty easy to write. Yeah, it is. Before we,
if people are listening, we might not want to scare them away thinking they would have to learn Dart
in order to do this, right? Sure. The whole project that you are working on
Yep.
is sort of a, 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.
Yeah. 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 write that.
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, you know, like I would
compare Flutter to React. So if you come in from React, it could be easier to you, you know?
React Native. Yeah.
So yeah, you know what I, again, as a guy coming from like .NET world, I remember those times when we
were writing apps using like ASP.NET web forms, you know, stateful controls sessions, you know, on server
side. And now we translated to these stateless apps, like single page applications where the UI is filled
of like application state. And to my mind, this application state, managing application state,
like mutating application state is the most challenging thing, you know?
It is.
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, you know, like Redux, probably the most people like there is
blog for Flutter. So it's a really challenging problem, you know?
Yeah. 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?
Yeah. Yeah. Sometimes you just want to take, you know, something and write like a simple,
simple app, you know, like it don't bother with this state. Yeah. It could be really challenging.
Like, there are a lot of questions. Why would, why, if we're talking about React, like tree re-renders
all the time, you know, like what's going on? Like, is it all right to use this or that? So it's kind of
like, if you look at any, even trivial app in React or Flutter, it's pretty, it's pretty complex right away.
And we're not talking about backend because you have to fetch data, like synchronize
data with the database and server side, right? So it has like even more complexity, like having
like a backend. 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 backend. And there's all,
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.
Yeah. I mean, I don't remember exactly when we transitioned, like we developers transition to that
common concept, you know, like, like those apps should be made like, of like front end and backend,
you know, it should be like, so we abandoned the idea of Monoly or like maybe because they're not scale,
but you know what, actually the idea behind like flat. So we're not trying to pursue like
a framework, like, you know, for building apps serving like millions of users. Right? So if you're
building like a line of business app and you have a huge developer's team, maybe you don't need that
framework. But if you're doing something small to serve like, you know, hundreds of users, it's all
right to assume that you get memory. You can be a little bit slower here, you know, like, so you can
lose a little bit your requirements. 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. Yeah. It depends on the applications. Exactly. So if you write in the 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, you know? Yeah. I just need a dashboard that shows me the recent orders and
I need to like click them off to turn them to say we've finished them or they're pending or
like that kind of, it doesn't have to be Netflix level of design. You just want something quick and
get it up and share it. Right? Yeah. And in these apps, if you look into these apps, every click on a,
on a UI, actually it's a call to a bookend. Yeah. So if you write something like that can work on the
mobile, like on the desktop, yeah, it's a standalone app. Maybe it requires some service like for
authentication, but if it's mostly a standalone app, yeah, you don't need backend, then Flutter is great,
etc. Yeah. So if you look, if 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 it's called,
Google Pay. There's a showcase you can go and they actually talk about the different apps that are up
here. Google Pay, ByteDance, eBay, iRobot. Like there's legitimate...
iRobot. Oh, nice. Yeah. iRobot. I got this app, right?
There's a question in the comments, but we'll get to in a minute about that actually. Right.
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 3,000 apps in
the showcase, which... So it's a pretty well used project, right? So we have Flutter. Yeah.
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 pixels 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... Abhay says,
Fedora, I love you, man. Thanks for creating Flet. And then there's another...
Nice. Thank you for your support.
Yeah. There's another, you know, biggest fan and so on. So people definitely appreciate this project.
What is the story? I gave my limited experience with what Flutter by default is. Oh, also, we mentioned
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 a head 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.
This portion of Talk Python To Me is brought to you by Sentry. You know Sentry as a long-time sponsor
of this podcast. They offer great error 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? 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 28th at talkpython.fm/dex. That's talkpython.fm/dex.
The link is in your show notes. Thank you to Sentry for supporting Talk Python to Me.
Tell us about FLUT, this F-L-E-T, the fastest way to build Flutter apps in Python. So exciting. What is this thing?
So, all right. I have to admit maybe the current title is a little bit click-baity.
There's a whole thing about marketing open source projects and gaining momentum and, you know?
Yeah.
I'm not going to hold against you.
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 with help to build your Flutter apps. What is that if it's not Flutter apps? So yeah, I can say, yes, you can build Flutter app in Python and it's good.
Flutter app in Flutter app. It's not just about collecting all the widgets, all the power available in Flutter, like to Python space, you know? It's not. In Flutter app, we try to cater all these to present all those widgets, you know, and their combinations to Python users in a very, you know, digestible form.
Yeah.
Like Flutter. It's those widgets, they're very highly specialized in Flutter. There is a widget for padding, there is a widget for opacity, there is a widget for depth. So it's like, if you try to write something like real, you will get this ladder, like widgets. And it could be really challenging to work with this ladder.
Yeah.
In Flutter, we're trying to combine some widgets to flatten this hierarchy, you know, to make people more productive, you know?
I've been trying to look around the Flutter site, and I'm not doing very well while we're 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, you know, rows, and the row object you're allocating or creating there has like a list of things that are, you know, buttons. And it's just, it's like very, you see almost the hierarchy on the screen, right?
Yep.
And in some sense, programming in Flutter feels a lot like that, right? 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.
Yeah, well, definitely to work with these frameworks, you have to have pretty good sense of, well, like imagination, you know, like you put these controls and you have to imagine like what would be on the screen. And also Flutter has like hot reload, so you can experiment very 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 your...
What's it called?
Flutter Flow.
It's like Web Flow.
Flutter Flow, like that?
No, like Flow.
Oh, I see. Flow like that. Got it. Yeah, yeah. Flutter Flow. Okay.
Yeah, here you go.
Oh, interesting. Okay.
So...
This is news to me.
These guys, so yeah, you can drag and drop and they produce like a Flutter, like a package, you know, like basically...
I see. It's a UI designer and it'll generate the hierarchy of widget. Probably it writes the codes behind the scene for you or something like that, right?
Yeah.
Okay. Wow. Interesting. 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 button code instead. So it's going to be interesting as well.
So yeah, components. So we call 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 term widget a lot at the time, like, but it's historically maybe. Maybe it's because of it's coming like from design to replicate these people.net web forms.
Yeah. That was the terminology there. Sure.
Yeah. Controls and WPF, Windows Presentation Foundation also play controls and the Xamarin controls.
You've been swimming in this terminology. So here it is, right?
So yes, controls. Again, it's not like one-to-one reflection of Flutter widgets. We try to be creative. So we're trying to have some opinion, 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. So, and actually it's an interesting thing. If we talk about Paradigma, it's React and Flutter, they're like declarative style programming.
And we are converting this back to imperative style. So you can find an article on Flutter website describing the differences and why it's cool, you know, to build UI from the state. But with Flutter, we are going back to imperative style, Xamarin style.
Right. Okay.
Where you change control provenance, you know, and they have a state.
Yeah. You can say like a dot text equals type of model. Yeah. So let's actually, 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? How does it, 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'll cover a lot of the capabilities, some of the programming model and so on.
And if people drop over to flat.dev slash 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.
Yeah.
Here's something that looks, it 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 my iPad one, but this would run on the iPad as well. But, but this looks something I would really interact with. This is built with Flutter 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 and Android. Oh wow. Yeah. It runs on iOS and Android. It runs on the desktop.
So if I say five times, you know, 10, like 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 like how to, first thing I can pip install Flutter. Do I have to have Flutter? Do I have to do, there's like a, 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's a prerequisite to this, right?
Yes. You know what? Actually, it's also a huge obstacle. Like if you want to start doing Flutter, it's a, I have both Windows and MacOS machines. Like it worked.
Same. You have to install a lot of things to start doing something like, especially on MacOS, it's Xcode, you know, like something. I'm still trying to figure out the whole like bunch of tools you need. Yeah. Like for, especially for deployment.
But so Flutter actually comes with this thing called Flutter Doctor. I'll put up a screenshot of what I get when I run it. It's, I'm running it right now and it's still running. There we go here. Hold on. I'll put this up. And so people can see.
So I'll try to include a screenshot or link to this or something, but it's like checks that Flutter is installed. Check that the Android tool chain is installed. Check that Xcode is installed. Check that Chrome is there. Android Studio, IntelliJ or VS Code that there's hosts available. Like there's a bunch of steps to make all this happen. Right? So we still need to do this though. That's my question is I still need to go through the steps to generate like the Flutter configuration on my machine.
So I have to say you have ideally green list, you know, like, because I have some gaps. I didn't install like IntelliJ like it was that. So in Flutter, 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 for Windows, for Max and these executables that included into Python wheels.
So when you install Flutter, it basically downloads as a part of a wheel, it downloads Flutter client, which is Flutter, like combined Flutter app, and it downloads Flutter server.
Oh, so I might not actually need to do this.
Well, yeah, you don't see it. I mean, you can see it in logs or if you go and see site packages of your flight installation, you'll see all those executables.
Okay. Interesting.
Yeah, that's why you need nothing, you know.
Oh, that's fantastic. Yeah.
Yeah, it's for desktop, for web, like compiled Flutter web app is embedded into Flutter server. So it adds another two megabytes to like SQL itself. But so yeah, we have embedded web bar and you download either Linux, Windows or MaxQuest client with your wheel.
Right. Okay. Yeah. The wheel knows which platform it's being installed on.
Yep, exactly.
Exactly.
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 .app, a Mac.app application and it's 38 megs. That's totally reasonable for me for the base runtime, basically.
Oh yeah, I'm frozen.
You know, you.
Was I? I was, sorry. I was just thinking about, I was just thinking a lot. That's all.
Yeah. It's pretty, yeah. For macOS, it's the biggest, like 30 something. Like for Windows, it's probably the smallest cells. Maybe not news for the years.
Yeah. But when you compare that, say, to an Electron app. An Electron app is very large compared to that.
Yeah. Yeah. Because it packages browsers. 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.
It's clear, something like, and even on web, it's canvas. So you have the same picture on all platforms. And this is nice.
Yeah. Fantastic. It is. All right. Let's talk to this. Let's talk to this example. So pip install Flutter, 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 a very much like kind of a Python variation with the difference that it's more imperative, as you said.
So we would say from Flutter, 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 Flutter, there you are, right?
But you have other controls, like you have elevated button, and then you have a bunch of layout. I mean, you, like you as the developer.
Yeah, like row.
Because Flutter provides a lot of these, Git provides row and column and containers and all of those things. And you just have a way to talk to those from Python, right?
Yep.
How does that happen? What's the interop layer between Flutter and Dart and Go and all those like low level aspects? And then when I write Python code, how does that work?
So yeah, it's a good question, right? Because people are constantly asking about like doing APK or IP files from this stuff.
Those are the compiled output for the what you ship to the App Store for people who haven't done that.
Yeah. So the way it works is the following. In the middle of all this, there is a web app basically like written in Go and GoLang. It's called Flat Server or Flat D for sure.
And it holds in memory this current state of the page.
When you like from one side of this server is language or this Python library.
Like basically when you do this page.add, it sends like a JSON basically to this web server and updates the state.
I see. So when I do this, I'm working in Python and the result is to send, 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.
Exactly. So this Flutter client from other side, it connects to this server with WebSockets.
Yeah.
So in like in real time, and there is like a bi-directional channel between like this 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, you know, like you do some like type text in the text box, text field.
Right. Some event is raised. Yeah.
It sends, yes, back to server and server routes it back to Python code.
So yeah, it's like three components, like client library in language right now is Python, server, and client.
So it's like three things.
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?
Exactly. And when we're talking about deployment, this stuff to mobile devices,
devices on the first stages, we're going to support this so-called web server driven UI approach.
And yes, your code runs by a real Python and you have access to all libraries.
Yeah.
Wow.
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 Kyrie and the Beware project as well.
Yep. Yep.
Beware, Kivi.
They do absolutely amazing job packaging Python for mobile devices, but there are always like bots.
So mostly they encourage you to use pure Python modules, right?
Yeah.
Because if you decide to use like modules with native libraries and then you have to make sure that those are compiled for ARM 64 architectures, right?
Right. Which gets really tricky.
Sort of related to that out in the audience, maybe the first question we'll take before we get to some of the others is,
can we use other Python packages with Flet?
Like, could we run machine learning code on the click of a button?
Asks Raul.
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, you know,
like to add UI to your application so you can make your app live.
And goal was, first of all, to add like web-based UI, you know?
So you can share your app with your colleagues, with your team, you know, 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 like DearPaiGui.
DearPai, yeah.
DearPaiGui.
I've had both of those groups on the show before.
Yeah.
Which is amazing, like for very fast visualizations that wouldn't be there probably like in a lot.
Yeah.
Right.
More of a building interactive.
Yeah.
Applications, perhaps.
With low latency, yeah.
This episode of Talk Python to me 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.
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.
Other tech influences can be more negative.
I really appreciate that Mozilla is always on the lookout for and working to mitigate negative influences of 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 it 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 listened 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 talkpython.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.
Like Tushar 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?
Yeah, there is no transpile.
Yeah.
And, you know, I saw a lot of, I know what people talking about, like I saw a lot of horrible
implementations, like, you know, transpiling Rust to Dart, Dr. Rust, Python to all these
guys.
I mean, it's going to be a fragile solution, unnatural, you know, like, and to my mind.
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're, you know, you think of something like Sculpt or Brython, which is like Python
in the browser, but transpiled to JavaScript.
It's well, how to use these other libraries?
Like there's no way to really.
You will hit the wall.
You will hit the wall at some point, you know?
Like, so if I were like an engineering manager, I would never go for this, you know, like
in a real project.
Yeah.
Except for maybe some real 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 Flutter with Python is how do you build out these, 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
it's kind of a real basic calculator app.
Yeah.
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?
Mm-hmm.
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.
Yeah.
Exactly.
So PageLit was based on Microsoft Fluid UI 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, you know.
And it feels good.
Row and columns inside, like rather than having stack everywhere or like div, if you will,
like div and then add semantics to div by classes, you know, like it's still form like div, div,
div, div, div.
Here we have row, column, column row, at least.
So you can distinguish this like, you know, visually.
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 reusable segments, right?
So for example, if you've got a row that has a column of stuff and then another row of more
columns, you could take that, 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.
Like, like here's the, now I have a bigger thing to drag around, but in this world, like
drag around is just like right code to create it and put it in the right spot.
You know what?
And I've been really amazed, you know, because it works so good.
I understand the first question people ask, like, how would I make my own like clutter component?
But you know what?
You can do these user controls in the, made of these primitives, flat provides, and it works
pretty well.
They're isolated.
They can handle events inside them.
Like if you put few of those user controls like on a page in different places, they will
be all behave separately.
And it's so nice.
I mean, maybe it's side effect, you know, like I wasn't thinking about that while doing this
stuff, but it's so good.
So you can build.
Yeah.
And can these controls, do they have their own state?
Absolutely.
Yeah.
Oh, that's awesome.
So you could have like put information about it and need some buttons to interact with it.
And it just, they sort of keep track of just that little block, right?
Even better.
Whatever you do on flat UI, it's getting persisted right away.
So whatever, let's say if you have a new form and you type something into this form and you
do refresh in your browser, all the information will be there after refresh.
So it's like...
And for a desktop app, say if I close it and open it again, will it remember?
It depends.
So right now it's a standalone app.
And when you open it again, it will load another instance of this flat server with the
clean state.
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, right?
Yeah, sure.
We're going to make it.
Yeah.
Since this is Python executing, could I do like SQLite?
Absolutely.
And say SQLAlchemy and figure out like, I'll put the file in my user's app, you know, data
directory in their profile.
Absolutely.
Right now we're working on a more advanced example with using database.
I mean, like not advanced, like, but with using the database.
And also we're going to add data table control for working with Greece, you know, like...
Nice.
Because this reason right now, yeah.
Yeah.
Related to that out in the audience, Rob will ask, 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 like buttons out of the material design or you can have buttons
out of, what do they call it?
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?
So it's a good question.
You know, 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, it's pretty solid, you know?
And they, I would say they have a strong commitment to this material UI strategy, you know?
Like, and it looks really nice.
You don't have to sell people what it is.
Like I would probably need to sell people Fluent UI, but I don't need to sell people like this material UI.
It's nice right away.
Looks nice.
It looks pretty solid.
But for different styles, yes, you can style, like there are limited styling features right
now like in flat, but we're going to pull more.
And also we will be doing these adaptive controls.
Oh, so if I run the app on Windows, it might look different.
It might be material versus I run it on macOS.
It'll be the, whatever the heck is the Darwin variant.
Yeah.
Exactly.
So yeah, you can actually, I don't know how to share a link with you, but I can.
Yeah.
There's a private chat here in the streaming through it and I'll pull it up for us.
Yeah.
I'll show you what it might look like.
Oh, fantastic.
While you're looking at it, I just also want to point out for event handling is a super important
thing in UIs, right?
Like UIs are basically get the stuff on the screen and start handling events and updating the UI
accordingly.
And so in flat, 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 past the data.
Yep.
And you can 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?
Oh, yeah, absolutely.
Yeah.
If you manage to put it in the single line, like, you know.
So lambdas in Python are limited somehow, you know, like.
Yeah.
Oh, yeah.
They're single line.
They're like expressions of the other languages.
I use it a lot, like print something as lambdas, you know, in the event headers to see if it's
being called.
Yeah.
So I dropped you a link to Fluent UI.
Yeah.
It's a library for Flutter.
It's really cool.
And there is a web demo, even like, and there is also like, water, Macos, UI, something like.
I'm dropping you a link as well.
All right.
Cool.
So, and for mobile apps, we have a lot of controls like this Cupertino library built into Flutter.
That's what it's called.
Cupertino.
Yes.
Not Darwin.
Cupertino.
Yeah.
Right the way.
So, yeah, you know, yeah, I get it from many users.
It's, it could be really inappropriate to see a Fluent UI, Fluent, let's say, toggle button
on iOS, you know.
This looks fantastic.
Yeah.
I mean, one of the, it's just, when you open an app and it clearly looks like it doesn't
belong in the platform, you're like, hmm, this is weird.
What is this?
Yep.
It just, it doesn't bring the right impression.
And this, I mean, the stuff that you're showing on the screen, and I will link to the examples.
Yeah.
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.
Well, if you're like a specialist, you can definitely see like, you know, some odds, you know, that
it's not like native.
Yeah.
You're like, oh, that button's not quite.
Yeah.
It's drawn, you know.
Right.
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.
You know what?
It's always a debate.
If you go somewhere like in Harkin US, you'll have these debates.
What would be like?
Because React Native, it's about like display native controls, right?
But is it a good thing when you precise design?
And I work with designers in big companies like, and could be a problem if you cannot deliver
precise design.
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.
Sugato.
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.
But sure.
So as requested multiple times by our users, I put this, I assembled this model strategy.
If you, Michael, if you can open this in a blog, it's in the blog.
Ah, the blog.
Gotcha.
Okay.
It's a blog, Flet mobile strategy.
There you go.
Cool.
So it's not like we forgot about mobile devices.
No, quite the opposite where I'm always thinking about mobile experience.
We're getting there maybe slowly, but we're getting there and we will be there.
So we want to deliver, not just, you know, like the way you can build like APK, you know,
we want to enable developers, you know, like to quickly test, for example, these like experiences
on mobile devices, because it's a complex process, you know, like it's very complicated.
Yeah.
Like packaging and signing and publishing, reviewing, et cetera.
So it's, and many companies, they're moving to this server driven approach, like Airbnb,
like Lyft, like big players.
So they can bypass like App Store reviews, you know, and push some new functionality, like
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 for ARM 64, this Go server compiled for ARM.
And so making this like sandwich working on mobile and packaging it and delivering to mobile
device like the last.
This is the biggest challenge for you all, right?
It's not quite.
It's challenge.
It's not quite there yet, right?
It's challenge.
Yeah.
It requires you to be a low level programmer, you know?
Yeah.
And Stugato actually has a follow up saying, cool, PyTorch is trying to make model serving
available with React and using Flet could be a very accessible alternative.
I will look into that.
Well, so.
Yeah.
I mean, that is interesting.
It's a fancy topic, right?
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, macOS?
So yeah, just to make it right, you can package it as a desktop app, Windows, Linux, Mac, and
there's a web app.
Yeah.
On the mobile experience, you can use it as Power BWA app.
Right.
So you package it as a mobile app and then you install that as a progressive web app and
then it's kind of good to go.
Okay.
Yes.
But not like a native mobile experience.
I'm working on it right now and there is a branch for that.
You know, you can always observe, you can live life real time.
Yeah.
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
Pi installer.
And then you have steps on how to package it up as a web app as well.
Mm-hmm.
Cool.
So let me ask you, maybe I'll pull up the roadmap as put that as the background.
Is this ready for people to build apps with?
Like what's the state of Flet?
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 this?
So as it basically like a second iteration, so we've had this proof of concept, like page
let as a proof of concept.
And it's still, despite it's like a second iteration, it's still a 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 feature, I would love to have like mobile experience to complete
the cycle, you know, like web, desktop, mobile.
But in general, it's really ready to build these apps with apps it made for, you know,
like simple app.
Yeah.
We're talking the forms over data, the little portals and the dashboards that we talked about
at the beginning, right?
Exactly.
So I think it's pretty much ready for, well, front time, why not?
Nice.
All modern software is beta, you know, like, yeah.
So it's like prom, you know.
Always evolving.
What's the contributor story?
Are you open to having other people submit PRs and help out with say tutorials and stuff?
Absolutely.
All people welcome.
Awesome.
And I know it's a challenge for some projects, but I really want to spend time on that.
Working with people, writing guidelines, you know, et cetera, like establishing rules.
So absolutely.
Because it's not an open source project if you're not accepting PRs, you know, or if you
don't work with people.
It's like publish source project.
For sure.
Yeah, exactly.
It's source open, not open source.
That's right.
Yeah.
And only the next.
Let me put an idea out there.
You have two really great tutorials here.
Are you willing to accept more tutorials?
Sure.
So over on the flutter.dev slash learn section, they have some tutorials over here.
Maybe it would be fun if people could like try to create the equivalent of these tutorials,
but in Flutter.
I don't know.
That might be a cool thing to create and see how they come out.
Yeah, it's a nice idea.
But you know, maybe it's not even worth a separate tutorial.
Like, you know, look, in Flutter could be like a single page of
gold, you know, like.
Yeah, absolutely.
So when I look at this.
I will take a look.
Yeah.
When I look at this, this looks a lot like a Dart version of Flutter or Flutter looks like
a Python version of this, right?
It has this same hierarchical code type of thing.
There are some differences that we talked about, like state and stuff, but it looks really,
really similar.
So if I am a Flutter developer, how easy is it to go to Flutter?
And if I go to, if I learn Flutter and like, I really need the true native version, how easy
is it to go to like pick up Dart and then go to Flutter?
If you're already a Flutter developer, well, the only requirement there probably is you should
know Python, right?
Like at the moment.
Yeah.
I'm assuming that you know Python.
Yeah.
Sure.
Yeah.
And I think it's pretty acceptable to write something in Flutter.
I especially love the idea of using Flutter as a prototyping thing or because you can easily
do something all weekend.
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 const
means.
I didn't mean to double it up.
Constantly chasing const around.
I do not understand this language.
So you might have a class which you're passing as const.
Maybe this is my complaint as well.
And you might need to take away that const, but then it's required to have const in other
places.
But then it like cascade.
It's just, I'm like, okay, there's like five places I got to either remove or add const
because I just want to change.
Like this is driving me insane.
And I don't see any of that in Flutter and it makes me happy.
It sounds like you've been down this as well, Thador.
Yeah.
Because maybe you're a perfectionist.
You're trying to avoid all those warnings.
Yeah.
It's a hassle.
Yeah.
So the prototyping story makes me think like maybe you could build out stuff really quick
because it's, you don't have to deal with all those little weird language edge cases.
Yeah.
And I had a few customers, like users on Discord coming from Flutter world.
So yeah.
The way back to Flutter from flat is also possible.
Why not?
I mean, like if you grow up, grow out of like this flat thing, you know, like, and you need
something really unique, like animations, you know, like some weird transitions.
So why not?
So you can go and learn Flutter and dive into this world, you know?
Yeah.
I agree that they should be pretty transferable.
Certainly knowing one will help you know the other.
No doubt about it.
Absolutely.
And 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.
So as right now, we actually, we are not delivering these anywhere, like, but we already building 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, you know?
And do you just put the entitlement in that compilation target, basically?
Yeah.
So yeah, if they, all these permissions right now, they have to be put into these pre-compiled
Flutter client, like Flat client app, or right now we're working on the Flutter widget.
So Flutter widget called Flat.
So you can embed the Flat experience into any existing Flutter app.
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 flat.
Yeah, exactly.
Imagine you already have an app written in Flutter or native app, like in Kotlin, you know, like
for, or Swift.
You can replace part of your app with this flat driven by server-side code written in Python.
Cool.
In that scenario, where does the Python run?
It runs on the server?
On the server.
Yeah.
Okay.
And you can actually have in this app, your mobile app deployed to client devices.
You basically have to redeploy code, Python code in the server to deliver new experience,
new UI, new clicks, you know, like whatever.
I don't know how relevant this is, but it might be.
Have you looked at PyScript?
Yeah, sure.
You know, if some of the challenges is like, well, how do I end up running the Python part?
Could you WebAssembly your Python in and get it native and get it locally, like for offline
version?
So yeah, people are asking, there are a lot of technologies right now, right?
If we're talking about PyScript and the WebAssembly, it makes sense for web apps, right?
You know what?
And actually, Dart itself is being compiled.
Okay, right now, it's only part, it's here, Engine is in WebAssembly, but they have, Google
have plans to compile Dart, Flutter apps into web assemblies as well.
Okay.
So it makes sense for web, for mobile, it should be native code.
Yeah.
So for mobile, it should be native code.
I'm not sure, maybe tomorrow we'll see some like engines translating like this WASM into
native code.
Yeah.
If you could run WASM in your native application on iOS, then maybe this has opened some kind
of door.
Yeah.
But again, as far as I know, it's really restrictive environment, mobile phones.
So...
Yeah, it's not the same as saying, well, sure, you can use PyTorch or requests or whatever.
Yeah.
Okay.
Well, Fedor, I think we're just, we're out of time.
But I want to congratulate you on a super interesting project.
It's really cool.
Thank you very much.
Yeah, you bet.
Now, before you get out of here, you got to answer the final two questions.
Sure.
If you're going to write some Python code, what editor do you use these days?
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 idea.
Maybe I will look into that, especially if it's like, it's free for open source projects.
But yeah.
Right now it's VS Code.
It's great.
Cool.
Well, I can tell you your calculator tutorial works all the way through on PyCharm because
I just did it right before our show.
So it's all good.
It's all good.
Now, also notable PyPI package, like obviously Flatt is a good one, but other libraries you
may have run across recently.
You're like, oh, this is cool.
People should know about.
Well, for me, it's a really challenging question because I'm a new guy to Python.
And I don't know, like I don't have any really any like favorite packages, you know?
Yeah.
Well, we can throw Flatt out there.
How's that?
So yeah, maybe Flatt is nice.
It's not disallowed.
You pip install it.
You can say that if you like.
Yeah.
And you know, actually it's not trivial.
And I spend a lot of nights trying to put this, you know, wheels right, you know, like
to include these binaries.
So it's pretty cool.
And I can, if you guys have some questions, like how would you repackage those wheels
during the ECI process?
So I would be really too happy to share my experience, you know?
Yeah.
Awesome.
Because I learned a lot of packages and the internal structure to understand how it works,
you know, basically like zip files, you know, like what's inside.
Awesome.
All right.
Well, final call to action.
People want to get started with Flatt.
They want to build an app with it or maybe even contribute to it.
What do you tell them?
Absolutely.
Go and try.
Hope on Discord.
I'm always online.
Let me know what you like, what you didn't like.
We're always listening.
So, and definitely contributions are welcome.
So, yeah.
Awesome.
And you at the bottom of the homepage of Flatt.dev, you've got a subscribe to our newsletter.
I guess people can get updates on the project if they want there, right?
Yeah.
I haven't sent anything there yet, but yeah, there are a couple.
It's all about building up the group of people who are interested in what you're doing.
So, it's mostly Discord right now.
Yeah.
Got it.
So, it's pretty active.
Yeah.
Good to know.
All right.
Well, once again, super exciting project.
I've ranted on this before.
Having some kind of UI framework that is really modern and fresh in Python is super important,
but it's 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, you know, more power to you.
We love it.
Yeah.
Sounds great.
Yeah.
Thanks.
Thank you, Michael.
Yeah.
Bye-bye.
Thanks, everyone, for listening.
Bye.
Bye-bye.
find the iTunes feed at /itunes, the Google Play feed at /play and the direct RSS feed at
/rss on talkpython.fm. 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.fm/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.
Thank you.