Challenge

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

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.0, updated: 2024-02-26

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 user to the appropriate destination on Twitter/X

What You Will Learn

  • Load SVG images and show them in the UI
  • Widget composition
  • Build a simple responsive layout using rows and columns

Questions? Let's chat