Building a desktop design language with Flutter | Session

Learn how to build a custom widget set for desktop now that Flutter supports desktop applications. We walk you through the creation of a retro-styled Spinner widget that works on Windows, Linux, and MacOS.
Resources:
The Mahogany Staircase, Flutter's Layered Design → goo.gle/2PAGluu
Flutter's Rendering Pipeline → goo.gle/3aMDNAQ
The Chicago Widget Library → goo.gle/3dZKDVy
Speaker(s): Todd Volkert
Watch more:
Flutter at Google I/O 2021 Playlist → goo.gle/io21-Flutter
All Google I/O 2021 Technical Sessions → goo.gle/io21-technicalsessions
All Google I/O 2021 Sessions → goo.gle/io21-allsessions
Subscribe to Flutter! → goo.gle/FlutterYT
#GoogleIO #Flutter #Web
product: Flutter - General; event: Google I/O 2021; fullname: Todd Volkert; re_ty: Premiere;

[@DominikRoszkowski]

This is one of the best deep dive Flutter talks I've ever seen. Thanks a lot!

[@toddvolkert9167]

Thanks!

[@kerimamanov7760]

Great freamwork, Great community, Great videos! WE LOVE YOU, FLUTTER TEAM!!!

[@DimiterStanev]

Best talk ever - Thank you so much!!!!

[@anatolys9203]

wow! that was awesome! perfect job! thank you very much for sharing this.

[@FilledStacks]

This is super awesome! Very nice video.

[@mohsinazeemrind]

I was thinking about how would i manage Material Design in desktop but BOOM here we get Chicago LOVE flutter love Future!

[@liubovhryhorenko1155]

Thank you for the informative video! Very interesting

[@Kolano666]

More content like this, and by that I mean the flow of the video aswell.

[@vladimirkraus1438]

Amazing video. Please make more of such videos...

[@nash9785]

Loved this talk!

[@mhadaily]

THis is an amazing talk and I love it.

[@redabenh3427]

I think flutter team needs to build desktop widgets in Chicago design for developer adoption, developers will never create each input widget for desktop!

[@j8ge]

Great idea, great work

[@NahomyUchija]

Wow! This is amazing 😍

[@saiphaneeshk.h.5482]

Need more tutorials like this.

[@andreygerasimenko634]

Suspiciously close to the Cloud, Dart and Full Stack Flutter AME session at I/O.

[@johnnyelcoste]

pretty awesome!!

[@arin_faraj]

This is awesome.

[@bharathwaj2421]

I think its very easy to do modern design (we have tons of packages to do those), creating pattern like this is really amazing

[@JAICHANGPARK]

I love this video

[@merthyr1831]

I know it's an "older" design language but would love to see Chicago Design (or something similar) released as a package! Would be great for renovating legacy apps for people who still find the modern design languages of Windows and Apple to be jarring. It would make the work necessary to replace those designs with modern layouts even easier too as the generational software gap becomes wider.

[@frankc2119]

I would love to see Win95 widgets replicated perfectly. Such an elegant design. I really don't like the modern trend to make everything like a mobile app.

[@sidatymoulayekoureichy2848]

Flutter une techno vraiment d'avenir !!

[@sinaebr7337]

excellent. thinksss alottt

[@Tecknokenyaplus]

great job

[@manisony5503]

Superb 👍

[@Andreasonline3]

10/10, been modifying the win95 library so far might just redesign it

[@obengkuning3260]

Yeaa bois, finally..

[@alixopa]

Jaw dropping 😲

[@alexyan7245]

finally desktop app is ready,, yeahh

[@hsh2119]

Will there be a library like material and Cupertino? I really hope so...

[@krtirtho]

We need something like headless-ui for Flutter that has all the accessibility, focus, mouse/keyboard input handled & leaves us devs with just the styling

[@valdimiroluameiro3934]

anyone interested in creating a repository where we will create a Material for Windows or Linux?

[@irfankhanmohammed6964]

