When building applications with Flutter, you can easily target multiple platforms which will mean your application will be used on a wide variety of devices and screen sizes. If you want to provide the smoothest user experience for your users you have to deal with the available screen in a proper way and you should design your application to be responsive.

So in the May challenge, your task is to make the example application to use the best layout and UI elements for the actual screen size.

You get a simple mail application with 2 different screens.

Emailsemail content

Your task is to implement the following:

  • When the screen is wider than 600 pixels the application should switch to another layout where the list of emails are on the left and when you tap on an email, the content is displayed on the right
  • If there is enough space, you should allow to pin a message to the right and keep it visible while opening other emails
  • Animate the switching among layouts. 

You can find the skeleton application here: https://github.com/Flutter-Challenge/responsiveness

Submit your solution
Please login to access this form.