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

Focused View

Marco Napoli

1:07:22

7 View

1. Introduction

1. Introduction.mp4

04:59

2. Who is your instructor.mp4

01:55

3. Resources.html

2. Base Structure Overview Helpers and Models

1. Intro.mp4

00:53

2. Main.mp4

00:42

3. Constants.mp4

02:10

4. Formatters.mp4

01:12

5. Navigation Transitions.mp4

00:53

6. Themes.mp4

01:35

7. User Model.mp4

01:53

8. Summary.mp4

00:32

3. Base Structure Overview State and Widgets

1. Intro.mp4

01:50

2. App State.mp4

02:14

3. App State Notifier.mp4

02:30

4. App Bar Elevated.mp4

01:28

5. Graph Bar.mp4

03:42

6. Navigation Bar.mp4

00:57

7. Navigation Rail.mp4

01:53

8. Title Gradient Bar.mp4

01:11

9. macOS DebugProfile Entitlements Security.mp4

00:47

10. Web Script Render as html.mp4

00:55

11. Summary.mp4

01:17

4. Creating Helpers and Pages

1. Intro.mp4

00:36

2. Create Split Screen Layout.mp4

02:50

3. Create Constants and Logic.mp4

05:03

4. Create Responsive Layout Builder.mp4

03:37

5. Create Desktop Web Layout.mp4

08:00

6. Create Mobile Tablet Layout.mp4

03:28

7. Creating Home Layout.mp4

02:43

8. Live Demos for iPhone, iPad, macOS, Web, Pixel 7, Fold-Out 8, and Windows....mp4

03:25

9. Summary Helpers and Pages.mp4

00:28

5. Course Summary

1. Course Summary Tasks, Goals, and Apps Demo.mp4

01:44

Description

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

Who is this for?

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

Beginner and experienced developers

What You Need to Know?

Basic Flutter and Dart knowledge

More details

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 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

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.

Who this course is for:
Easily create Mobile, Tablet, Desktop, and Web Responsive Split-Screen Design in Flutter
Beginner and experienced developers

User Reviews

Rating

average 0

Total votes0

Focused display

Marco Napoli is an active and passionate developer, specializing in mobile app development for iOS, Android, Desktop, and Web platforms.His journey in mobile app development began in 2008 when he created his first native iPhone app. However, it was during the Google I/O event in 2017 that Marco discovered Flutter, and since then, he has been fully immersed in Flutter development. Marco was even one of the first developers to be interviewed by Hillel Coren for the popular "It's All Widgets" Flutter podcast.Currently, Marco's focus revolves around the development of mobile, desktop, and web apps through his company, Pixolini, Inc. Alongside his professional work, he finds great joy in sharing his knowledge and expertise with others in the field of software development, including through his published book: "Beginning Flutter: A Hands-On Guide To App Development."On a personal note, Marco has a love for caffeine - he cannot code without his trusty companions: espresso, cappuccino, and coffee. He's also an avid enthusiast of the martial arts.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.