As we navigate through the current global crisis together, we know a lot of people are looking to develop new skills. We want to help, so we’re announcing a partnership with the App Brewery to give away a new introductory course on Flutter, offering free access to the course to those who activate it within the next three months. This course requires no prior Flutter experience, and we hope this gives you the chance to build new development skills for iOS, Android, and the web.

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Over a million developers worldwide are using it, from individuals and startups to big companies like Alibaba, Capital One, and eBay.

We are giving away the Introduction to Flutter Development course for free with lifetime access if activated during the next three months. The course covers some of the fundamental concepts for Flutter development, teaching you how to code using Dart and walking you through building nine real-world apps that run on iOS and Android, even if you have no programming experience.

The course instructor, Angela Yu, takes you step-by-step through engaging online lessons that give you practical hands-on experience to succeed as a Flutter developer. The course includes 10+ hours of video tutorials and labs, during which you’ll build your programming knowledge and make real world apps such as a Choose Your Own Adventure game and a quiz app. You’ll even build a musical instrument!

We are expecting a lot of people to take this course, so we have also worked with Very Good Ventures, one of the top Flutter development agencies, to add concierge support for questions and help in the associated Discord channel.

By the end of this course, you’ll be ready to start building your own Flutter apps and on your way to becoming a fully fledged Flutter developer. If you get through this course, then there are many more modules available for further learning on App Brewery. You’ll end the course with a certificate of completion, along with a portfolio of apps that have taught you the fundamentals of working with Flutter and Dart.

We hope to see you there soon and that you’ll share your progress using #FreeFlutterCourse.

Enroll Here: https://www.appbrewery.co/courses/intro-to-flutter

Announcing a free Flutter introductory course was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

We received over 850 unique submissions across 86 different countries. This included entries from first time coders to Flutter experts. The following video provides a glimpse of what you made from the hundreds of submissions we received:

The winners are… 🥁🥁🥁

Grand Prize Winner: Particle Clock by Mickel Andersson

Judges were in awe from the visual effect, execution, code quality and overall novelty of this clock. The mathematical complexity of particle calculation was impressive.

Visual Beauty Winner: Cloom Clock by Filipe Barroso and Francisco Frutuoso

The custom type and elegant animations made this clock a visual stand out. They used Rive for excellent animations, and had a vibrant color selection.

Overall Execution Winner: Humanbeans Clock by Boris Brestnichki

This submission has a great storyline and thought out UX. The attention to detail, including custom illustration and hand drawn numerals, made this clock stand out.

Code Quality Winner: Creative Creator Or Maybe Not Clock by Hubert Henkemeier

It’s impressive how well documented and written this clock is. The participant even authored a detailed post describing their full process. Everything is painted purely with Flutter’s Canvas: no assets, no packages, and no prebuilt widgets were used.

Novelty of Idea Winner: Sunset Reflections Clock by Victor Morilla

Interesting idea to emulate the behavior of cold cathode displays. The rendering and way this clock was created was novel.

Honorable Mentions:

Judging was no small task, and our judges found it difficult to choose a mere 5 top winners out of all the entries based on our criteria. Therefore, our judges also awarded honorable mentions to the following entries, in alphabetical order:

• Agent Clock by Thomas Krueger
• Animal Clock by Sei Lee
• Ants Clock by Pau Picas Sans
• BarBar Clock by Aleksandr Troshkov
• Boating Clock by Yi He
• Circle Clock by Max Bowser
• DJ Clock by Bao Hui Huang
• Dots Clock by Tran Duy Khanh Steffen
• Flutter Clock by Dezso Meszaros
• Flutter Clock by Dominik Roszkowski
• Flutter Clock by Helge Wieding
• Flutter Clock by Masayuki Ono
• Flutter Clock by Vyacheslav Ryabinin
• Freehand Clock by Tyler Hayes
• Generative Clock by Fabian Stein
• Infinity Clock by Akash Divya
• Iso Clock by Scott Cook
• Lofi Clock by Michael Wilson
• Matches Clock by Mikołaj Lenart
• Paper Clock by Ryan Taylor
• Scenery Clock by Valerii Kuznietsov
• Snake Clock by Gilles Devillers
• Star Clock by Philipp Bauer
• Steampunk Clock by Roman Cinis
• Tetris Time Clock by Michael Jentsch

We were amazed by the quality and creativity of the entries — there are so many more wonderful clocks that you can see here. Thanks so much for participating!

🕒 It’s Time: The Flutter Clock Contest Results was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

High Level Details