Hi Vladimiro. Yes im interested. But i am from database background. Would like to follow your lead if you help.

[@dinodzakmic]

I am in

[@BytesBytesGo]

Looking forward, are there any friends to watch it together?

[@yasirr9062]

gottcha

[@doevent-team]

thanks mas bro

[@megamrkakashi]

Yeah we spent 1 hour programming an

[@ShivamJha00]

That's not the point of this video but ok

[@KennyFully]

But the video is 16 minutes if rounded up.

[@nichanson]

The ability to code each aspect of the layer is sweet! Control over code and the speed to do that is wonderful. Coding the same thing in JavaScript would be a headache.

[@ce9916]

Can’t wait for some talented designers to start selling sleek UI themes

[@FedJimSmith]

mouse and physical keyboard ready apps, resizeable screens, multi-modal screen, anything else?

[@iPKS365]

thanks sir

[@frankc2119]

So I can make a Windows 95 aesthetic with Flutter? AWESOME.

[@schopengaard9796]

Definitely, you can make it almost pixel perfect. It would start as fast also so the user would only suspect something if they opened task manager and looked at the CPU/GPU usage (which can go up a few 10% under heavy rendering, but then quickly settles down to 0% under idle, good!) and memory usage (sits around average 70 MB). Both of these are definitely tolerable considering that you get ALL common platforms.

[@danielmilyutin9914]

This widget set is what I wanted to see for desktop flutter. I wonder if there are some modern and good-looking themes for desktop?

[@toddvolkert9167]

It looks like people are building them: Windows: bdlukaa.github.io/fluent_ui/ MacOS: groovinchip.github.io/macos_ui/

[@toluademiluyi3646]

See fluent ui

[@retrojames4226]

This is why flutter walks all over compose.

[@stevenyemba811]

is there support for oauth2 desktop application, mainly a webview/webengine ?

[@Coffeecupdev]

Dense bunch of information. Feels like something that needs time to be digested.

[@learnnow9598]

Hoping a stable release for desktop apps

[@skjagini]

How about support for multi monitor, where a single app can have multiple views, each view can be dragged onto different monitors (for example trading apps).

[@toddvolkert9167]

We're building this feature now in Flutter - look for it to land later this year.

[@warunakaushalya4157]

😍🔥

[@shashanklk9179]

How can we perform screen recording in desktop ?

[@aswathygireeshN]

Can anyone help me to access camera in Desktop using flutter

[@kaihsiangju]

is there something wrong with the code on 8:38 and 8:41? if (slot == Slot.content) { ...} is duplicated thrice, shouldn't the latter two be corrected with if (slot == Slot.upButton){...} and if (slot == Slot.downButton){...} ?

[@ToddVolkert]

Yep, good catch! The real source code uses a switch statement, but I changed it to an if/else for the talk because it took less space -- apparently I was a little overzealous with the copy/paste :-)

[@xskerrittx1]

