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.
How it works:
- 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.
- To help you, we’ll share some ideas on what to build, recommend resources, and share example pens.
- 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.
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!