Date: All entries must be submitted by January 20, 2020 11:59 PM PST (GMT-8).

How to Submit: Entries will be collected on the form linked at flutter.dev/clock, but see the Official Rules for full details.

Winners: Submissions will be rated by Google and Flutter expert judges against the following rubric: visual beauty, code quality, novelty of idea, and overall execution.

Prizes: Potential prizes include a fully loaded iMac Pro, Lenovo Smart Display, and Lenovo Smart Clock. Also, all complete and valid submissions will receive a digital certificate of completion. In addition, some of the clock contest submissions might be integrated into the Lenovo Smart Clock’s lineup of clock faces, or used as inspiration for future clock faces!

Results will be announced at our Mobile World Congress 2020 Keynote.

Good luck and have fun! Time is ticking…

Time is Ticking: Clock Contest live with over $10,000 in prizes was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hamilton was one of the first apps built with Flutter. The app was built in 3 months, reached 1M+ installs, and was featured on the Apple App and Google Play stores. Here is a video we made about the app:

Flare is a new design and animation tool that allows users to build real, interactive, animated assets that run in real time in their final product. What better way to explore the potential of Flare for the Hamilton app than to open it up to designers, developers, and Hamilton fans.

#HAMAPPFLARE

The #HamAppFlare Challenge is a unique opportunity to win prizes and be featured in the Hamilton app (built with Flutter) while learning to use Flare.

This is your chance to create amazing animations with Flare and Flutter using the Hamilton app as your muse. Think of fun, interesting, and useful ways that animations could improve the Hamilton app and bring them to life with Flare. Or, just make something awesome with Flare that expresses your love for Hamilton.

To participate:

1. Create a Flare animation that is suitable for Hamilton.
2. Tweet a link to your submission using #HamAppFlare.
3. Submit your entry to the submission site by August 15, 2019 at 11:59pm EST.
4. A winner will be selected by Hamilton, Very Good Ventures, and 2Dimensions.

The winner will receive:

• $250 Hamilton merchandise pack
• $250 Broadway.com gift card
• 1-year Flare Subscription ($250) + Flare T-Shirt
• In-app Winner Announcement
• Social Mentions by @HamiltonMusical

ENTER THE CHALLENGE HERE

The Hamilton Flare Challenge opens on 7/20/19 and ends on 8/15/19 at 11:59pm EST.

Hamilton — Rise Up With Flutter & Flare!

In 2017, the hit Broadway musical, Hamilton, was the first brand outside of Google to launch a production app using Flutter. The Hamilton app has been the flagship Flutter app since its launch with over 3 million installs globally.

While Flutter is now well-known among developers as a game-changing portable UI framework, Hamilton embraced Flutter extremely early — in its pre-alpha stages. Hamilton and Very Good Ventures remain committed to building revolutionary app experiences with Flutter…and now Flare.

Details

Submission Guidelines

Official details and rules can be found on the submission site. Any information below is for convenience only and is not “official.”

• Submissions will be accepted from 7/20/2019 at 12:00am EST to 8/15/2019 at 11:59pm EST.
• Submissions MUST include Flare files. Ideally Flare animations are also utilized in Flutter code that you provide.
• Your submission must be made with a valid URL to a public repo on Github or the 2Dimensions Flare site.
• Each submission must be accompanied by an MIT license: https://opensource.org/licenses/MIT
• Your entry must not be offensive or mean-spirited — this is for fun and to encourage designers and developers to use Flare!

How will the submissions be judged?

Flare submission will be judged by members of the Hamilton, Very Good Ventures, and Flare teams based on:

• Originality: The uniqueness and novelty of the animation and its usage.
• Brand Alignment: The degree to which the animation is on-brand for Hamilton and suitable for use in the app.
• Wow: The degree to which it puts a smile on faces and showcases the power of Flare.

Spread the Word!

The official hashtag for the challenge is #HamAppFlare. Please be sure to tweet or ‘gram your work and mention @HamiltonMusical, @VGVentures, @2Dimentions, and @FlutterDev!

What is in the Hamilton Merch Pack?

• Hamilton Gold Star T-Shirt — link
• Hamilton Baseball Cap — link
• Hamilton Pint Glass — link
• Hamilton The Revolution Hardcover Book — link
• Hamilton Canvas Beach Bag — link
• Hamilton Beach Towel — link
• Hamilton Souvenir Program Book — link
• Hamilton Lapel Pin — link

Looking for Ideas?

Need help finding something inspired by the Hamilton app to create with Flare? Try some of these focus areas:

• Enter lottery animations
• “You won!” animations
• Lottery tour location selector
• Trivia star burst animations
• Today screen content animations

Really any button, content, or interaction is fair game! Or just create something fun using Hamilton and its characters as your muse — think of it as interactive fan art!

Hamilton Flare Design Challenge was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

We received over 750 unique submissions from 60+ countries and regions, and included entries from first time coders to Flutter experts. This video provides a glimpse of what you made from the hundreds of submissions we received:

To put the limited size in perspective, 5KB is…

• Less than half a second of a typical music file. A typical MP3 file is encoded at 128kbps (kilobits/sec). That’s 128/8 = 16 kilobytes / second. So 5KB is 0.3125s of a typical MP3 file.
• Less than 0.05% of the size of the HTML specification. Less than 5% of the size of the HTML specification’s table of contents, even.
• The size of a 80x60 image, encoded in GIF format. Original image.

We hope you had fun using Flutter, and participating in the inaugural Flutter Create contest.

The winners are… 🥁🥁🥁

Grand Prize Winner: Compass by Zebiao Hu

This app is a polished, custom-designed fully functioning compass. Once you scroll up, it displays a globe that users can rotate and get real-time weather data wherever the red dot is placed.

Visual Beauty Winner: Relax by Erin Morrissey

Relax is a beautiful audio meditation app that displays imagery of rain, forest, sunset, and ocean with corresponding sounds.

Code Quality Winner: Pocket Piano by Rody Davis

A piano built for both iOS and Android. You can change the octave (by sliding to the left or right), and key width, toggle labels on the keys, and play any note (or notes) by tapping. The piano also fully supports semantics for screen reader users. Check out their tutorial to build the app yourself.

Overall Execution Winner: TimeFlow by Fabian Stein

TimeFlow is a timer that displays a sphere that shatters into pieces and slowly reassembles in one, two, or three minutes, as selected (reassembly not shown in the video). This gentle approach to a timer addresses the complaint that numeric timers can stress the meditator.

Novelty of Idea Winner: Flutter Events by Noel Jacob

This app allows event calendars to be encoded in QR codes so that attendees can quickly see what is happening at their event. It is impressive how much of an application’s UI can be stored in a JSON file (in a QR code) rather than being hard-coded in the application.

Other Submissions

Judging was no small task, and our judges found it difficult to choose a mere 5 winners out of all the entries based on our criteria. Therefore, our judges also awarded honorable mentions to the following entries, in alphabetical order:

• Elements app by Brian Carlos Robles
• Fauth by Christian Pietzuch
• Filipino cuisine by John Mark Grancapal
• Find aik by Igor Petushkov
• Flutty Loops by Erick Ghaumez
• Foxgame by Sven Knockaert
• Lights out by Khaleel Shaheen
• Kitten Quartet by Zhenxi Chen
• Pomodoro by Al-Ameen Ogundiran
• Timelog by Christos Giallouros
• Touch the programming by Tatsuya Tobioka

We were blown away by the quality and creativity of the entries. Some developers took time-off work to focus on their apps, and one developer turned their entry into a full-time job.

To see more examples of many of the hundreds of projects that were submitted, see the FutterCreateSubmissions2019 repo on GitHub.

Thanks so much for participating! Let us know what you thought about the contest. We may offer Flutter Create, or a variation, again in the future.

The Flutter Create winners are… was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

We are introducing Flutter Create, an initiative where new and experienced developers are asked to submit a Flutter-related project in less than 5KB of Dart code.

5KB is less than half a second of a typical MP3 file. What can you do with just 5KB? It turns out — quite a lot. Flutter includes widgets and libraries that make developers productive with only a little code.

So we thought we’d see what you can do. Amaze us with what you can build with Dart in just 5 kilobytes, and you might win one of the following prizes:

Winners will be announced at Google I/O 2019.

flutter.dev/create is your source for all challenge details and submissions.

High Level Details

Date: All projects must be submitted by April 7 11:59pm PDT (GMT -7).

How to Submit: Entries will be collected on the form linked at flutter.dev/create.

Winners & Prizes: Submissions will be rated by Flutter experts against the following rubric: visual beauty, code quality, novelty of idea, and overall execution. Prizes include a fully loaded iMac Pro, Google Home Max, and Google Home Mini.

Good luck and have fun!

Flutter Create is live with over $10,000 in prizes was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the following video, I go over what a Flutter widget is, and how to use StatelessWidgets in a Flutter app:

For those that prefer to read articles over watching videos, this post explains what Flutter widgets are, how they combine to become interfaces, and how to compose a UI with stateless widgets.