@@ToddVolkert Amazing tutorial Todd, learned a lot (I know I'm a little late)

[@tailwindmastery]

Is there any options like flex box or grid for the layout design can please help me I am newbie 😢😢😢

[@ShivamJha00]

When will flutter release desktop support for firebase plugins

[@asxes]

will we have to create every widget in our apps by our selves?

[@namanawasthi5]

😎😎😎bring it on

[@MengHann]

Hi How to connect flutter with ms SQL server for local development?

[@juanmanueltejedatorres1541]

You have to create an API backend to communicate with this and the API will connect with your database

[@mohammadshohag604]

Waiting

[@Harsh-kz3qw]

How to enable desktop development...

[@joseantoniomolinabusquiel1617]

ALTGR + @ not work in desktop European languages Keyboards

[@capt_naman_gor]

Eagerly waiting, but still think flutter isn't ready for desktop. I am trying to make a cross platform app , including desktop, but I am unable to find a plugin on playing audio on windows. I do know how to play audio in windows c++ , but am unable to find how to receive a string in windows side of things. If anyone knows that, please help me man🙏🏻🙏🏻🙏🏻 Edit:- I do know how to work with Method Channels in Android and iOS(swift) side of things.

[@siddharthagrawal2693]

Flutter is ready for desktop, but the community isn't. Just like how it took around a year for packages to develop for mobile, then web, it will take some time for desktop. The flutter team has done their part, and its now time for us to do our part

[@ranth18]

Use Dart FFI

[@capt_naman_gor]

@@siddharthagrawal2693 yes, you are right brother

[@capt_naman_gor]

@@ranth18 brother I need to write platform specific code for all platforms, I can do that , but I am unable to do that for desktop platforms. That is my problem

[@capt_naman_gor]

@@siddharthagrawal2693 btw, do you know how to use the method channels on windows ?

[@marcom.]

Seems that Google reinvented the Java Swing Framework, but even more complicated (3 trees instead of 2). 😄

[@Drasius]

Full Firebase plugin support

[@sirnigelcogs]

As far as I can tell the original app was written in Java. Why did the original app need to be retired?

[@toddvolkert9167]

It was a Java Web Start app, and Java Web Start has been deprecated. As users upgrade their machines and reinstall Java, it's becoming a larger and larger headache to make sure they install the right (older) version of Java. But also, as a manager on the Flutter team, it was a fun project and a good excuse to switch to Flutter :-)

[@rushtothemax76]

So someone is probably gonna make the widgets for windows, Mac and Linux. And when that happens we can actually make some desktop applications real fast

[@Apoorvpandey]

Someone has to create this library which we can use instead of Cupertino and Material libraries

[@toddvolkert9167]

The library exists (under active development) - search for "Chicago" in Pub. :-)

[@Osama_Abbas]

I'm impressed and I'm not easily impressed.

[@pram5532]

TL;DW: it's complicated. you're gonna be building your own widgets... you could try maintaining that burden or just use Qt or smth

[@manashejmadi]

Bring firebase to desktop

[@glowiever]

that 14 year old app is still lookin good though

[@siddharthagrawal2693]

I wanna watch this but its at 12 am for me :(

[@joelmatthias]

I’d like to know why they had to completely re-write the app in the first place!

[@ToddVolkert]

It was based on Java Web Start, which has long since been deprecated, and so users were having issues when they upgraded their Java version.

[@marcosgarces7962]

Could you share code?

[@toddvolkert9167]

The source code for the Chicago library is at goo.gle/3dZKDVy

[@harryngwa]

The native way just seems way easier at this point

[@thisisgsrana]

Looks like HPU is still using exact copy of 14 year old software.(Himachal Pradesh University)

[@AY-gf3jq]

All this for a simple spinner. Better build desktop widgets instead of prompting people to use mobile widgets for desktop. It will easier and require less efforts to build desktop app. Or else, you will miss the main point of flutter which is designed to build apps easily and rapidly.

[@simplyflutter]

I have a better solution (There is something called Electronjs) that uses HTML CSS and Js easier more flexible ... I mean come on I just came striving to see better options and I was bombarded with this boiler code ... huge ass learning curve ... I mean seriously why things get harder :D

[@pram5532]

Tauri ftw

[@antoniostorcke]

Until it becomes easily supported to make flutter apps on flatpak, flutter will be dead on linux.

[@DariuszMakowski]

this is terrible. Its like u guys never saw qt framework and how layouts/widgets can be implemented. Like holy F!

[@jorgegravedeperalta4897]

Why doesn't it work for me?. I add in the pubspec.yaml file the following code and in OUTPUT the error is published. dependencies: chicago: ^0.3.0-dev -- [chicago] flutter pub get Running "flutter pub get" in chicago... Error on line 32, column 3 of pubspec.yaml: A package may not list itself as a dependency. ╷ 32 │ chicago: ^0.3.0-dev │ ^^^^^^^ ╵ pub get failed (65; ╵) exit code 65

[@MengHann]

Hi How to connect flutter with ms SQL server for local development?

[@MengHann]

Flutter V2+