Flutter Split-Screen Responsive Design: Mobile, Desktop, Web

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

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

Requirements

Basic Flutter and Dart knowledge

Description

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.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 DartLearn UI/UX techniques to wow the user’s experience and keep the company’s branding consistent between platformsUse the latest cross-platform Flutter framework and Dart language to create pixel perfect UI designs and adaptivityCreate reusable widgetsUse Layout Builder to create a responsive layout for mobile and webSeparate concerns between UI, state, and business logicLearn how to use State Management without using third party librariesLearn how to create reactive screens to refresh contentCustom navigation between platformsCreate beautiful navigation transitions combining Hero and Navigation transitionWhy 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.FastFlutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.ProductiveBuild and iterate quickly with Hot Reload. Update code and see changes almost instantly, without losing state.\FlexibleControl every pixel to create customized, adaptive designs that look and feel great on any screen.Multi-PlatformReach users on every screenDeploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices.Stable & ReliableTrusted by manyFlutter is supported and used by Google, trusted by well-known brands around the world, and maintained by a community of global developers.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Who is your instructor?

Lecture 3 Resources

Section 2: Base Structure: Overview Helpers and Models

Lecture 4 Intro

Lecture 5 Main

Lecture 6 Constants

Lecture 7 Formatters

Lecture 8 Navigation Transitions

Lecture 9 Themes

Lecture 10 User Model

Lecture 11 Summary

Section 3: Base Structure: Overview State and Widgets

Lecture 12 Intro

Lecture 13 App State

Lecture 14 App State Notifier

Lecture 15 App Bar Elevated

Lecture 16 Graph Bar

Lecture 17 Navigation Bar

Lecture 18 Navigation Rail

Lecture 19 Title Gradient Bar

Lecture 20 macOS: DebugProfile Entitlements Security

Lecture 21 Web: Script Render as html

Lecture 22 Summary

Section 4: Creating: Helpers and Pages

Lecture 23 Intro

Lecture 24 Create Split Screen Layout

Lecture 25 Create Constants and Logic

Lecture 26 Create Responsive Layout Builder

Lecture 27 Create Desktop Web Layout

Lecture 28 Create Mobile Tablet Layout

Lecture 29 Creating Home Layout

Lecture 30 Live Demo's for iPhone, iPad, macOS, Web, Pixel 7, Fold-Out 8, and Windows…

Lecture 31 Summary: Helpers and Pages

Section 5: Course Summary

Lecture 32 Course Summary: Tasks, Goals, and App's Demo

Easily create Mobile, Tablet, Desktop, and Web Responsive Split-Screen Design in Flutter,Beginner and experienced developers