Part 1 — Making a dog app using stateless widgets

To keep things quick, I’m starting with a basic app here. It contains a Scaffold widget, an AppBar widget, and a couple Text widgets that display info about my yellow Labrador, Rocky.

Widgets are the basic building blocks of a Flutter app. Each one is an immutable declaration of an aspect of the user interface, and they can take on many tasks.

For example, there are:

• structural widgets — like a button or menu
• stylistic widgets that propagate a font or color scheme
• layout-related widgets — like padding
• and many more

You can also compose new widgets from existing widgets, so the combinations are endless. Let me show you what I mean.

Say I want a color behind my dog’s name.

I can do that by wrapping the Text widget with a DecoratedBox.

And now my text widget has a background color.

Maybe I’d like padding around the text.

I can accomplish that by adding a padding widget. I’ll specify 8 logical pixels of padding around Rocky’s name.

And now I’ve got padding.

This process of putting widgets together is what we call “composition.” I’m composing my interface by combining simple widgets, each of which handles one particular job: Padding pads things, DecoratedBox decorates a box, and so on.

Now, let’s say I go to the animal shelter and meet a couple yellow labs I can’t live without. I can add a Column widget inside the Center widget, and add their names.

I use a widget called SizedBox to add blank space between them, which results in this:

But you know, I’ve got a lot of repeated code(also called boilerplate) in these three name boxes. Wouldn’t it be great if I could make my own widget that takes a name and handled the details for me?

Well, I can.

I’ll make a StatelessWidget, and call it DogName. A stateless widget is a widget that’s composed of children (which is why it contains a build() method) and doesn’t contain any mutable state that it needs to track. When I say mutable state, I mean any properties that change over time. For example, a text box containing a string that the user updates, or a data stream that updates an arrivals/departures display.

This widget doesn’t have any of that. It just needs a string for a name, which won’t change, so StatelessWidget is a perfect fit. I can even make this string final, too.

I can specify the string via the constructor, and because all of its properties are final, I can mark this as a const constructor.

Now, I just need to define the build method using the same widgets, only now the Text widget displays the string from the widget’s name property.

I use this widget to simplify the original code.

As you can see, this results in the same UI, but the code is tighter thanks to StatelessWidget and Flutter’s use of composition.

Part 2 — Widget Trees and Element Trees

So that’s a little example of how composing with StatelessWidget works. At this point, you might ask yourself, “I see how these build methods work, but when do they get called?” Well, let’s start with just a single DogName widget.

We tend to think of apps built with Flutter as a tree of widgets, and that’s not a bad thing. But as I mentioned at the beginning, widgets are really just configurations for pieces of an app’s UI. They’re blueprints. So what are these configurations for? Elements. An element is a widget that’s been made real and mounted onscreen. The element tree represents what is actually displayed on the device at any given moment.

Each widget class has both a corresponding element class and a method to create an instance.

StatelessWidget, for example, creates a StatelessElement.

When a widget is mounted to the tree, Flutter calls the createElement() method. Flutter asks the widget for an element, and pops that element onto the element tree with a reference back to the widget that created it.

StatefulElement then asks “I wonder if I have any children?” and calls the Widget’s build() method.

In this app, it has several. These widgets then create their own corresponding elements.

And those are mounted to the element tree as well.

So the app now has two trees: one that represents what’s actually on the screen (the elements), and one that holds the blueprints they were made from (the widgets).

Now you might be wondering what starts the process of building and creating elements, what kicks off the whole thing, so to speak. Let me show you something you may not have noticed back at the beginning…

The DogApp class, which represents the entire app, is itself a StatelessWidget.

I told you that Widgets can do almost everything, right? If you look at main(), which is the entry point for the app, you can see that it calls the runApp() method, and that’s the starting point. The runApp() method takes a widget and mounts it as the app’s root element with height and width constraints that match the size of the screen.

Then, Flutter progresses through all of the build() methods in the widget tree, creating widgets and using them to make elements, until everything is built, mounted onscreen, and ready to be laid out and rendered.

Which is how it displays three little boxes containing the names of the yellow labs.

So that’s an introduction to composing with StatelessWidgets and building an interface. One thing I didn’t mention is how to update or rebuild an interface when the data changes. That’s because StatelessWidgets don’t do that. They’re stateless, so they can’t track data over time, or trigger rebuilds on their own.

Fortunately, Flutter also has StatefulWidgets, which we’ll tell you about in the next episode of this series.

For more information about Flutter and all of its many widgets, head to flutter.io.

