[{"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","Elke app die we uitbrengen bereikt Android — platform-API's, uitvoering op de achtergrond, permissies en de winkeleisen die daarbij horen.","android","framework","logos:android-icon",{"title":11,"description":12,"slug":13,"category":8,"icon":14},"Angular","Het front-endframework waarin we werken als een product al Angular is — een kant-en-klare structuur die past bij grote, langlevende applicaties.","angular","logos:angular-icon",{"title":16,"description":17,"slug":18,"category":19,"icon":20},"Dart","De taal waarin elke Flutter-app die we uitbrengen geschreven is — sound null safety, echte pattern matching, en een compiler voor native en web.","dart","language","logos:dart",{"title":22,"description":23,"slug":24,"category":8,"icon":25},"Django","Het Python-framework dat we pakken als een product op dag één een beheeromgeving, authenticatie en een echt datamodel nodig heeft.","django","logos:django-icon",{"title":27,"description":28,"slug":29,"category":30,"icon":31},"Docker","Elke service die we bouwen verschijnt als container, zodat wat op een laptop, in CI en in productie draait één artefact is en niet drie verschillende.","docker","infrastructure","logos:docker-icon",{"title":33,"description":34,"slug":35,"category":36,"icon":37},"Fastlane","De releaseautomatisering achter ons mobiele werk — ondertekenen, builds en winkeluploads draaien vanuit CI, niet vanaf één laptop.","fastlane","tools","logos:fastlane",{"title":39,"description":40,"slug":41,"category":8,"icon":42},"Flutter","Onze belangrijkste mobiele stack sinds 2018 — één Dart-codebase die uitkomt op iOS, Android, web en desktop zonder een apart team per platform.","flutter","logos:flutter",{"title":44,"description":45,"slug":46,"category":36,"icon":47},"Git","Elk project dat we aanraken leeft in Git — beoordeelde pull requests, CI op elke branch, en een historie die maanden later nog te volgen is.","git","logos:git-icon",{"title":49,"description":50,"slug":51,"category":19,"icon":52},"Go","Onze backendtaal voor realtime-API's en services onder belasting — kleine binaries, snelle builds, en gelijktijdigheid die leesbaar blijft.","go","logos:gopher",{"title":54,"description":55,"slug":56,"category":30,"icon":57},"Google Cloud","De cloud waarop onze productieworkloads draaien — beheerde Kubernetes, opslag en netwerken, zonder handgebouwde servers die niemand wil onderhouden.","gcp","logos:google-cloud",{"title":59,"description":60,"slug":61,"category":36,"icon":62},"Gradle","Het buildsysteem waar elke Android-release doorheen gaat — product flavours, ondertekeningsconfiguraties, en de afhankelijkheden onder een Flutter-app.","gradle","logos:gradle",{"title":64,"description":65,"slug":66,"category":30,"icon":67},"Helm","Hoe we een Kubernetes-uitrol verpakken — service, configuratie, secrets en ingress als één versiebeheerde eenheid die je kunt promoveren en terugdraaien.","helm","logos:helm",{"title":69,"description":70,"slug":71,"category":19,"icon":72},"Kotlin","Waar we naar grijpen als een Flutter-app echt Android eronder nodig heeft — platform channels, achtergrondwerk en integraties met native SDK's.","kotlin","logos:kotlin-icon",{"title":74,"description":75,"slug":76,"category":8,"icon":72},"Kotlin Multiplatform","Bedrijfslogica delen tussen iOS en Android terwijl elk platform zijn eigen native UI houdt — het alternatief wanneer Flutter niet past.","kmp",{"title":78,"description":79,"slug":80,"category":30,"icon":81},"Kubernetes","Hoe we services in productie draaien — Helm-uitrollen, rollouts die terug te draaien zijn, en schalen zonder dat iemand om 3 uur 's nachts wakker hoeft te zijn.","kubernetes","logos:kubernetes",{"title":83,"description":84,"slug":85,"category":30,"icon":86},"NATS","Lichtgewicht berichtenverkeer tussen services — publish\u002Fsubscribe en request\u002Freply zonder het beheergewicht van een volledig brokercluster.","nats","logos:nats-icon",{"title":88,"description":89,"slug":90,"category":8,"icon":91},"Nuxt","Vue met serverrendering, routering en SEO al geregeld — hoe we marketingsites en webapps bouwen die bij het eerste laden snel en vindbaar moeten zijn.","nuxt","logos:nuxt-icon",{"title":93,"description":94,"slug":95,"category":19,"icon":96},"PHP","Waar we met een bestaande PHP-backend werken — hem uitbreiden, ermee integreren, en de mobiele en webclients bouwen die hij moet bedienen.","php","logos:php",{"title":98,"description":99,"slug":100,"category":101,"icon":102},"PostgreSQL","Onze standaarddatabase — waar we naar grijpen tenzij een product een specifieke reden geeft om dat niet te doen, van schema tot indexen.","postgres","database","logos:postgresql",{"title":104,"description":105,"slug":106,"category":19,"icon":107},"Python","Onze taal voor backends, datawerk en AI-integraties — inclusief de Python-bindings die we bij onze eigen Rust-tooling leveren.","python","logos:python",{"title":109,"description":110,"slug":111,"category":8,"icon":112},"React","De front-endbibliotheek waarin we werken als een product al React is — componenten, hooks, en het ecosysteem dat eromheen is gegroeid.","react","logos:react",{"title":114,"description":115,"slug":116,"category":101,"icon":117},"Redis","Waar we data neerzetten die snel moet zijn en opnieuw op te bouwen valt — caches, sessies, verzoeklimieten en achtergrondwachtrijen.","redis","logos:redis",{"title":119,"description":120,"slug":121,"category":19,"icon":122},"Ruby","De taal waarin onze mobiele releaseautomatisering geschreven is — Fastlane-lanes, eigen acties, en de CI-lijm die builds naar de winkels brengt.","ruby","logos:ruby",{"title":124,"description":125,"slug":126,"category":19,"icon":127},"Rust","Waar we heen gaan als prestaties én correctheid allebei tellen — documenten renderen, CLI-tooling, en services die snel en voorspelbaar moeten blijven.","rust","simple-icons:rust",{"title":129,"description":130,"slug":131,"category":101,"icon":132},"SQLite","De database die meereist in de app — lokale caches, offline-first opslag, en alles wat ook zonder netwerk moet blijven werken.","sqlite","logos:sqlite",{"title":134,"description":135,"slug":136,"category":8,"icon":137},"Strapi","Een headless CMS waar we naar grijpen als redacteuren de content moeten beheren — een echte beheeromgeving en een schone API, zonder ze zelf te bouwen.","strapi","logos:strapi-icon",{"title":139,"description":140,"slug":141,"category":19,"icon":142},"Swift","Waar we naar grijpen als een Flutter-app echt iOS eronder nodig heeft — platform channels, integraties met native SDK's, widgets en App Clips.","swift","logos:swift",{"title":144,"description":145,"slug":146,"category":8,"icon":142},"SwiftUI","Het UI-framework van Apple, waar we de native oppervlakken bouwen die een Flutter-app niet kan afdekken — widgets, App Clips, extensies en systeemintegraties.","swiftui",{"title":148,"description":149,"slug":150,"category":8,"icon":151},"Tailwind CSS","Hoe we elke front-end die we bouwen vormgeven — utility-klassen en designtokens in plaats van een stylesheet die alleen maar groeit en nooit wordt opgeschoond.","tailwind","logos:tailwindcss-icon",{"title":153,"description":154,"slug":155,"category":19,"icon":156},"TypeScript","De standaard voor alles wat we voor de browser en voor Node-services schrijven — types die integratiebugs vangen voordat ze een review halen.","typescript","logos:typescript-icon",{"title":158,"description":159,"slug":160,"category":8,"icon":161},"Vue","Ons front-endframework voor beheerpanelen, dashboards voor winkeliers en webapps die jaren onderhoudbaar moeten blijven, geen sprints.","vue","logos:vue",{"title":163,"description":164,"slug":165,"category":36,"icon":166},"Whisper","Het opensource spraakherkenningsmodel van OpenAI — de transcriptiemotor achter spraakinvoer, draaiend als backendservice én op het toestel in de 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_nl\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},"het-probleem","Het probleem",[179,180,181],"p",{},"Een Flutter-app die naar telefoons, tablets en desktop gaat, heeft meer nodig dan een flexibele kolom. Een scherm dat prettig leest bij 390 logische pixels breed wil bij 700 een gecentreerde kaart en bij 1200 een zijbalk. Flutter geeft je de metingen, maar geen structuur om ernaar te handelen.",[179,183,184,185,189,190,193,194,197],{},"Dus verspreiden de controles zich. Hier een ",[186,187,188],"code",{},"MediaQuery.of(context).size.width > 600",", daar een ",[186,191,192],{},"LayoutBuilder",", en drie widgets verderop een ternaire operator binnen een ",[186,195,196],{},"Padding",". Elk daarvan is op zichzelf te verdedigen; samen vormen ze een lay-outbeleid dat nergens op één plek staat opgeschreven.",[179,199,200],{},"Veelvoorkomende problemen:",[202,203,204,208,213,216],"ul",{},[205,206,207],"li",{},"Breekpuntwaarden die in tientallen widgets zijn gedupliceerd en uit elkaar lopen naarmate het ontwerp verandert",[205,209,210,212],{},[186,211,192],{}," die de beperkingen van de ouder meldt terwijl je het toestel wilde weten",[205,214,215],{},"Lay-outs die naar de tabletvariant omslaan zodra een telefoon liggend wordt gedraaid",[205,217,218],{},"Widgetbomen waarin de responsieve vertakking onzichtbaar is zonder elk kind te lezen",[174,220,222],{"id":221},"hoe-flutter_adaptive_layout-dat-oplost","Hoe flutter_adaptive_layout dat oplost",[179,224,225,228,229,232,233,236,237,240,241,243],{},[186,226,227],{},"AdaptiveLayout"," neemt één builder per schermgrootte en een ",[186,230,231],{},"child",". Het meet het toestel via ",[186,234,235],{},"MediaQuery",", vertaalt dat naar een ",[186,238,239],{},"ScreenSize",", en bouwt alleen de passende variant — waarbij de ",[186,242,231],{}," één keer wordt gemaakt en aan de winnende builder wordt doorgegeven.",[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],{},"Het responsieve besluit leeft nu in één widget, bovenaan de subboom die het bestuurt, geschreven als drie lay-outs in plaats van een keten van voorwaarden.",[179,421,422],{},[423,424],"img",{"alt":425,"src":426,"style":427},"De kleineschermlay-out van de voorbeeldapp, gerenderd op een 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},"Dezelfde app op een iPad Pro 12,9 inch, waar largeBuilder de inhoud in een bredere kaart zet","\u002Fopen-source\u002Fflutter-adaptive-layout\u002Fipad_12_inch.png",[174,435,437],{"id":436},"wat-het-ondersteunt","Wat het ondersteunt",[202,439,440,462,468,474,484,494],{},[205,441,442,446,447,450,451,454,455,458,459,461],{},[443,444,445],"strong",{},"Lay-outs gestuurd door schermgrootte"," — ",[186,448,449],{},"smallBuilder",", ",[186,452,453],{},"mediumBuilder"," en ",[186,456,457],{},"largeBuilder",", elk optioneel; een ontbrekende valt terug op ",[186,460,231],{},", zodat je alleen de groottes hoeft vorm te geven waar het je om gaat",[205,463,464,467],{},[443,465,466],{},"Breekpunten die jij bepaalt"," — standaard 400 en 600 logische pixels, per widget of voor de hele app te overschrijven",[205,469,470,473],{},[443,471,472],{},"Bouw de child één keer"," — van lay-out wisselen verpakt je inhoud in plaats van die opnieuw op te bouwen",[205,475,476,479,480,483],{},[443,477,478],{},"Stabiel bij draaien"," — de indeling leest ",[186,481,482],{},"MediaQuery.of(context).size.shortestSide",", zodat een telefoon liggend klein blijft",[205,485,486,489,490,493],{},[443,487,488],{},"Inwisselbare indelingslogica"," — implementeer ",[186,491,492],{},"ScreenSizeQualifier"," om in te delen op breedte, platform, scharnierstand of wat je designsysteem ook gebruikt",[205,495,496,499,500,502],{},[443,497,498],{},"Geen afhankelijkheden"," — puur Flutter boven op ",[186,501,235],{},", werkend op iOS, Android, web, macOS, Windows en Linux",[174,504,506],{"id":505},"hoe-de-schermgrootte-wordt-bepaald","Hoe de schermgrootte wordt bepaald",[179,508,509,510,513],{},"De standaard ",[186,511,512],{},"BreakpointsQualifier"," vergelijkt de kortste zijde met twee breekpunten, inclusief — een waarde die precies gelijk is aan een breekpunt hoort bij de kleinere categorie.",[515,516,517,536],"table",{},[518,519,520],"thead",{},[521,522,523,527,530,533],"tr",{},[524,525,526],"th",{},"Schermgrootte",[524,528,529],{},"Voorwaarde",[524,531,532],{},"Standaardbereik",[524,534,535],{},"Typisch toestel",[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 logische pixels",[542,556,557],{},"Telefoons",[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 logische pixels",[542,574,575],{},"Kleine tablets",[521,577,578,583,589,592],{},[542,579,580],{},[186,581,582],{},"ScreenSize.large",[542,584,585,586],{},"boven ",[186,587,588],{},"mediumBreakpoint",[542,590,591],{},"601+ logische pixels",[542,593,594],{},"Grote tablets, desktop",[179,596,597,598,600,601,604],{},"Breekpunten worden in een vaste volgorde opgelost, waarbij de eerst gevonden waarde wint: de argumenten die aan ",[186,599,512],{}," zijn meegegeven, dan de dichtstbijzijnde ",[186,602,603],{},"BreakpointsSetting"," erboven, dan de ingebouwde 400 en 600.",[174,606,608],{"id":607},"toepassingen-in-de-praktijk","Toepassingen in de praktijk",[610,611,613],"h3",{"id":612},"mobile-first-apps-die-een-tabletversie-krijgen","Mobile-first apps die een tabletversie krijgen",[179,615,616,617,619,620,622],{},"Een app die op telefoons begon kan elk scherm houden dat er al is en een ",[186,618,457],{}," toevoegen waar een bredere lay-out loont. Schermen zonder builder voor een bepaalde grootte renderen de ",[186,621,231],{}," ongewijzigd, zodat de migratie scherm voor scherm gaat in plaats van in één keer.",[610,624,626],{"id":625},"navigatie-met-overzicht-en-detail","Navigatie met overzicht en detail",[179,628,629],{},"Een lijst die op een telefoon een detailroute pusht, kan op een tablet lijst en detail naast elkaar tonen. De twee varianten staan naast elkaar gedeclareerd in één widget, waardoor het verschil ertussen in een diff te beoordelen is.",[610,631,633],{"id":632},"designsystemen-met-eigen-breekpunten","Designsystemen met eigen breekpunten",[179,635,636,637,640,641,643,644,646],{},"Wikkel ",[186,638,639],{},"MaterialApp"," één keer in ",[186,642,603],{}," en elke ",[186,645,227],{}," in de boom neemt de getallen van het designsysteem over. Ze later wijzigen is een aanpassing van één regel, geen zoektocht door de codebase.",[610,648,650],{"id":649},"vensters-op-web-en-desktop","Vensters op web en desktop",[179,652,653],{},"Op web en desktop is de gemeten grootte het venster, dus lay-outs reageren terwijl de gebruiker het formaat verandert — hetzelfde codepad dat een tablet afhandelt, handelt een verkleinde browser af.",[174,655,657],{"id":656},"aan-de-slag","Aan de slag",[179,659,660],{},"Installeer het pakket:",[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],{},"Vereist Dart ",[186,687,688],{},">=2.18.5 \u003C4.0.0"," en Flutter 1.17+.",[179,691,692],{},"Importeer het daarna en wikkel de widget waarvan de lay-out zich moet aanpassen:",[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],{},"Wil je schermen anders indelen, implementeer dan ",[186,802,492],{}," en geef die mee als ",[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"," draait bij elke build, dus houd hem goedkoop en vrij van neveneffecten.",[179,973,974,975,868],{},"Een complete, draaibare app staat in de ",[976,977,981],"a",{"href":978,"rel":979},"https:\u002F\u002Fgithub.com\u002Fnerdy-pro\u002Fflutter-adaptive-layout\u002Ftree\u002Fmain\u002Fexample",[980],"nofollow","voorbeeldmap",[983,984],"questions",{":items":985},"[{\"title\":\"Hoe verschilt dit van LayoutBuilder?\",\"text\":\"LayoutBuilder meldt de beperkingen die de ouderwidget doorgeeft, en die kunnen veel kleiner zijn dan het scherm. AdaptiveLayout deelt het toestel of venster in via MediaQuery, zodat een widget diep in de boom nog steeds weet dat hij op een tablet draait. Gebruik LayoutBuilder om in een beschikbaar kader te passen; gebruik AdaptiveLayout om een lay-out voor het toestel te kiezen.\"},{\"title\":\"Verandert de lay-out als het toestel draait?\",\"text\":\"Nee. De indeling gebruikt MediaQuery.of(context).size.shortestSide, dat staand en liggend hetzelfde is, dus een telefoon blijft ScreenSize.small bij draaien. Wil je lay-outs die op oriëntatie reageren, implementeer dan een eigen ScreenSizeQualifier die size.width leest.\"},{\"title\":\"Moet ik alle drie de builders opgeven?\",\"text\":\"Nee. Elke builder mag worden weggelaten en dan wordt voor die schermgrootte de child gebruikt. Geen passende builder én geen child opgeven levert een UnimplementedError op.\"},{\"title\":\"Hoe wijzig ik de standaardbreekpunten?\",\"text\":\"Geef BreakpointsQualifier(smallBreakpoint: ..., mediumBreakpoint: ...) mee aan één AdaptiveLayout, of wikkel je app in BreakpointsSetting om ze overal te wijzigen. Waarden uit de constructor winnen van BreakpointsSetting, dat weer wint van de standaardwaarden 400 en 600.\"},{\"title\":\"Werkt het op web en desktop?\",\"text\":\"Ja. Het hangt alleen van MediaQuery af, dus het draait op elk Flutter-doelplatform. Op web en desktop is de gemeten grootte het venster, dus lay-outs reageren terwijl het venster van formaat verandert.\"}]",[987,988,989],"style",{},"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 .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 .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 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},"Een Flutter-pakket dat een andere widget-lay-out opbouwt voor kleine, middelgrote en grote schermen — met breekpunten die jij bepaalt en geen afhankelijkheden buiten MediaQuery.","md",[1006],{"type":1007,"url":1008},"pub_dev","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_adaptive_layout",{},"Flutter-pakket dat een andere lay-out rendert op telefoons, tablets en desktops. Eén builder per schermgrootte, eigen breekpunten, geen afhankelijkheden.","Responsieve Flutter-lay-outs per schermgrootte","Eén builder per schermgrootte in plaats van breedtecontroles verspreid door je widgetboom. Een klein Flutter-pakket voor responsieve 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","ndnDqm5BMtpN8FV_oTFd3vrUQ1hPdgb4tBWe8fB5-CM",{"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"]