[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fguide-to-flutter-dynamic-ui-creation":671,"blog-author-\u002Fblog\u002Fguide-to-flutter-dynamic-ui-creation":1047,"i-material-symbols:arrow-back-rounded":1059},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":1034,"buttonUrl":1034,"category":1035,"date":1036,"description":1037,"draft":1038,"editorsPick":1038,"extension":1039,"featured":1038,"image":1040,"imageAlt":1041,"meta":1042,"navigation":32,"ogImage":1034,"ogImageAlt":1034,"path":1043,"seo":1044,"stem":1045,"tags":1034,"__hash__":1046},"blog\u002Fblog\u002Fguide-to-flutter-dynamic-ui-creation.md","A Guide to Flutter Dynamic UI Creation","Umair Bashir","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fguide-to-flutter-dynamic-ui-creation\u002Fauthor.jpeg","Photo of the author: Umair Bashir.","umair-bashir",{"type":679,"value":680,"toc":1020},"minimark",[681,699,704,713,722,726,842,845,849,864,868,871,902,906,915,924,928,931,945,949,958,967,971,980,983,992,996,1005,1009,1012],[682,683,684,685,692,693,698],"p",{},"When it comes to mobile app development, many developers are creating dynamic user interfaces (UI) with ",[686,687,691],"a",{"href":688,"rel":689},"https:\u002F\u002Fflutter.dev\u002F",[690],"nofollow","Flutter",". The Flutter UI framework from Google has proved to be a game-changer, especially in the realm of dynamic UI. In this guide, we'll skip ",[686,694,697],{"href":695,"rel":696},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fbuilding-a-flutter-web-app-from-scratch-a-complete-guide",[690],"building an entire Flutter web app"," and explore the intricacies of Flutter dynamic UI to help you get started on your journey to building fluid, interactive interfaces.",[700,701,703],"h2",{"id":702},"why-flutter-for-dynamic-ui","Why Flutter for Dynamic UI?",[682,705,706,707,712],{},"Creating a Flutter dynamic UI isn't just following a trend, it's about leveraging the benefits it offers. Flutter's ",[686,708,711],{"href":709,"rel":710},"https:\u002F\u002Fdocs.flutter.dev\u002Fui\u002Fwidgets",[690],"widget-based architecture"," simplifies UI development by providing a range of pre-designed elements that can be customized to fit any aesthetic or function.",[682,714,715,716,721],{},"Furthermore, with Flutter, developers gain the advantage of a single codebase for both iOS and Android which ensures a uniform experience across platforms. This is one of the reasons that ",[686,717,720],{"href":718,"rel":719},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fusing-pieces-flutter-to-build-pieces",[690],"Pieces for Developers is built with Flutter",".",[700,723,725],{"id":724},"the-foundations-understanding-core-widgets-in-flutter","The Foundations: Understanding Core Widgets in Flutter",[727,728,729,737,743,749,755,761,767,773,778,784,790,796,801,807,813,819,824,830,836],"ul",{},[730,731,732,736],"li",{},[733,734,735],"strong",{},"Widgets:"," The basic building blocks in Flutter, ranging from foundational elements like Text and Image to more complex ones like Stack and GridView.",[730,738,739,742],{},[733,740,741],{},"Composition:"," The practice of combining smaller widgets to create custom UI elements.",[730,744,745,748],{},[733,746,747],{},"Container:"," A versatile widget that can be customized with padding, margins, borders, and shadows.",[730,750,751,754],{},[733,752,753],{},"User Input Widgets:"," These facilitate interaction, including:",[730,756,757,760],{},[733,758,759],{},"TextField:"," For text input",[730,762,763,766],{},[733,764,765],{},"Slider:"," For selecting a value in a range",[730,768,769,772],{},[733,770,771],{},"Checkbox",": For binary choices",[730,774,775],{},[733,776,777],{},"Display Widgets:",[730,779,780,783],{},[733,781,782],{},"ListView.builder:"," Efficiently displays a scrolling list of items",[730,785,786,789],{},[733,787,788],{},"Card:"," Represents information in a material design card in Flutter",[730,791,792,795],{},[733,793,794],{},"Gridview:"," Allows the arrangement of widgets in a grid",[730,797,798],{},[733,799,800],{},"Navigation Controls:",[730,802,803,806],{},[733,804,805],{},"BottomNavigationBar",": For bottom navigation tasks",[730,808,809,812],{},[733,810,811],{},"Drawer",": A sliding panel commonly used for app navigation",[730,814,815,818],{},[733,816,817],{},"TabBar",": Allows for a tabbed view interface",[730,820,821],{},[733,822,823],{},"Feedback Widgets:",[730,825,826,829],{},[733,827,828],{},"SnackBar",": Provides lightweight feedback about an operation",[730,831,832,835],{},[733,833,834],{},"AlertDialog",": Informs about situations or requires confirmation",[730,837,838,841],{},[733,839,840],{},"Animation Framework:"," Integrates with UI components to add motion and transitions.",[682,843,844],{},"Flutter UI components represent just a fraction of its offerings, but they showcase the depth and flexibility of the framework's UI capabilities.",[700,846,848],{"id":847},"responsive-design-with-flutter","Responsive Design with Flutter",[682,850,851,852,857,858,863],{},"Flutter's UI framework is inherently designed for adaptability. With the rise of diverse screen sizes, from smartphones to tablets, creating a UI that looks and feels consistent across devices is paramount. Flutter offers widgets like ",[686,853,856],{"href":854,"rel":855},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fwidgets\u002FMediaQuery-class.html",[690],"MediaQuery"," and ",[686,859,862],{"href":860,"rel":861},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fwidgets\u002FLayoutBuilder-class.html",[690],"LayoutBuilder"," to fetch screen dimensions and make real-time layout decisions. By embracing these tools, a developer can ensure their UI scales well and provides a consistent experience across the device spectrum.",[700,865,867],{"id":866},"crafting-interactive-elements-beyond-just-touch","Crafting Interactive Elements: Beyond Just Touch",[682,869,870],{},"Engagement is key in dynamic user interface, and interaction is its cornerstone.",[727,872,873,885],{},[730,874,875,878,879,884],{},[733,876,877],{},"Gesture Detection:"," At the heart of user interaction lies Flutter’s ",[686,880,883],{"href":881,"rel":882},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fwidgets\u002FGestureDetector-class.html",[690],"GestureDetector",". More than just recognizing a tap, it discerns swipes, drags, pinches, and more, giving developers a nuanced tool for crafting reactions.",[730,886,887,890,891,857,896,901],{},[733,888,889],{},"Feedback & Visual Response:"," Using widgets like ",[686,892,895],{"href":893,"rel":894},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fmaterial\u002FInkWell-class.html",[690],"InkWell",[686,897,900],{"href":898,"rel":899},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fwidgets\u002FAnimatedBuilder-class.html",[690],"AnimatedBuilder",", you can create visual and animated responses to user interactions, adding depth to engagement.",[700,903,905],{"id":904},"tailoring-themes-and-aesthetics","Tailoring Themes and Aesthetics",[682,907,908,909,914],{},"Flutter makes it easy to give your app a consistent look with its theming tools. By using the ",[686,910,913],{"href":911,"rel":912},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fmaterial\u002FThemeData-class.html",[690],"ThemeData class",", you can set the main styles for your whole app. This means everything, from buttons to backgrounds, will match and look unified.",[682,916,917,918,923],{},"Text is a big part of any app, and Flutter gives you a lot of control here too. With the ",[686,919,922],{"href":920,"rel":921},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Fpainting\u002FTextStyle-class.html",[690],"TextStyle class",", you can decide how all the words in your app look. This includes picking the font, size, and color. So, whether it's a title or a small label, everything can be styled to fit your design.",[700,925,927],{"id":926},"the-power-of-custom-widgets-in-flutter","The Power of Custom Widgets in Flutter",[682,929,930],{},"One of the standout features of Flutter is its ability to craft custom widgets. While the framework provides a comprehensive set of pre-made components, sometimes the requirements are so unique that they can't be met by standard widgets.",[682,932,933,934,857,939,944],{},"The Flutter custom widget library allows developers to create bespoke components, tailored to the specific needs of their application. By harnessing properties like ",[686,935,938],{"href":936,"rel":937},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Frendering\u002FCustomPainter-class.html",[690],"CustomPainter",[686,940,943],{"href":941,"rel":942},"https:\u002F\u002Fapi.flutter.dev\u002Fflutter\u002Frendering\u002FRenderBox-class.html",[690],"RenderBox",", developers can design widgets from scratch, ensuring pixel-perfect representation of their design vision.",[700,946,948],{"id":947},"role-of-flutter-flow-and-flutter-flex-in-creating-seamless-ui","Role Of Flutter Flow And Flutter Flex In Creating Seamless UI",[682,950,951,952,957],{},"In the world of Flutter's dynamic layouts, two widgets, Flex and Flow, emerge as game-changers. The ",[686,953,956],{"href":954,"rel":955},"https:\u002F\u002Fflutterdesk.com\u002Fflutter-flex\u002F",[690],"Flutter Flex"," widget efficiently organizes its children in a linear fashion, and when combined with the capabilities of Flexible and Expanded, it ensures layouts remain adaptive across varied device dimensions.",[682,959,960,961,966],{},"In contrast, ",[686,962,965],{"href":963,"rel":964},"https:\u002F\u002Fflutterdesk.com\u002Fwp-admin\u002Fpost.php?post=15339&action=edit",[690],"Flutter Flow"," is a master of customization. It grants developers the freedom to define unique positioning and sizing logic, making it indispensable for crafting intricate layouts and animations. When utilized to their full potential, these tools lay the foundation for creating interfaces that are not only fluid and responsive but also aesthetically captivating.",[700,968,970],{"id":969},"advanced-techniques-for-dynamic-ui-design","Advanced Techniques for Dynamic UI Design",[682,972,973,974,979],{},"As Flutter's toolkit has matured, it has unlocked powerful methodologies that enable developers to push the envelope of traditional UI design. One such realm is the intricate world of Flutter ",[686,975,978],{"href":976,"rel":977},"https:\u002F\u002Fcode.pieces.app\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter",[690],"custom render objects",", enabling finer control over how widgets paint and layout on the screen, making UI a more engaging visual experience.",[682,981,982],{},"However, a dynamic interface isn't just about the visuals but also how they react and evolve based on user interactions and data changes. Here, state management becomes paramount. Flutter’s Provider offers a simple way to distribute data across widgets, ensuring a consistent and reactive UI.",[682,984,985,986,991],{},"On the other hand, ",[686,987,990],{"href":988,"rel":989},"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_bloc",[690],"Bloc",", with its stream-based approach, takes data handling and UI updating to a whole new level, allowing for real-time reactions and UI updates without unnecessary rebuilds. Leveraging these tools means ensuring that your dynamic UI is not only visually captivating but is also efficient and responsive to every user action.",[700,993,995],{"id":994},"integrating-multimedia-into-flutter-ui-design","Integrating Multimedia into Flutter UI Design",[682,997,998,999,1004],{},"A dynamic and interactive UI often involves more than just text and graphics. Flutter's capabilities extend to embedding multimedia components seamlessly into its UI. Whether it's playing a video with the ",[686,1000,1003],{"href":1001,"rel":1002},"https:\u002F\u002Fpub.dev\u002Fpackages\u002Fvideo_player",[690],"VideoPlayer"," widget, integrating interactive maps, or embedding audio clips, Flutter ensures these elements integrate harmoniously within the user interface, enhancing user engagement and immersion.",[700,1006,1008],{"id":1007},"conclusion","Conclusion",[682,1010,1011],{},"Flutter's vast array of UI components underscores its commitment to providing UI development tools that are both versatile and intuitive. From foundational widgets to advanced navigation controls, the framework ensures that every design vision, no matter how intricate, can be realized with precision.",[682,1013,1014,1015,721],{},"As the mobile development landscape continues to evolve, Flutter's emphasis on adaptability and user-centric design positions it as a frontrunner in crafting immersive and dynamic user experiences. To learn more about Flutter dynamic UI and why Pieces for Developers was built using Flutter, read their Dart and ",[686,1016,1019],{"href":1017,"rel":1018},"https:\u002F\u002Fcode.pieces.app\u002Fblog\u002Fdart-and-flutter-case-study",[690],"Flutter case study",{"title":1021,"searchDepth":1022,"depth":1022,"links":1023},"",2,[1024,1025,1026,1027,1028,1029,1030,1031,1032,1033],{"id":702,"depth":1022,"text":703},{"id":724,"depth":1022,"text":725},{"id":847,"depth":1022,"text":848},{"id":866,"depth":1022,"text":867},{"id":904,"depth":1022,"text":905},{"id":926,"depth":1022,"text":927},{"id":947,"depth":1022,"text":948},{"id":969,"depth":1022,"text":970},{"id":994,"depth":1022,"text":995},{"id":1007,"depth":1022,"text":1008},null,"Software Development","2023-09-27T00:00:00.000Z","This article explores Flutter dynamic UI creation in mobile app development. Discover Flutter's benefits, core and custom widgets, and advanced UI design techniques.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fguide-to-flutter-dynamic-ui-creation\u002Fhero.jpeg","A photo of a mobile app created using Flutter.",{},"\u002Fblog\u002Fguide-to-flutter-dynamic-ui-creation",{"title":673,"description":1037},"blog\u002Fguide-to-flutter-dynamic-ui-creation","4dxzSaEZjY81-ob8VJn8-y_bnZbvo_opzkha9WzbAHg",{"id":1048,"title":674,"body":1049,"description":1021,"draft":1038,"extension":1039,"meta":1053,"navigation":32,"path":1054,"photo":1055,"photoAlt":1034,"seo":1056,"stem":1057,"__hash__":1058},"authors\u002Fauthors\u002Fumair-bashir.md",{"type":679,"value":1050,"toc":1051},[],{"title":1021,"searchDepth":1022,"depth":1022,"links":1052},[],{},"\u002Fauthors\u002Fumair-bashir","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fplaceholder.svg",{"title":674,"description":1021},"authors\u002Fumair-bashir","jAtSye3-v28GC8DjajJf8sSFghqtWZ1-1WL9lc8qVWM",{"left":1060,"top":1060,"width":1061,"height":1061,"rotate":1060,"vFlip":1038,"hFlip":1038,"body":1062},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]