Flutter CodePen challenge

Show your Flutter skills by building beautiful UIs on CodePen

Anjan Narain
Jul 1 · 2 min read
Image for post
Image for post

From the outset, one of our goals with Flutter was to enable developers to create beautiful user experiences. And every day the worldwide community amazes us with countless apps and experiments that showcase Flutter’s creative potential. Today, we’re pleased to partner with CodePen on a fun series of new challenges to let you show off your Flutter skills.

CodePen is one of the top destinations on the internet for front-end developers to experiment, share, and iterate. Ever since we announced our partnership with CodePen in April, we’ve been amazed by the Flutter Pens you’ve created. And so we want to give you the opportunity to show off your amazing Flutter designs to CodePen’s community of over a million designers and coders.

Challenge details

What is it? CodePen Challenges are fun opportunities to level up your skills by building things. Previous challenges have covered web development themes like JavaScript, Images, and Color Palettes. The Flutter CodePen challenge is a month-long challenge in July to build user experiences with CodePen’s new Flutter editor.

How it works:

  1. The Flutter CodePen challenge consists of 4 weekly challenge prompts, each on a different Flutter topic. Each prompt will be released at the beginning of the week, and the prompts will progress from basic to more advanced, building on each other.
  2. To help you, we’ll share some ideas on what to build, recommend resources, and share example pens.
  3. Once you complete your Pen, we encourage you to share it with the CodePen community using the tag FlutterPen and the broader developer community on Twitter and LinkedIn with #FlutterPen. The CodePen community will select the best Pens, which will be showcased on CodePen’s homepage.

Date: The first weekly challenge will be released Monday, July 6th, 2020.

Sneak peek: For the first week, we’ll start with one of the most foundational building blocks in Flutter: a Stack widget. Stack lets you layer widgets on top of each other in paint order. You can use it in simple scenarios such as overlaying texts on top of gradients or building some really cool custom designs.

Here’s an embedded CodePen that uses the Stack widget to create a three-panel view. Click Run Pen to see the app in action. Then click Flutter to see the code that implements the app.

“Slack Clone” by Mariano Zorrilla

Take the challenge!

Get creative and check out the challenge page, starting July 6th! In the meantime, why not use the #FlutterPen hashtag to show off the Flutter Pens you’ve already created? We’re eager to see what you’ve built so far!

Flutter

Flutter is Google's mobile UI framework for crafting…

Anjan Narain

Written by

Flutter Team @ Google.

Flutter

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Anjan Narain

Written by

Flutter Team @ Google.

Flutter

Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store