Challenge

For this beginner challenge, try to recreate the layout of this Twitter embed card using Flutter:

Did you know?

When you call MediaQuery.of(context) inside a build method, the widget will rebuild when any of the MediaQuery properties change.

But there’s a better way that lets you depend only on the properties you care about (and minimize unnecessary rebuilds). 👇 pic.twitter.com/XnaZFIKdUf

— Andrea Bizzotto 💙 (@biz84) June 20, 2023

Flutter Web Demo

Here’s a Flutter web demo showing Andrea’s solution:

Open preview in a separate page

Starter Project

You can grab the starter project for this challenge here:

c001_twitter_embed_card_starter.zip
v0.1.1, updated: 2024-05-17

Check the README for how to use it.

Primary Goals

• Implement all the elements in the layout above, closely matching the UI
• The layout should be responsive (resize the web demo above to see the intended result)
• Identify which UI elements are candidates for reuse and implemented with dedicated widget classes

Stretch Goals

• Make the top-level widget reusable by passing the following properties as arguments: display name, username, text, image, date, number of likes and replies
• Links should become underlined on mouse hover (display name, follow link)
• Add hover states for the tweet actions at the bottom (favorite, reply, copy link, read replies)
• When a link/action is clicked, take the user to the appropriate destination on Twitter/X

What You Will Learn

• Precompile SVGs with the vector_graphics_compiler
• Widget composition
• Build a simple responsive layout using rows and columns

Useful Links and Resources

• Transforming assets at build time
• Understanding constraints
• Common Flutter errors
• Widgets vs helper methods | Decoding Flutter