Flutter Responsive Design with Split-Screen: for Mobile, Desktop, and Web

Flutter Split-Screen List and Detail Responsive Design for Phone, Tablet, Desktop, iOS, Android, macOS, Windows, Web

What are our objectives?

In this course, you'll use Flutter/Dart to develop a responsive app supporting a Split-Screen List/Detail layout from a single code base supporting multi-platform Phone, Tablet, Desktop, and Web.

For instance, you'll create the Split-Screen List/Detail on the same screen depending on device, and navigation from List to Detail page on phones.

Next, the Desktop and Web requires to handle both Mobile, Desktop, and Web responsive layout when user changes the size of the app’s screen.

Guess what? No third-party plugins or packages needed.

What You'll Create

You’ll start by analyzing the app’s common features, reusable logic, and widgets.

You’ll implement Dark and Light Mode, global State Management, and Responsive Layout Builder widget.

The Phone app navigates from the List page to the Details page.

For the Tablet, Desktop, and Web app, you’ll create a Split-Screen layout showing the List and Detail pages on the same screen.

• Build beautifully designed multi-platform application using Flutter and Dart
• Learn UI/UX techniques to wow the user’s experience and keep the company’s branding consistent between platforms
• Use the latest cross-platform Flutter framework and Dart language to create pixel perfect UI designs and adaptivity
• Create reusable widgets
• Use Layout Builder to create a responsive layout for mobile and web
• Separate concerns between UI, state, and business logic
• Learn how to use State Management without using third party libraries
• Learn how to create reactive screens to refresh content
• Custom navigation between platforms
• Create beautiful navigation transitions combining Hero and Navigation transition

What you'll learn

• Split-Screen Responsive Design
• Navigation for List and Detail on different pages
• Split-Screen List and Detail pages on the same screen
• Portrait and Landscape modes
• Phones, Tablets, Desktops, and the Web
• Layouts according to available device size
• Switch from mobile detail page to Split-Screen layout while resizing
• Dark and Light mode
• Reusable logic and widgets
• Nested Navigation
• App-wide state management

Why Flutter?

Flutter transforms the development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded experiences from a single codebase.

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Fast

Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.

Productive

Build and iterate quickly with Hot Reload. Update code and see changes almost instantly, without losing state.\

Flexible

Control every pixel to create customized, adaptive designs that look and feel great on any screen.

Multi-Platform

Reach users on every screen

Deploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices.

Stable & Reliable

Trusted by many

Flutter is supported and used by Google, trusted by well-known brands around the world, and maintained by a community of global developers.

Course Curriculum

Introduction

• Introduction
• Who is your instructor?
• Resources

Base Structure: Overview Helpers and Models

• Intro
• Main
• Constants
• Formatters
• Navigation Transitions
• Themes
• User Model
• Summary

Base Structure: Overview State and Widgets

• Intro
• App State
• App State Notifier
• App Bar Elevated
• Graph Bar
• Navigation Bar
• Navigation Rail
• Title Gradient Bar
• macOS: DebugProfile Entitlements Security
• Web: Script Render as html
• Summary

Creating: Helpers and Pages

• Intro
• Create Split Screen Layout
• Create Constants and Logic
• Create Responsive Layout Builder
• Create Desktop Web Layout
• Create Mobile Tablet Layout
• Creating Home Layout
• Live Demo's for iPhone, iPad, macOS, Web, Pixel 7, Fold-Out 8, and Windows...
• Summary: Helpers and Pages

Course Summary

• Course Summary: Tasks, Goals, and App's Demo

---

Resources:

The following are different resources for your Flutter Development.

Course
https://www.udemy.com/course/flutter-split-screen-responsive-design-mobile-desktop-web

GitHub - JediPixels
https://github.com/JediPixels

GitHub - Flutter Responsive Split-Screen Design
https://github.com/JediPixels/course_split_screen_responsive

My Flutter YouTube Channel
https://youtube.com/@JediPixels

Twitter
https://twitter.com/JediPixels

LinkedIn
https://www.linkedin.com/in/marco-napoli-jedipixels

Instagram
https://www.instagram.com/JediPixels

Pixolini Apps
https://pixolini.com

JediPixels Flutter Dev Site https://JediPixels.dev

---

Flutter Website
https://flutter.dev

Dart Website
https://dart.dev

Official Flutter Packages
https://pub.dev

Build and Release Android App
https://docs.flutter.dev/deployment/android

Build and Release iOS App
https://docs.flutter.dev/deployment/ios

Build and Release Web App
https://docs.flutter.dev/deployment/web

Build and Release macOS
https://docs.flutter.dev/deployment/macos

Build and release a Windows desktop app
https://docs.flutter.dev/deployment/windows

Community Online

Flutter Discord
https://discord.com/invite/N7Yshp4

Reddit
https://www.reddit.com/r/FlutterDev

Stack Overflow
https://stackoverflow.com/tags/flutter

Breaking Changes
https://groups.google.com/forum/#!forum/flutter-announce

Community Slack
https://fluttercommunity.dev/joinslack

Flutter Issue Tracker
https://github.com/flutter/flutter/issues

Flutter Public Announcements
https://groups.google.com/g/flutter-announce

Pub - The official package repository for Dart and Flutter apps
https://pub.dev

---

Additional Resources

Enable Impeller Engine

https://docs.flutter.dev/perf/impeller
flutter run web --enable-impeller (example)

Create Production Compiles for iOS and Android

Create Android Google Play Version
flutter build appbundle --build-number=2 (increase build-number for each release)

Create Apple Store iOS Version
flutter build iOS

Create Production Compiles for Web

Web - Run in Chrome Render HTML
flutter run -d chrome --web-renderer html

Web - Run in Chrome using the default renderer option (auto):
flutter run -d chrome

Web - Run your app in profile mode using the HTML renderer:
flutter run -d chrome --web-renderer html --profile (profile to analyze performance)

Web - Build your app in release mode, using the default (auto) option:
flutter build web --release

Web - Build your app in release mode, using just the CanvasKit renderer:
flutter build web --web-renderer canvaskit --release

Web - Build your app in release mode, using just the HTML renderer:
flutter build web --release --web-renderer html

Web - Build your app in release mode, using Auto Detect renderer:
flutter build web --release --dart-define=FLUTTER_WEB_AUTO_DETECT=true