[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fflutter-gooey-blobs":671,"blog-author-\u002Fblog\u002Fflutter-gooey-blobs":1023,"i-material-symbols:arrow-back-rounded":1038},{"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":1010,"buttonUrl":1010,"category":1011,"date":1012,"description":1013,"draft":1014,"editorsPick":1014,"extension":1015,"featured":1014,"image":1016,"imageAlt":1017,"meta":1018,"navigation":32,"ogImage":1010,"ogImageAlt":1010,"path":1019,"seo":1020,"stem":1021,"tags":1010,"__hash__":1022},"blog\u002Fblog\u002Fflutter-gooey-blobs.md","Flutter Gooey Blobs","Rutvik Tak","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fdart-cli-foundations\u002Fauthor.jpeg","Rutvik Tak headshot.","rutvik-tak",{"type":679,"value":680,"toc":998},"minimark",[681,690,693,700,703,718,721,726,733,739,742,745,751,756,765,775,782,801,804,808,818,824,830,833,839,843,852,866,872,878,884,887,893,899,903,913,919,925,928,934,942,946,956,962,968,971,976,979,982,985,989],[682,683,684],"p",{},[685,686,687],"a",{"href":687,"rel":688},"https:\u002F\u002Fyoutu.be\u002FsmPos0mJvh8",[689],"nofollow",[682,691,692],{},"Have you ever seen these gooey blobs on the internet?",[682,694,695],{},[696,697],"img",{"alt":698,"src":699},"CustomPainter gooey blobs interacting with each other.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-gooey-blobs\u002Fimg-001.gif",[682,701,702],{},"They look kinda cool, right? Have you ever thought it would be really cool to create something like this in Flutter?",[682,704,705,706,711,712,717],{},"A few days ago, Twitter user ",[685,707,710],{"href":708,"rel":709},"https:\u002F\u002Ftwitter.com\u002Fdouble__glitch",[689],"@double__glitch"," demonstrated creating ",[685,713,716],{"href":714,"rel":715},"https:\u002F\u002Ftwitter.com\u002Fdouble__glitch\u002Fstatus\u002F1618213807503060993",[689],"gooey blobs in Figma",". Seeing his technique reminded me of drawing something on a canvas, which led to me thinking about CustomPainter, and I thought, “I can do that! Somehow...”",[682,719,720],{},"After an hour or so, I did manage to re-create it in Flutter! Here’s how:",[722,723,725],"h2",{"id":724},"why-custompainter","Why CustomPainter?",[682,727,728,729,732],{},"As I said earlier, the technique shown by ",[685,730,710],{"href":708,"rel":731},[689]," is like drawing on a canvas. CustomPainter serves exactly that purpose. It provides you with set of APIs ranging from drawing shapes on a canvas to adding layer composite effects, combining image filters, blend modes, and more.",[682,734,735],{},[696,736],{"alt":737,"src":738},"CustomPainter various effects.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-gooey-blobs\u002Fimg-002.gif",[682,740,741],{},"We should be able to do this in Flutter, too! If you aren’t aware, Flutter converts your widget layers into a set of canvas painting instructions as part of the rendering pipeline. Somewhere down the line, these instructions are rendered on the screen.",[682,743,744],{},"Before diving into it, here’s something that you’ll need to know to achieve this effect:",[682,746,747],{},[696,748],{"alt":749,"src":750},"saveLayer meme.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-gooey-blobs\u002Fimg-003.png",[752,753,755],"h3",{"id":754},"savelayer","saveLayer",[682,757,758,761,762,764],{},[759,760,755],"code",{}," allows you to create composite effects on canvas. Normally each canvas instruction is painted individually, thus applying composite effects on a group of shapes. With ",[759,763,755],{},", you can group those shapes and apply an effect on those as one single layer on the canvas.",[766,767,772],"pre",{"className":768,"code":770,"language":771},[769],"language-text","canvas.saveLayer(Rect.fromLTWH(0, 0, size.width, size.height), paint);\n\u002F\u002F drawing instructions here are grouped together. \ncanvas.restore();\n","text",[759,773,770],{"__ignoreMap":774},"",[682,776,777],{},[685,778,781],{"href":779,"rel":780},"https:\u002F\u002Ftakrutvik.pieces.cloud\u002F?p=1dcc45831d",[689],"Save this code",[682,783,784,786,787,790,791,793,794,797,798,800],{},[759,785,755],{}," takes the size of the layer and a ",[759,788,789],{},"Paint"," object. Any canvas instructions called after calling ",[759,792,755],{}," will be grouped, and once you call ",[759,795,796],{},"canvas.restore",", that group will be flattened out into a layer on which the ",[759,799,789],{}," object’s image filters and blend modes will be applied.",[682,802,803],{},"Now, back to creating our gooey blobs!",[722,805,807],{"id":806},"adding-blurred-circles","Adding Blurred Circles",[682,809,810,811,814,815,817],{},"We’ll use the ",[759,812,813],{},"canvas.drawCircle()"," to draw two circles on the canvas and add a blur filter to the layer using ",[759,816,755],{},".",[766,819,822],{"className":820,"code":821,"language":771},[769],"import 'dart:ui';\nimport 'package:flutter\u002Fmaterial.dart';\nclass BlobsView extends StatefulWidget {\n  const BlobsView({super.key});\n  @override\n  State createState() => _BlobsViewState();\n}\nclass _BlobsViewState extends State {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Center(\n        child: CustomPaint(\n          painter: _BlobsPainter(),\n          size: MediaQuery.of(context).size,\n        ),\n      ),\n    );\n  }\n}\nclass _BlobsPainter extends CustomPainter {\n  @override\n  void paint(Canvas canvas, Size size) {\n    final blackCirclesPainter = Paint()\n      ..color = Colors.black\n      ..style = PaintingStyle.fill;\n    final blurLayerPaint = Paint()\n      ..color = const Color(0xff808080)\n      ..style = PaintingStyle.fill\n      ..imageFilter = ImageFilter.blur(\n        sigmaX: 10,\n        sigmaY: 10,\n        tileMode: TileMode.decal,\n      );\n    canvas.saveLayer(Rect.fromLTWH(0, 0, size.width, size.height), blurLayerPaint);\n    canvas.drawCircle(Offset(size.width \u002F 2 - 50, size.height \u002F 2), 70, blackCirclesPainter);\n    canvas.drawCircle(Offset(size.width \u002F 2 + 50, size.height \u002F 2), 60, blackCirclesPainter);\n    canvas.restore();\n  }\n  @override\n  bool shouldRepaint(covariant CustomPainter oldDelegate) {\n    return true;\n  }\n}\n",[759,823,821],{"__ignoreMap":774},[682,825,826],{},[685,827,781],{"href":828,"rel":829},"https:\u002F\u002Ftakrutvik.pieces.cloud\u002F?p=36a6428584",[689],[682,831,832],{},"Here’s how it looks. Nothing fancy right now.",[682,834,835],{},[696,836],{"alt":837,"src":838},"Flutter animations showing two blurry blobs.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-gooey-blobs\u002Fimg-004.png",[722,840,842],{"id":841},"adding-a-colordodge-layer","Adding a colorDodge Layer",[682,844,845,846,851],{},"Next, we’ll add certain layers on top of our canvas with specific blend mode applied to them. The blend mode will specify how the layer should be composed with its background. In this article, we won’t dive deep into how these blend modes work, but if you’re curious, I would recommend reading ",[685,847,850],{"href":848,"rel":849},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcompositing-1\u002F#blendingcolordodge",[689],"these w3 docs"," on the different blend modes mentioned in this article and how they work.",[682,853,854,855,858,859,862,863,817],{},"First is the ",[759,856,857],{},"colorDodge"," layer. We’ll achieve this by creating a rectangle, giving it a bright color like ",[759,860,861],{},"Color(0xff808080)",", and setting its blend mode to ",[759,864,865],{},"BlendMode.colorDodge",[682,867,868,869,871],{},"This will go right after the ",[759,870,796],{}," call:",[766,873,876],{"className":874,"code":875,"language":771},[769],"canvas.drawRect(\n      Rect.fromCenter(center: Offset(size.width \u002F 2, size.height \u002F 2), width: size.width, height: size.height),\n      Paint()\n        ..color = const Color(0xff808080)\n        ..style = PaintingStyle.fill\n        ..blendMode = BlendMode.colorDodge,\n    );\n",[759,877,875],{"__ignoreMap":774},[682,879,880],{},[685,881,781],{"href":882,"rel":883},"https:\u002F\u002Ftakrutvik.pieces.cloud\u002F?p=136b46a1a0",[689],[682,885,886],{},"Now we get something interesting.",[682,888,889],{},[696,890],{"alt":891,"src":892},"Blobs are now clearer.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-gooey-blobs\u002Fimg-005.png",[682,894,895,898],{},[759,896,897],{},"colorDoge"," is one of the blend modes that can be used to brighten the destination image (our canvas in this case) with respect to to the source image (blend mode layer). It basically brightens the brighter areas and adds more contrast and saturation to them. In our case, it helps create sharper outlines for our circles, replacing the blurred outlines. Darker areas of the destination image aren’t affected as much as the brighter areas.",[722,900,902],{"id":901},"adding-a-colorburn-layer","Adding a colorBurn Layer",[682,904,905,906,909,910,817],{},"Now we’ll add a ",[759,907,908],{},"colorBurn"," layer on top of our whole canvas. Similar to what we did earlier, we’ll create a rectangle, make it black, and set its blend mode to ",[759,911,912],{},"BlendMode.colorBurn",[766,914,917],{"className":915,"code":916,"language":771},[769],"canvas.drawRect(\n      Rect.fromCenter(center: Offset(size.width \u002F 2, size.height \u002F 2), width: size.width, height: size.height),\n      Paint()\n        ..color = Colors.black\n        ..style = PaintingStyle.fill\n        ..blendMode = BlendMode.colorBurn,\n    );\n",[759,918,916],{"__ignoreMap":774},[682,920,921],{},[685,922,781],{"href":923,"rel":924},"https:\u002F\u002Ftakrutvik.pieces.cloud\u002F?p=33394fadd5",[689],[682,926,927],{},"We’re getting close!",[682,929,930],{},[696,931],{"alt":932,"src":933},"Blobs now have no blur.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-gooey-blobs\u002Fimg-006.png",[682,935,936,938,939,941],{},[759,937,908],{}," is basically the opposite of ",[759,940,857],{},". It darkens the destination image with respect to the source image. With this, the inside blurred areas of the circles become completely black, creating a sharp, gooey shape.",[722,943,945],{"id":944},"adding-a-gradient-layer","Adding a Gradient layer",[682,947,948,949,952,953,955],{},"As before, we’ll add a gradient layer with a blend mode set to ",[759,950,951],{},"screen",". Setting the blend mode to ",[759,954,951],{}," will compose this layer as an overlay on top of our gooey shapes, excluding the white areas of the canvas.",[766,957,960],{"className":958,"code":959,"language":771},[769],"canvas.drawRect(\n      Rect.fromCenter(center: Offset(size.width \u002F 2, size.height \u002F 2), width: size.width, height: size.height),\n      Paint()\n        ..style = PaintingStyle.fill\n        ..shader = const RadialGradient(\n          colors: [Colors.yellow, Colors.pink],\n        ).createShader(\n          Rect.fromCenter(\n            center: Offset(size.width \u002F 2, size.height \u002F 2),\n            width: size.width,\n            height: size.height,\n          ),\n        )\n        ..blendMode = BlendMode.screen,\n    );\n",[759,961,959],{"__ignoreMap":774},[682,963,964],{},[685,965,781],{"href":966,"rel":967},"https:\u002F\u002Ftakrutvik.pieces.cloud\u002F?p=0f934fa062",[689],[682,969,970],{},"With that, our gooey blobs are ready! 🎉",[682,972,973],{},[696,974],{"alt":975,"src":699},"Gooey blobs are now interactive.",[682,977,978],{},"This is the final version after adding drag controls.",[682,980,981],{},"We finally have gooey blobs in Flutter and that wasn’t crazy hard to do. It’s interesting how using composite effects with various blend modes can help you create some interesting visuals like this.",[682,983,984],{},"Use these blobs cautiously though :)",[722,986,988],{"id":987},"conclusion","Conclusion",[682,990,991,992,997],{},"You can find the source code for these gooey blobs ",[685,993,996],{"href":994,"rel":995},"https:\u002F\u002Fgithub.com\u002Frutvik110\u002FFlutter-Animations\u002Fblob\u002Fmaster\u002Flib\u002Fcustom_painters\u002Fblobs.dart",[689],"here"," among some of my other creative work. Feel free to poke around and play with them :)",{"title":774,"searchDepth":999,"depth":999,"links":1000},2,[1001,1005,1006,1007,1008,1009],{"id":724,"depth":999,"text":725,"children":1002},[1003],{"id":754,"depth":1004,"text":755},3,{"id":806,"depth":999,"text":807},{"id":841,"depth":999,"text":842},{"id":901,"depth":999,"text":902},{"id":944,"depth":999,"text":945},{"id":987,"depth":999,"text":988},null,"Software Development","2024-07-11T00:00:00.000Z","Learn how to make gooey blobs with custom painter in Flutter, and how you might be able to use them in your projects.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-gooey-blobs\u002Fhero.jpeg","Flutter Gooey Blobs with CustomPainter",{},"\u002Fblog\u002Fflutter-gooey-blobs",{"title":673,"description":1013},"blog\u002Fflutter-gooey-blobs","VaaOXB1ll2BAegCDzIqwdyyZ4lL6cr5SbCZ9rV1xTFw",{"id":1024,"title":674,"body":1025,"description":1029,"draft":1014,"extension":1015,"meta":1032,"navigation":32,"path":1033,"photo":1034,"photoAlt":1010,"seo":1035,"stem":1036,"__hash__":1037},"authors\u002Fauthors\u002Frutvik-tak.md",{"type":679,"value":1026,"toc":1030},[1027],[682,1028,1029],{},"Rutvik was introduced to world of coding through animations and games. From there he loved the creative aspects of coding and solving interesting problems. At Pieces, he takes care of the Web Extension and making sure it works across all different browsers. Beside coding, he loves to help with support, dev rel content. When he's not doing either of that, you can find him working on animations, doing calisthenics or indoor rock climbing on weekends.",{"title":774,"searchDepth":999,"depth":999,"links":1031},[],{},"\u002Fauthors\u002Frutvik-tak","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Frutvik-tak.jpg",{"title":674,"description":1029},"authors\u002Frutvik-tak","HWkSe6txnNhDCCk74fgii1tqQGBDyeC8l7Qydvtn8ko",{"left":1039,"top":1039,"width":1040,"height":1040,"rotate":1039,"vFlip":1014,"hFlip":1014,"body":1041},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>"]