Take 5 - Responsive Design - Flutter

Explorer

Content

ai

vector-recommendations.md

astro

ssr-pocketbase.md

backend

pocketbase-cloudrun.md

pocketbase-webrtc.md

blog

migrating-to-pocketbase.md

podcast-github-pages.md

dart

export-sqlite.md

function-invoking.md

html-web-components.md

print-multiple-objects.md

lit

codemirror-dynamic-theme.md

draggable-dom.md

figma-interop.md

making-a-piano.md

monaco-editor.md

rich-text-editor.md

vscode-extension.md

podcast

creative-engineering

building-the-flutter-widget-maker-and-storyboard.md

flutter-adaptive-ui-and-web-assembly.md

flutter-desktopweb-and-vr.md

flutter-state-management-and-dart-nullability-feat-simon-lightfoot.md

flutter-testing-and-appstore-rejection.md

pro-putt-by-top-golf-feat-jason-clevering.md

talking-about-riverpod-with-remi-rousselet.md

tech-walks

building-a-dnd-agent-with-adk-antigravity-and-gemini-3.md

building-with-antigravity-gemini-cli-and-stitch.md

talking-about-skills-optimizing-prompts-and-building-mcp-servers-in-apps.md

recipes

the-perfect-brisket.md

sqlite

travel

narobi-national-park.md

videos

ai

gemma-now-available-in-kerasnlp-collection-signal-input-in-developer-preview-and-more-dev-news.md

google-computer-use-model-gemini-cli-extensions-and-more-google-developer-news-october-2025.md

how-to-automate-pr-summaries-with-opal-ai.md

how-to-connect-interfaces-to-the-cloud-with-ai-agents.md

leverage-gemini-in-your-android-apps-global-gamer-challenge-and-more-dev-news.md

offline-vector-search-with-sqlite-and-embeddinggemma.md

the-gemini-cookbook-popover-api-lands-in-baseline-and-more-dev-news.md

antigravity

flutter-antigravity-observable-flutter-76.md

how-to-build-with-flutter-and-google-antigravity.md

intro-to-agent-skills.md

dev-show

announcing-tensorstore-chrome-root-program-and-more-dev-news.md

blockchain-based-experiences-govulncheck-v100-and-more-dev-news.md

compression-streams-support-on-all-browsers-androids-new-credential-manager-and-more-dev-news.md

connect-google-services-to-bard-flutters-consulting-directory-and-more-developer-news.md

dataset-search-wear-os-updates-and-more-dev-news.md

jetpack-watch-face-library-datastream-is-ga-bazel-con-recap-and-more-dev-news.md

new-to-the-web-try-out-android-predictive-back-gestures-and-more-dev-news.md

privacy-sandbox-demos-pixel-devices-and-more-dev-news.md

scaling-vision-transformers-compose-pager-and-more-dev-news.md

firebase-studio

build-full-stack-ai-apps-in-minutes-with-firebase-studio.md

building-ai-powered-experiences-with-firebase-studio-and-firebase-platform-rody-davis.md

building-firebase-studio-rules-for-angular-live.md

compile-sqlite-from-source-to-wasm-in-firebase-studio.md

explore-all-the-official-templates-for-firebase-studio.md

firebase-after-hours-14-live-vibe-coding-with-firebase-studio.md

firebase-studio-now-supports-gemma-3-image-inputs-on-the-gemini-developer-api-.md

from-prototype-to-ide-in-firebase-studio.md

how-firebase-studio-accelerates-development.md

import-existing-projects-into-firebase-studio.md

introducing-firebase-studio.md

start-prototyping-with-firebase-studio.md

flutter

create-simple-beautiful-ui-with-flutter.md

flutter-as-a-service-webinar.md

flutter-plugin-live-coding-native-color-picker.md

idx-flutter-by-rody-davis-senior-developer-advocate-google.md

introducing-the-signals_hooks-package-for-flutter-hooks-and-signals.md

material-3-from-design-to-deployment.md

material-you-applying-dynamic-color-to-your-app-and-brand.md

rody-davis-building-adaptive-uiux-in-flutter.md

interviews

60-flutter-with-rody-davis.md

chat-with-lit-1-westbrook-johnson-adobe.md

chatting-with-a-googler-rodydavis-google-flutter-firebase-developers-ai-vibecoding.md

interview-with-rody-davis-firebase.md

speaker-interview-rody-davis-david-khourshid-and-joo-luiz-s-kestering.md

take-5

adaptive-dialogs-flutter.md

internationalization-flutter.md

master-detail-scaffold-flutter.md

responsive-design-flutter.md

shared-preferences-flutter.md

your-first-flutter-project.md

talks

5-things-you-can-do-to-prepare-your-app-for-large-screens-session.md

design-at-scale-with-web-components-and-ducks.md

findevs-flutter-hackathon-2019-orlando-winner.md

google-cloud-next-2022-dart-partnership-with-github-and-more-dev-news.md

google-io-2023-passkeys-passwordless-future-and-more-dev-news.md

material-you-figma-bringing-dynamic-color-brand-together-rody-davis-ivy-knight-schema-2021.md

moving-an-angular-app-to-flutter-web-devfest-fl-2019.md

road-to-flutter-city-rody-davis.md

space-apps-orlando-2019-space-curiosity.md

women-in-machine-learning-symposium-flutter-forward-more-dev-news.md

web

file-based-routing.md

html-code-sandbox.md

preact-signals.md

snippets

color-utilities.md

m3-to-m2-adapter.md

Outline

Take 5 - Responsive Design - Flutter

Related

Rody Davis: Building Adaptive UI/UX in Flutter Deep Linking for Flutter Web How to build a native cross platform project with Flutter Server Side Rendering Flutter Apps with RFW How to build with Flutter and Google Antigravity

Tags

flutter video youtube github web

videos › take-5 › responsive-design-flutter.md

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

# Take 5 - Responsive Design - Flutter

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/kGhkiKp939c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

## Description

Source Code: https://github.com/rodydavis/flutter_take_5

In this video I walk through how to build a flutter app with an adaptive scaffold. This is using a technique to have each widget define layout behavior based on breakpoints. This is very useful for having total reuse over all your screens. Responsive layout doesn't mean you need to have duplicate code.

I also mention the package I created to abstract this for you and it can be found on pub here:
https://pub.dev/packages/navigation_rail

In the upcoming videos I will go more in depth on how to adapt the individual screens. This video is mostly about how to do the main navigation in a responsive way.

Markdown