Flutter Responsive Split-Screen UI Designs for Phones, Tablets, Desktops, and the Web 

Have you received an assignment that requires you to create a multi-platform phone, tablet, desktop, and web app and to be fully responsive with a single code base? Wait… and it requires also to handle responsively a Split-Screen List/Detail layout on the same screen depending on the device and full navigation from List to Detail page on phones? But wait, on desktop, and web you are required to handle both mobile and desktop, and web layout when the user changes the size of the app’s screen? One more thing, also do not use any third-party plugins or packages?


In this course, you’ll develop a multi-platform single codebase Responsive Split-Screen mobile, desktop, and web application. The app handles device rotation, phone navigation from List to Detail page and tablet, desktop, and web Split-Screen List/Detail layout on the same screen. First, you’ll explore how to analyze the application’s common features. Next, you’ll create the Responsive Split-Screen project for phone, tablet, desktop, and web applications accessing common logic and reusable widgets. For phone applications, you’ll navigate from the List page to the Details page. For tablet, desktop, and web, you’ll create a Split-Screen layout showing the List and Detail pages on the same screen. Furthermore, you’ll implement Dark and Light mode, create a simple and elegant global State Management, and the Responsive Layout Builder widget. Moving on, you’ll create the List and Detail pages. Lastly, you’ll create the Split-Screen pages. Finally, in the end, you’ll have a Responsive Split-Screen List/Detail app that runs on phones, tablets, desktops, and the web from a single code base, with no third-party packages needed. 


Course Objectives

In this master codelab, you’ll explore:

  • Build a focused application handling Responsive Split-Screen Design
  • Support Navigation for List and Detail on different pages
  • Support for Split-Screen List and Detail pages on the same screen
  • Support Portrait and Landscape modes
  • Support Phones, Tablets, Desktops, and the Web
  • Layout views according to available device size
  • Automatically switch from mobile detail page to Split-Screen layout while resizing
  • Using app-wide state
  • Dark and Light mode
  • Reusable logic and widgets
  • Nested Navigation

Meet the instructor

Marco Napoli

Content Author & Course Instructor

More courses by the instructor