You can also watch other episodes in the series here or try a Flutter codelab.

How to Create Stateless Widgets was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

What to expect at Flutter Live

Flutter Live is happening on December 4th, with a small in-person event at the Science Museum in London, and a large global livestream audience. This event is a celebration of Flutter, Google’s free and open source SDK for building high-quality native iOS and Android apps from a single codebase.

Tune in to the livestream

Go to g.co/FlutterLive and sign up for livestream updates. The event will be broadcasted on the website Dec 4 with a pre-show starting at 4:00 p.m. GMT and the keynote at 5:00 p.m. GMT.

You can also add this directly on your Google Calendar by clicking here.

Join a local viewing party

Organizations all over the world are hosting free viewing parties to watch and discuss Flutter Live. Find one of the 150+ parties happening near you; here is the full list.

Get Involved with #MyFlutterStory, #AskFlutter, and #FlutterLive

Presented from the Science Museum in London, we are optimizing Flutter Live to reach the largest audience of mobile developers and provide all the rigor and excitement of an in-person experience to our global online audience. Regardless of where you watch the event, there are three ways to get involved.

#MyFlutterStory

Flutter is open source and community driven. We value our community and want to share their story with the rest of the world. That’s why we are giving you the opportunity to share your #MyFlutterStory. Here are the guidelines to submitting your story — it might show up at the event! We also encourage you to tweet out your video with the #MyFlutterStory hashtag.

#AskFlutter

Andrew Brogdon from our team will be LIVE on-site answering questions in real time that are posted with #AskFlutter. Tweet your questions and comments with that hashtag and your tweet may appear on the global livestream right after the keynote.

#FlutterLive

This is our overall event hashtag. We will have a social wall that is constantly showing tweets coming in with #FlutterLive both on-site and on our livestream. Make sure to tweet with pictures, comments, videos, and questions while you experience Flutter Live.

We are thrilled that you will experience Flutter Live with us on December 4th. In the meantime, follow us on twitter at @flutterio and get started with Flutter at flutter.io.

Google hosting Flutter Live on Dec 4 for updates on new way to build mobile apps was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

Google I/O 2018 is just a week away, and Flutter will be showing up in style at the event, with sessions, codelabs, office hours, an interactive sandbox space, and more. This is how to stay up to date with all-things Flutter from May 8–10th regardless of where you’ll be.

To see the various Flutter-related sessions, visit https://google.com/io/ where you will be able to view each of the following talks online, both live and on-demand:

• Tuesday, May 8 at 2:00 PM PDT — Customize Material Components for your product
• Tuesday, May 8 at 5:00 PM PDT — Build great Material Design products across platforms
• Wednesday, May 9 at 8:30 AM PDT — Code beautiful UI with Flutter and Material Design.
• Wednesday, May 9 at 2:30 PM PDT — Total mobile development made fun with Flutter and Firebase
• Thursday, May 10 at 10:30 AM PDT — Build reactive mobile apps with Flutter
• Thursday, May 10 at 3:30 PM PDT — Add Firebase to your cross-platform React Native or Flutter app

The full Flutter livestream schedule can be found here. Favorite these sessions on the website to find them easily later on.

Also, be sure to check out a virtual tour of the Flutter Sandbox, which will be available on g.co/io/guides by May 9. You will get to see what 2Dimensions has built for this!

To get involved in discussions with other developers about Flutter and I/O, be sure to participate in one of the various global I/O Extended events near you. If you’re interested in hosting your own viewing party, we’d love to promote it.

Anyone can get involved this year: at home, at the event, or at an I/O Extended gathering. Be sure to share your Flutter experiences with #Flutter on Twitter.

See you next week!

How to watch Flutter at Google I/O 2018 was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hamilton and Posse, a design and development agency in New York, had three short months to develop and launch mobile apps for the hit Broadway show. How did they accomplish that? Using Flutter, Google’s new mobile UI framework.

Reaching millions of users — with an outstanding half a million monthly active users and featured on both the App Store and Google Play — the apps let fans enter the ticket lottery, buy merchandise, play trivia, take selfies with a #HamCam, read frequently updated news and interviews, and more.

Watch this video case study to see how Flutter continues to help apps like Hamilton succeed on iOS and Android. You can read more details about the development of this app on Posse’s blog post.

Flutter is free and open source. Get started today at flutter.io. We can’t wait to see what you build!

[Video] Hamilton app built in 3 months with Flutter reaches 1M+ installs was originally published in Flutter on Medium, where people are continuing the conversation by highlighting and responding to this story.