[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technologies":3,"\u002Fopen-source\u002Fflutter-adaptive-layout":167},[4,10,15,21,26,32,38,43,48,53,58,63,68,73,77,82,87,92,97,103,108,113,118,123,128,133,138,143,147,152,157,162],{"title":5,"description":6,"slug":7,"category":8,"icon":9},"Android","Every app we ship reaches Android — platform APIs, background execution, permissions, and the store requirements that come with them.","android","framework","logos:android-icon",{"title":11,"description":12,"slug":13,"category":8,"icon":14},"Angular","The front-end framework we work in when a product is already Angular — a batteries-included structure that suits large, long-lived apps.","angular","logos:angular-icon",{"title":16,"description":17,"slug":18,"category":19,"icon":20},"Dart","The language every Flutter app we ship is written in — sound null safety, real pattern matching, and a compiler that targets native and the web.","dart","language","logos:dart",{"title":22,"description":23,"slug":24,"category":8,"icon":25},"Django","The Python framework we use when a product needs an admin, auth and a real data model on day one rather than a hand-rolled service.","django","logos:django-icon",{"title":27,"description":28,"slug":29,"category":30,"icon":31},"Docker","Every service we build ships as a container, so what runs on a laptop, in CI and in production is one artefact rather than three of them.","docker","infrastructure","logos:docker-icon",{"title":33,"description":34,"slug":35,"category":36,"icon":37},"Fastlane","The release automation behind our mobile work — signing, builds and store uploads run from CI instead of from one engineer's laptop on release day.","fastlane","tools","logos:fastlane",{"title":39,"description":40,"slug":41,"category":8,"icon":42},"Flutter","Our primary mobile stack since 2018 — one Dart codebase shipping to iOS, Android, web and desktop without a separate team per platform.","flutter","logos:flutter",{"title":44,"description":45,"slug":46,"category":36,"icon":47},"Git","Every project we touch lives in Git — reviewed pull requests, CI on every branch, and a history that still makes sense months later.","git","logos:git-icon",{"title":49,"description":50,"slug":51,"category":19,"icon":52},"Go","Our backend language for real-time APIs and services under load — small binaries, fast builds, and concurrency that stays readable.","go","logos:gopher",{"title":54,"description":55,"slug":56,"category":30,"icon":57},"Google Cloud","The cloud our production workloads run on — managed Kubernetes, storage and networking, without hand-built servers nobody wants to maintain.","gcp","logos:google-cloud",{"title":59,"description":60,"slug":61,"category":36,"icon":62},"Gradle","The build system every Android release goes through — product flavours, signing configs, and the dependency wiring under a Flutter app.","gradle","logos:gradle",{"title":64,"description":65,"slug":66,"category":30,"icon":67},"Helm","How we package a Kubernetes deployment — service, config, secrets and ingress as one versioned unit that can be promoted and rolled back.","helm","logos:helm",{"title":69,"description":70,"slug":71,"category":19,"icon":72},"Kotlin","What we reach for when a Flutter app needs real Android underneath it — platform channels, background work, and native SDK integrations.","kotlin","logos:kotlin-icon",{"title":74,"description":75,"slug":76,"category":8,"icon":72},"Kotlin Multiplatform","Sharing business logic across iOS and Android while each platform keeps its own native UI — the alternative when Flutter is not the right fit.","kmp",{"title":78,"description":79,"slug":80,"category":30,"icon":81},"Kubernetes","How we run services in production — Helm-packaged deployments, rollouts that can be rolled back, and scaling that does not need a person at 3am.","kubernetes","logos:kubernetes",{"title":83,"description":84,"slug":85,"category":30,"icon":86},"NATS","Lightweight messaging between services — publish\u002Fsubscribe and request\u002Freply without the operational weight of a full broker cluster.","nats","logos:nats-icon",{"title":88,"description":89,"slug":90,"category":8,"icon":91},"Nuxt","Vue with server rendering, routing and SEO handled — how we build marketing sites and web apps that must be fast and indexable on first load.","nuxt","logos:nuxt-icon",{"title":93,"description":94,"slug":95,"category":19,"icon":96},"PHP","Where we work with an existing PHP backend — extending it, integrating with it, and building the mobile and web clients it has to serve.","php","logos:php",{"title":98,"description":99,"slug":100,"category":101,"icon":102},"PostgreSQL","Our default database — the one we reach for unless a product gives us a specific reason not to, from schema design through to index tuning.","postgres","database","logos:postgresql",{"title":104,"description":105,"slug":106,"category":19,"icon":107},"Python","Our language for backends, data work and AI integrations — including the Python bindings we ship for our own Rust tooling.","python","logos:python",{"title":109,"description":110,"slug":111,"category":8,"icon":112},"React","The front-end library we work in when a product is already React — components, hooks, and the ecosystem that has grown around them.","react","logos:react",{"title":114,"description":115,"slug":116,"category":101,"icon":117},"Redis","Where we put data that has to be fast and can be rebuilt — caches, sessions, rate limits, and the queues behind a product's slow paths.","redis","logos:redis",{"title":119,"description":120,"slug":121,"category":19,"icon":122},"Ruby","The language our mobile release automation is written in — Fastlane lanes, custom actions, and the CI glue that ships builds to the stores.","ruby","logos:ruby",{"title":124,"description":125,"slug":126,"category":19,"icon":127},"Rust","Where we go when performance and correctness both matter — document rendering, CLI tooling, and services that have to stay fast and predictable.","rust","simple-icons:rust",{"title":129,"description":130,"slug":131,"category":101,"icon":132},"SQLite","The database that ships inside the app — local caches, offline-first storage, and anything that still has to work with no network.","sqlite","logos:sqlite",{"title":134,"description":135,"slug":136,"category":8,"icon":137},"Strapi","A headless CMS we reach for when editors need to own the content — a real admin and a clean API, without building either from scratch.","strapi","logos:strapi-icon",{"title":139,"description":140,"slug":141,"category":19,"icon":142},"Swift","What we reach for when a Flutter app needs real iOS underneath it — platform channels, native SDK integrations, widgets and App Clips.","swift","logos:swift",{"title":144,"description":145,"slug":146,"category":8,"icon":142},"SwiftUI","Apple's UI framework, where we build the native surfaces a Flutter app cannot own — widgets, App Clips, extensions and system integrations.","swiftui",{"title":148,"description":149,"slug":150,"category":8,"icon":151},"Tailwind CSS","How we style every front end we build — utility classes and design tokens instead of a stylesheet that only ever grows and is never deleted.","tailwind","logos:tailwindcss-icon",{"title":153,"description":154,"slug":155,"category":19,"icon":156},"TypeScript","The default for everything we write for the browser and for Node services — types that catch integration bugs before they reach a review.","typescript","logos:typescript-icon",{"title":158,"description":159,"slug":160,"category":8,"icon":161},"Vue","Our front-end framework for admin panels, merchant dashboards and product web apps that have to stay maintainable for years, not sprints.","vue","logos:vue",{"title":163,"description":164,"slug":165,"category":36,"icon":166},"Whisper","OpenAI's open-source speech recognition model — the transcription engine behind voice input, running as both a backend service and on-device in the app.","whisper","simple-icons:openai",{"id":168,"title":169,"body":170,"description":1003,"extension":1004,"links":1005,"meta":1009,"metaDescription":1010,"metaTitle":1011,"navigation":714,"ogDescription":1012,"path":1013,"repository":1014,"seo":1018,"slug":1017,"stem":1019,"technologies":1020,"updated":1021,"__hash__":1022,"stats":1023},"open_source_en\u002Fopen-source\u002Fflutter-adaptive-layout.md","Flutter Adaptive Layout",{"type":171,"value":172,"toc":990},"minimark",[173,178,182,198,201,219,223,244,417,420,428,434,438,503,507,514,595,605,609,614,623,627,630,634,647,651,654,658,661,683,690,693,798,807,966,972,982,986],[174,175,177],"h2",{"id":176},"the-problem","The Problem",[179,180,181],"p",{},"A Flutter app that ships to phones, tablets, and desktop needs more than a flexible column. A screen that reads well at 390 logical pixels wide wants a centred card at 700 and a sidebar at 1200. Flutter gives you the measurements but no structure for acting on them.",[179,183,184,185,189,190,193,194,197],{},"So the checks spread out. A ",[186,187,188],"code",{},"MediaQuery.of(context).size.width > 600"," here, a ",[186,191,192],{},"LayoutBuilder"," there, a ternary inside a ",[186,195,196],{},"Padding"," three widgets down. Each one is defensible on its own; together they are a layout policy that is written down in no single place.",[179,199,200],{},"Common issues include:",[202,203,204,208,213,216],"ul",{},[205,206,207],"li",{},"Breakpoint values duplicated across dozens of widgets, drifting apart as the design changes",[205,209,210,212],{},[186,211,192],{}," reporting the parent's constraints when what you wanted was the device",[205,214,215],{},"Layouts that flip to a tablet variant the moment a phone is rotated to landscape",[205,217,218],{},"Widget trees where the responsive branching is impossible to see without reading every child",[174,220,222],{"id":221},"how-flutter_adaptive_layout-solves-it","How flutter_adaptive_layout Solves It",[179,224,225,228,229,232,233,236,237,240,241,243],{},[186,226,227],{},"AdaptiveLayout"," takes one builder per screen size and a ",[186,230,231],{},"child",". It measures the device through ",[186,234,235],{},"MediaQuery",", maps that to a ",[186,238,239],{},"ScreenSize",", and builds only the matching variant — with the ",[186,242,231],{}," created once and handed to whichever builder wins.",[245,246,250],"pre",{"className":247,"code":248,"language":18,"meta":249,"style":249},"language-dart shiki shiki-themes material-theme-lighter github-light github-dark","AdaptiveLayout(\n  smallBuilder: (context, child) => child!,\n  mediumBuilder: (context, child) => Center(child: child),\n  largeBuilder: (context, child) => Row(\n    children: [const Sidebar(), Expanded(child: child!)],\n  ),\n  child: const MyHomePage(),\n)\n","",[186,251,252,264,296,325,346,385,393,411],{"__ignoreMap":249},[253,254,257,260],"span",{"class":255,"line":256},"line",1,[253,258,227],{"class":259},"sZMiF",[253,261,263],{"class":262},"su5hD","(\n",[253,265,267,270,274,277,281,284,287,290,293],{"class":255,"line":266},2,[253,268,269],{"class":262},"  smallBuilder",[253,271,273],{"class":272},"smGrS",":",[253,275,276],{"class":262}," (context",[253,278,280],{"class":279},"sP7_E",",",[253,282,283],{"class":262}," child) ",[253,285,286],{"class":272},"=>",[253,288,289],{"class":262}," child",[253,291,292],{"class":272},"!",[253,294,295],{"class":279},",\n",[253,297,299,302,304,306,308,310,312,315,318,320,323],{"class":255,"line":298},3,[253,300,301],{"class":262},"  mediumBuilder",[253,303,273],{"class":272},[253,305,276],{"class":262},[253,307,280],{"class":279},[253,309,283],{"class":262},[253,311,286],{"class":272},[253,313,314],{"class":259}," Center",[253,316,317],{"class":262},"(child",[253,319,273],{"class":272},[253,321,322],{"class":262}," child)",[253,324,295],{"class":279},[253,326,328,331,333,335,337,339,341,344],{"class":255,"line":327},4,[253,329,330],{"class":262},"  largeBuilder",[253,332,273],{"class":272},[253,334,276],{"class":262},[253,336,280],{"class":279},[253,338,283],{"class":262},[253,340,286],{"class":272},[253,342,343],{"class":259}," Row",[253,345,263],{"class":262},[253,347,349,352,354,357,361,364,367,369,372,374,376,378,380,383],{"class":255,"line":348},5,[253,350,351],{"class":262},"    children",[253,353,273],{"class":272},[253,355,356],{"class":262}," [",[253,358,360],{"class":359},"sbsja","const",[253,362,363],{"class":259}," Sidebar",[253,365,366],{"class":262},"()",[253,368,280],{"class":279},[253,370,371],{"class":259}," Expanded",[253,373,317],{"class":262},[253,375,273],{"class":272},[253,377,289],{"class":262},[253,379,292],{"class":272},[253,381,382],{"class":262},")]",[253,384,295],{"class":279},[253,386,388,391],{"class":255,"line":387},6,[253,389,390],{"class":262},"  )",[253,392,295],{"class":279},[253,394,396,399,401,404,407,409],{"class":255,"line":395},7,[253,397,398],{"class":262},"  child",[253,400,273],{"class":272},[253,402,403],{"class":359}," const",[253,405,406],{"class":259}," MyHomePage",[253,408,366],{"class":262},[253,410,295],{"class":279},[253,412,414],{"class":255,"line":413},8,[253,415,416],{"class":262},")\n",[179,418,419],{},"The responsive decision now lives in one widget, at the top of the subtree it governs, written as three layouts rather than a chain of conditions.",[179,421,422],{},[423,424],"img",{"alt":425,"src":426,"style":427},"The example app's small-screen layout, rendered on an iPhone 14","\u002Fopen-source\u002Fflutter-adaptive-layout\u002Fiphone_14.png","max-height: 500px; height: auto; width: auto;",[179,429,430],{},[423,431],{"alt":432,"src":433},"The same app on an iPad Pro 12.9-inch, where largeBuilder puts the content in a wider card","\u002Fopen-source\u002Fflutter-adaptive-layout\u002Fipad_12_inch.png",[174,435,437],{"id":436},"what-it-supports","What It Supports",[202,439,440,462,468,474,484,494],{},[205,441,442,446,447,450,451,454,455,458,459,461],{},[443,444,445],"strong",{},"Screen-size-driven layouts"," — ",[186,448,449],{},"smallBuilder",", ",[186,452,453],{},"mediumBuilder",", and ",[186,456,457],{},"largeBuilder",", each optional; a missing one falls back to ",[186,460,231],{},", so you can style only the sizes you care about",[205,463,464,467],{},[443,465,466],{},"Breakpoints you control"," — defaults of 400 and 600 logical pixels, overridable per widget or for the whole app",[205,469,470,473],{},[443,471,472],{},"Build the child once"," — switching layouts wraps your content instead of rebuilding it from scratch",[205,475,476,479,480,483],{},[443,477,478],{},"Rotation stability"," — classification reads ",[186,481,482],{},"MediaQuery.of(context).size.shortestSide",", so a phone stays small in landscape",[205,485,486,489,490,493],{},[443,487,488],{},"Pluggable sizing logic"," — implement ",[186,491,492],{},"ScreenSizeQualifier"," to classify by width, platform, hinge state, or whatever your design system uses",[205,495,496,499,500,502],{},[443,497,498],{},"No dependencies"," — pure Flutter on top of ",[186,501,235],{},", working on iOS, Android, web, macOS, Windows, and Linux",[174,504,506],{"id":505},"how-screen-size-is-decided","How Screen Size Is Decided",[179,508,509,510,513],{},"The default ",[186,511,512],{},"BreakpointsQualifier"," compares the shortest side against two breakpoints, inclusively — a value exactly equal to a breakpoint belongs to the smaller bucket.",[515,516,517,536],"table",{},[518,519,520],"thead",{},[521,522,523,527,530,533],"tr",{},[524,525,526],"th",{},"Screen size",[524,528,529],{},"Condition",[524,531,532],{},"Default range",[524,534,535],{},"Typical device",[537,538,539,558,576],"tbody",{},[521,540,541,547,552,555],{},[542,543,544],"td",{},[186,545,546],{},"ScreenSize.small",[542,548,549],{},[186,550,551],{},"shortestSide \u003C= smallBreakpoint",[542,553,554],{},"0–400 logical pixels",[542,556,557],{},"Phones",[521,559,560,565,570,573],{},[542,561,562],{},[186,563,564],{},"ScreenSize.medium",[542,566,567],{},[186,568,569],{},"shortestSide \u003C= mediumBreakpoint",[542,571,572],{},"401–600 logical pixels",[542,574,575],{},"Small tablets",[521,577,578,583,589,592],{},[542,579,580],{},[186,581,582],{},"ScreenSize.large",[542,584,585,586],{},"above ",[186,587,588],{},"mediumBreakpoint",[542,590,591],{},"601+ logical pixels",[542,593,594],{},"Large tablets, desktop",[179,596,597,598,600,601,604],{},"Breakpoints resolve in a fixed order, first defined value winning: the arguments passed to ",[186,599,512],{},", then the nearest ancestor ",[186,602,603],{},"BreakpointsSetting",", then the built-in 400 and 600.",[174,606,608],{"id":607},"real-world-use-cases","Real-World Use Cases",[610,611,613],"h3",{"id":612},"phone-first-apps-growing-a-tablet-build","Phone-first apps growing a tablet build",[179,615,616,617,619,620,622],{},"An app that started on phones can keep every screen it already has and add a ",[186,618,457],{}," where a wider layout pays off. Screens with no builder for a size render the ",[186,621,231],{}," unchanged, so the migration happens screen by screen instead of all at once.",[610,624,626],{"id":625},"masterdetail-navigation","Master–detail navigation",[179,628,629],{},"A list that pushes a detail route on a phone can render list and detail side by side on a tablet. The two variants are declared next to each other in one widget, which makes the difference between them reviewable in a diff.",[610,631,633],{"id":632},"design-systems-with-their-own-breakpoints","Design systems with their own breakpoints",[179,635,636,637,640,641,643,644,646],{},"Wrap ",[186,638,639],{},"MaterialApp"," in ",[186,642,603],{}," once and every ",[186,645,227],{}," in the tree picks up the design system's numbers. Changing them later is a one-line edit, not a search across the codebase.",[610,648,650],{"id":649},"web-and-desktop-windows","Web and desktop windows",[179,652,653],{},"On web and desktop the measured size is the window, so layouts respond as the user resizes it — the same code path that handles a tablet handles a resized browser.",[174,655,657],{"id":656},"getting-started","Getting Started",[179,659,660],{},"Install the package:",[245,662,666],{"className":663,"code":664,"language":665,"meta":249,"style":249},"language-shell shiki shiki-themes material-theme-lighter github-light github-dark","flutter pub add flutter_adaptive_layout\n","shell",[186,667,668],{"__ignoreMap":249},[253,669,670,673,677,680],{"class":255,"line":256},[253,671,41],{"class":672},"sbgvK",[253,674,676],{"class":675},"s_sjI"," pub",[253,678,679],{"class":675}," add",[253,681,682],{"class":675}," flutter_adaptive_layout\n",[179,684,685,686,689],{},"Requires Dart ",[186,687,688],{},">=2.18.5 \u003C4.0.0"," and Flutter 1.17+.",[179,691,692],{},"Then import it and wrap the widget whose layout should adapt:",[245,694,696],{"className":247,"code":695,"language":18,"meta":249,"style":249},"import 'package:flutter_adaptive_layout\u002Fflutter_adaptive_layout.dart';\n\nAdaptiveLayout(\n  largeBuilder: (context, child) => Center(\n    child: SizedBox(width: 600, child: child),\n  ),\n  child: const ArticleView(), \u002F\u002F used as-is on small and medium screens\n)\n",[186,697,698,710,716,722,740,769,775,794],{"__ignoreMap":249},[253,699,700,704,707],{"class":255,"line":256},[253,701,703],{"class":702},"sw1J6","import",[253,705,706],{"class":675}," 'package:flutter_adaptive_layout\u002Fflutter_adaptive_layout.dart'",[253,708,709],{"class":279},";\n",[253,711,712],{"class":255,"line":266},[253,713,715],{"emptyLinePlaceholder":714},true,"\n",[253,717,718,720],{"class":255,"line":298},[253,719,227],{"class":259},[253,721,263],{"class":262},[253,723,724,726,728,730,732,734,736,738],{"class":255,"line":327},[253,725,330],{"class":262},[253,727,273],{"class":272},[253,729,276],{"class":262},[253,731,280],{"class":279},[253,733,283],{"class":262},[253,735,286],{"class":272},[253,737,314],{"class":259},[253,739,263],{"class":262},[253,741,742,745,747,750,753,755,759,761,763,765,767],{"class":255,"line":348},[253,743,744],{"class":262},"    child",[253,746,273],{"class":272},[253,748,749],{"class":259}," SizedBox",[253,751,752],{"class":262},"(width",[253,754,273],{"class":272},[253,756,758],{"class":757},"srdBf"," 600",[253,760,280],{"class":279},[253,762,289],{"class":262},[253,764,273],{"class":272},[253,766,322],{"class":262},[253,768,295],{"class":279},[253,770,771,773],{"class":255,"line":387},[253,772,390],{"class":262},[253,774,295],{"class":279},[253,776,777,779,781,783,786,788,790],{"class":255,"line":395},[253,778,398],{"class":262},[253,780,273],{"class":272},[253,782,403],{"class":359},[253,784,785],{"class":259}," ArticleView",[253,787,366],{"class":262},[253,789,280],{"class":279},[253,791,793],{"class":792},"sutJx"," \u002F\u002F used as-is on small and medium screens\n",[253,795,796],{"class":255,"line":413},[253,797,416],{"class":262},[179,799,800,801,803,804,273],{},"To classify screens differently, implement ",[186,802,492],{}," and pass it as ",[186,805,806],{},"qualifier",[245,808,810],{"className":247,"code":809,"language":18,"meta":249,"style":249},"class WidthQualifier extends ScreenSizeQualifier {\n  @override\n  ScreenSize qualify(BuildContext context) {\n    final width = MediaQuery.of(context).size.width;\n    if (width \u003C 600) return ScreenSize.small;\n    if (width \u003C 1024) return ScreenSize.medium;\n    return ScreenSize.large;\n  }\n}\n",[186,811,812,829,834,852,887,917,941,955,960],{"__ignoreMap":249},[253,813,814,817,820,823,826],{"class":255,"line":256},[253,815,816],{"class":272},"class",[253,818,819],{"class":259}," WidthQualifier",[253,821,822],{"class":272}," extends",[253,824,825],{"class":259}," ScreenSizeQualifier",[253,827,828],{"class":262}," {\n",[253,830,831],{"class":255,"line":266},[253,832,833],{"class":359},"  @override\n",[253,835,836,839,843,846,849],{"class":255,"line":298},[253,837,838],{"class":259},"  ScreenSize",[253,840,842],{"class":841},"sGLFI"," qualify",[253,844,845],{"class":262},"(",[253,847,848],{"class":259},"BuildContext",[253,850,851],{"class":262}," context) {\n",[253,853,854,857,860,863,866,869,872,875,877,880,882,885],{"class":255,"line":327},[253,855,856],{"class":359},"    final",[253,858,859],{"class":262}," width ",[253,861,862],{"class":272},"=",[253,864,865],{"class":259}," MediaQuery",[253,867,868],{"class":279},".",[253,870,871],{"class":841},"of",[253,873,874],{"class":262},"(context)",[253,876,868],{"class":279},[253,878,879],{"class":262},"size",[253,881,868],{"class":279},[253,883,884],{"class":262},"width",[253,886,709],{"class":279},[253,888,889,893,896,899,901,904,907,910,912,915],{"class":255,"line":348},[253,890,892],{"class":891},"sVHd0","    if",[253,894,895],{"class":262}," (width ",[253,897,898],{"class":272},"\u003C",[253,900,758],{"class":757},[253,902,903],{"class":262},") ",[253,905,906],{"class":891},"return",[253,908,909],{"class":259}," ScreenSize",[253,911,868],{"class":279},[253,913,914],{"class":262},"small",[253,916,709],{"class":279},[253,918,919,921,923,925,928,930,932,934,936,939],{"class":255,"line":387},[253,920,892],{"class":891},[253,922,895],{"class":262},[253,924,898],{"class":272},[253,926,927],{"class":757}," 1024",[253,929,903],{"class":262},[253,931,906],{"class":891},[253,933,909],{"class":259},[253,935,868],{"class":279},[253,937,938],{"class":262},"medium",[253,940,709],{"class":279},[253,942,943,946,948,950,953],{"class":255,"line":395},[253,944,945],{"class":891},"    return",[253,947,909],{"class":259},[253,949,868],{"class":279},[253,951,952],{"class":262},"large",[253,954,709],{"class":279},[253,956,957],{"class":255,"line":413},[253,958,959],{"class":262},"  }\n",[253,961,963],{"class":255,"line":962},9,[253,964,965],{"class":262},"}\n",[179,967,968,971],{},[186,969,970],{},"qualify"," runs on every build, so keep it cheap and free of side effects.",[179,973,974,975,868],{},"A complete, runnable app is in the ",[976,977,981],"a",{"href":978,"rel":979},"https:\u002F\u002Fgithub.com\u002Fnerdy-pro\u002Fflutter-adaptive-layout\u002Ftree\u002Fmain\u002Fexample",[980],"nofollow","example directory",[983,984],"questions",{":items":985},"[{\"title\":\"How is this different from LayoutBuilder?\",\"text\":\"LayoutBuilder reports the constraints handed down by the parent widget, which may be far smaller than the display. AdaptiveLayout classifies the device or window through MediaQuery, so a widget nested deep in the tree still knows it is running on a tablet. Use LayoutBuilder to fit an available box; use AdaptiveLayout to choose a layout for the device.\"},{\"title\":\"Does the layout change when the device rotates?\",\"text\":\"No. Classification uses MediaQuery.of(context).size.shortestSide, which is the same in portrait and landscape, so a phone stays ScreenSize.small when rotated. If you want orientation-sensitive layouts, implement a custom ScreenSizeQualifier that reads size.width instead.\"},{\"title\":\"Do I have to provide all three builders?\",\"text\":\"No. Any builder can be omitted and the child is used for that screen size instead. Providing neither a matching builder nor a child throws an UnimplementedError.\"},{\"title\":\"How do I change the default breakpoints?\",\"text\":\"Either pass BreakpointsQualifier(smallBreakpoint: ..., mediumBreakpoint: ...) to a single AdaptiveLayout, or wrap your app in BreakpointsSetting to change them everywhere. Constructor values win over BreakpointsSetting, which wins over the defaults of 400 and 600.\"},{\"title\":\"Does it work on web and desktop?\",\"text\":\"Yes. It depends only on MediaQuery, so it runs on every Flutter target. On web and desktop the measured size is the window, so layouts respond as the window is resized.\"}]",[987,988,989],"style",{},"html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}",{"title":249,"searchDepth":266,"depth":266,"links":991},[992,993,994,995,996,1002],{"id":176,"depth":266,"text":177},{"id":221,"depth":266,"text":222},{"id":436,"depth":266,"text":437},{"id":505,"depth":266,"text":506},{"id":607,"depth":266,"text":608,"children":997},[998,999,1000,1001],{"id":612,"depth":298,"text":613},{"id":625,"depth":298,"text":626},{"id":632,"depth":298,"text":633},{"id":649,"depth":298,"text":650},{"id":656,"depth":266,"text":657},"A Flutter package that builds a different widget layout for small, medium, and large screens — with breakpoints you control and no dependencies beyond MediaQuery.","md",[1006],{"type":1007,"url":1008},"pub_dev","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_adaptive_layout",{},"Flutter package that renders a different layout on phones, tablets, and desktops. One builder per screen size, custom breakpoints, no dependencies.","Flutter responsive layouts by screen size","One builder per screen size instead of width checks scattered through your widget tree. A small Flutter package for responsive UI.","\u002Fopen-source\u002Fflutter-adaptive-layout",{"type":1015,"company":1016,"name":1017},"github","nerdy-pro","flutter-adaptive-layout",{"title":169,"description":1003},"open-source\u002Fflutter-adaptive-layout",[41,18],"2026-08-15","4oEG-c9UR6YcNOU_lkRsJNcJPyofCaL6oiuug4LRjNU",{"forks":1024,"stars":256,"contributors":1025,"last_release":1031,"issues":1024,"has_contribution_guide":1032,"license":1033,"last_updated":1034,"watchers":256},0,[1026],{"login":1027,"profile_url":1028,"avatar_url":1029,"contributions":1030},"thenixan","https:\u002F\u002Fgithub.com\u002Fthenixan","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F3602098?v=4",26,"v1.1.0",false,"MIT","2026-08-13T19:18:10Z"]