[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter":671,"blog-author-\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter":1263,"i-material-symbols:arrow-back-rounded":1278},{"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":1250,"buttonUrl":1250,"category":1251,"date":1252,"description":1253,"draft":1254,"editorsPick":1254,"extension":1255,"featured":1254,"image":1256,"imageAlt":1257,"meta":1258,"navigation":32,"ogImage":1250,"ogImageAlt":1250,"path":1259,"seo":1260,"stem":1261,"tags":1250,"__hash__":1262},"blog\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter.md","Create Mind-Blowing Visuals Using Flutter Shaders","Rutvik Tak","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fbuild-a-macos-inspired-dock-with-flutter\u002Fauthor.jpeg","Rutvik Tak.","rutvik-tak",{"type":679,"value":680,"toc":1237},"minimark",[681,685,688,691,696,699,702,706,713,716,719,725,728,800,804,807,810,816,825,828,831,840,843,847,850,853,859,865,871,876,882,888,891,895,904,916,922,928,931,937,942,947,953,959,962,975,980,986,989,1014,1021,1026,1032,1038,1041,1058,1064,1070,1085,1105,1112,1115,1121,1129,1133,1136,1145,1170,1177,1180,1185,1188,1203,1217,1222,1225,1230],[682,683,684],"p",{},"Have you ever played a video game or watched a movie and been so blown away that you heard yourself saying, “WOW! I wonder how they did this?”",[682,686,687],{},"Most of the time, these rich visuals are created using a combination of Flutter shaders. Take a look at the visuals in this article, where shaders play a critical role. Today, you’ll learn about a specific type of shader called a Fragment Shader and how to use it in your Flutter application. Outside of specifically discussing Flutter Fragment Shaders, I’ll touch on many other things including giving you some basic background on shaders for those who may not be as familiar.",[682,689,690],{},"With that, let’s get started!",[692,693,695],"h2",{"id":694},"what-are-shaders","What are Shaders?",[682,697,698],{},"Shaders are a set of instructions that a system executes for every single pixel on the screen. They are responsible for manipulating the color value including light and darkness for that pixel during rendering. Instead of painting layer by layer, you paint every single pixel on the screen, giving you more control over your painting.",[682,700,701],{},"These instructions run for every pixel in parallel; thus, shaders in Flutter require quite a lot of computational resources to run smoothly. It is also important to note that shaders run on your GPU (Graphical Processing Unit), which is specially made for handling tasks like manipulating pixels and images. Because of this, shaders are extremely fast.",[692,703,705],{"id":704},"how-to-write-a-glsl-shader","How to Write a GLSL Shader",[682,707,708],{},[709,710],"img",{"alt":711,"src":712},"A gradient image built with Flutter.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-001.png",[682,714,715],{},"There are multiple languages you can use to write shaders, including GLSL (OpenGL Shading Language), SKSL (Skia’s Shading Language) and MetalSL (used by Apple devices), among others. If you’re familiar with languages like Dart or C, you should be able to pick up these languages fairly quickly. For the sake of this tutorial, I’ll stick to one language, GLSL.",[682,717,718],{},"For a gentle introduction to writing a GLSL shader, we will be coding a simple example of a shader that outputs the beautiful gradient displayed above.",[682,720,721],{},[709,722],{"alt":723,"src":724},"A GLSL code snippet.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-002.png",[682,726,727],{},"‍Let’s go over the code step-by-step :",[729,730,731,740,755,766,781],"ul",{},[732,733,734,735,739],"li",{},"Like Dart, GLSL defines a single entry point through the ",[736,737,738],"code",{},"main()"," function. At the end of this function, you set the color for the pixel.",[732,741,742,743,746,747,750,751,754],{},"GLSL has built-in variables like ",[736,744,745],{},"gl_FragCoord"," and",[736,748,749],{},"gl_FragColor. gl_FragCoord","gives you the pixel vector position, and you set the pixel color through the ",[736,752,753],{},"gl_FragColor",". When you specify a vec4, you’re actually setting the RGBA values of the color for that pixel.",[732,756,757,758,761,762,765],{},"GLSL allows us to create conditional compilation blocks and defining values in the pre-compilation stage. These blocks or values start with ",[736,759,760],{},"#",". ",[736,763,764],{},"#ifdef(if defined)#endif"," is a conditional operation block that is checked before compilation. The 2nd line executes if the GL_ES is defined, which is a version of GLSL for embedded systems like mobile devices and video game consoles.",[732,767,768,769,772,773,776,777,780],{},"Level of precision is everything when you’re dealing with colors. The more precise you are, the better quality you get. The 2nd line sets the float precision to ",[736,770,771],{},"mediump",". You can also change it to ",[736,774,775],{},"lowp"," or ",[736,778,779],{},"highp"," if you want.",[732,782,783,784,787,788,791,792,795,796,799],{},"Inputs for GLSL shaders are defined by adding a ",[736,785,786],{},"uniform"," in front of them at the top of your code. One of the most important inputs is the ",[736,789,790],{},"u_resolution"," (also called the ",[736,793,794],{},"iResolution",") of ",[736,797,798],{},"type vec2"," which gives you the resolution of the screen.",[692,801,803],{"id":802},"implementing-shaders-in-flutter","Implementing Shaders in Flutter",[682,805,806],{},"With the release of Flutter 3.0, initial support for creating custom shaders was moved to stable. Therefore, it’s important to make sure you’re running the latest version.",[682,808,809],{},"You can upgrade to the latest version by running the following:",[682,811,812],{},[709,813],{"alt":814,"src":815},"A bash script to upgrade Flutter.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-003.png",[682,817,818],{},[819,820,824],"a",{"href":821,"rel":822},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=c7c447a1b7",[823],"nofollow","Save to Pieces",[682,826,827],{},"If you’ve been around Flutter for a while, you may already know that Skia is the Flutter rendering engine that is used for rendering UI and SKSL is its shading language.",[682,829,830],{},"Support for Flutter custom shaders is through the SPIR-V Dart API, which was moved to stable in the release of Flutter 3.0. SPIR-V is an intermediary language designed to act as a bridge between different shading languages in order to make it easier to port shaders from one language to another.",[682,832,833,834,839],{},"To use custom shaders in Flutter, you convert your GLSL code to SPIR-V binaries. (",[819,835,838],{"href":836,"rel":837},"https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\u002Fissues\u002F93498",[823],"Learn more about this.",") Once you have the binaries, you need to use the FragmentProgram from the SPIR-V library, which helps to compile the SPIR-V binary to SKSL and to create a shader from it. However, this manual process is quite time-consuming and not that intuitive if you’d like to get started quickly with Flutter shaders.",[682,841,842],{},"To make things easier, we’ll be taking a look at a tool that will automate this process and generate the SPIR-V binaries from our GLSL code, as well as provide an intuitive API to learn GLSL shaders in Flutter.",[692,844,846],{"id":845},"compiling-shaders-using-umbra","Compiling Shaders Using Umbra",[682,848,849],{},"To make your life a little easier, there’s an amazing tool from the community called Umbra that handles shader compilation and creation for Flutter.",[682,851,852],{},"The Umbra CLI takes care of the compilation of GLSL to SPIR-V and generates the Dart API. The API handles the compilation of SPIR-V to SKSL and provides intuitive, strongly typed language support for your shader. It also adds some abstraction on top of your GLSL code which helps you focus on writing your Flutter shader code. It also adds the necessary raw GLSL code before it compiles the shader. You’ll learn about the abstraction Umbra adds in the next section.",[682,854,855],{},[856,857,858],"strong",{},"1. Activate the Umbra CLI.",[682,860,861],{},[709,862],{"alt":863,"src":864},"A code snippet.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-004.png",[682,866,867],{},[819,868,824],{"href":869,"rel":870},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=1c214a87f2",[823],[682,872,873],{},[856,874,875],{},"2. Once activated, download the Umbra dependencies.",[682,877,878],{},[709,879],{"alt":880,"src":881},"The command to install Umbra dependencies.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-005.png",[682,883,884],{},[819,885,824],{"href":886,"rel":887},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=646e4ab82d",[823],[682,889,890],{},"This might take a while, so sit back and relax a bit!",[692,892,894],{"id":893},"creating-your-first-flutter-shader","Creating Your First Flutter Shader",[682,896,897,898,903],{},"You’ll learn how to add ",[819,899,902],{"href":900,"rel":901},"https:\u002F\u002Fwww.shadertoy.com\u002Fview\u002FfsGcWz",[823],"this cool shader,"," which kind of resembles the waves in water, but a bit fancier. To create it, follow these steps:",[682,905,906,909,910],{},[856,907,908],{},"1. Add the umbra_flutter package in your"," ",[911,912,913],"em",{},[856,914,915],{},"pubspec.yaml",[682,917,918],{},[709,919],{"alt":920,"src":921},"Umbra Flutter code.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-006.png",[682,923,924],{},[819,925,824],{"href":926,"rel":927},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=ce5a458134",[823],[682,929,930],{},"Or add it with the CLI by running:",[682,932,933],{},[709,934],{"alt":935,"src":936},"Umbra Flutter CLI command.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-007.png",[682,938,939],{},[819,940,824],{"href":926,"rel":941},[823],[682,943,944],{},[856,945,946],{},"2. Create a new shader project with the Umbra CLI by running:",[682,948,949],{},[709,950],{"alt":951,"src":952},"Creating an umbra shader project.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-008.png",[682,954,955],{},[819,956,824],{"href":957,"rel":958},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=52b846b5e5",[823],[682,960,961],{},"This will generate a GLSL file at the root of your project where you can add your GLSL code.",[682,963,964,909,967,909,972],{},[856,965,966],{},"3. Add the following GLSL code to the",[911,968,969],{},[856,970,971],{},"hello_world.glsl",[856,973,974],{},"file",[682,976,977],{},[709,978],{"alt":723,"src":979},"https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-009.png",[682,981,982],{},[819,983,824],{"href":984,"rel":985},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=97274f9260",[823],[682,987,988],{},"As you can see, some of the configurations we saw in the earlier example of the GLSL code are abstracted by Umbra.",[682,990,991,992,994,995,998,999,1002,1003,1006,1007,1010,1011,1013],{},"The ",[736,993,738],{}," function is replaced by a ",[736,996,997],{},"fragment"," function which gives us the ",[736,1000,1001],{},"uv"," (normalized coordinates of the pixel) and ",[736,1004,1005],{},"fragCoord"," (coordinates of the pixel without ",[736,1008,1009],{},"normalization-gl_FragCoord","), and returns the pixel color instead of assigning it to ",[736,1012,753],{},".",[682,1015,1016,1017,1020],{},"We also added another input called ",[736,1018,1019],{},"u_time",", which represents the time since we started. It’s crucial when you want to animate your Flutter shaders with respect to time.",[682,1022,1023],{},[856,1024,1025],{},"4. Create a folder named \"shaders\" in your lib folder. Now, run the following command, which takes the path of the GLSL shader file and the output location:",[682,1027,1028],{},[709,1029],{"alt":1030,"src":1031},"A command to generate shaders.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-010.png",[682,1033,1034],{},[819,1035,824],{"href":1036,"rel":1037},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=2f6445a1b0",[823],[682,1039,1040],{},"This generates the Dart files and the SPIR-V binaries at the given output location for your shader.",[682,1042,1043,909,1046,909,1049,909,1052,909,1055],{},[856,1044,1045],{},"5. Create a",[736,1047,1048],{},"my_shader.dart",[856,1050,1051],{},"file somewhere in your lib folder. Add the following code within that file and import your",[736,1053,1054],{},"HelloWorld",[856,1056,1057],{},"shader in this file:",[682,1059,1060],{},[709,1061],{"alt":1062,"src":1063},"A Dart code snippet.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fimg-011.png",[682,1065,1066],{},[819,1067,824],{"href":1068,"rel":1069},"https:\u002F\u002Fe5c6879d-1526-4168-95a2-babbee7593d4.pieces.cloud\u002F?p=91c34f8a03",[823],[682,1071,1072,1073,1076,1077,1080,1081,1084],{},"What you’re doing here, in short, is compiling your shader. As the process is async, you use ",[736,1074,1075],{},"FutureBuilder"," to load it. Once it’s compiled, you then use the ",[736,1078,1079],{},".shader()"," method on your ",[736,1082,1083],{},"UmbraShader"," object and pass it the required inputs.",[682,1086,991,1087,1090,1091,1094,1095,1098,1099,1101,1102,1104],{},[736,1088,1089],{},"resolution"," is the size you want for your shader, and the ",[736,1092,1093],{},"uTime"," is the ",[736,1096,1097],{},"delta"," (time since we started). ",[736,1100,1097],{}," is calculated with the help of Ticker. Ticker triggers a callback for every frame that increments the ",[736,1103,1097],{}," by 1\u002F60 ms.",[682,1106,1107,1108,1111],{},"Finally, you pass the created Flutter shader to the ",[736,1109,1110],{},"CustomPainter"," to paint.",[682,1113,1114],{},"Now that you’ve built everything, run it! Your results will end up looking like what is displayed below.",[682,1116,1117,1118],{},"Awesome! You just created your first shader in Flutter! Isn’t that ",[911,1119,1120],{},"exciting?",[682,1122,1123,1124,1013],{},"The source code for the project can be found ",[819,1125,1128],{"href":1126,"rel":1127},"https:\u002F\u002Fgithub.com\u002Frutvik110\u002FFlutter-Shaders-Hello-World",[823],"here",[692,1130,1132],{"id":1131},"limitations-of-flutter-shaders","Limitations of Flutter Shaders",[682,1134,1135],{},"There are a few limitations and constraints when writing your GLSL shader code for Flutter. Some of the limitations are from Skia, and some are related to the current integration of shaders into Flutter itself.",[682,1137,1138,1139,1144],{},"The following are some of the specific limitations of the ",[819,1140,1143],{"href":1141,"rel":1142},"https:\u002F\u002Fgithub.com\u002FKhronosGroup\u002FSPIRV-Tools\u002Fblob\u002Fmaster\u002FREADME.md",[823],"SPIR-V library",":",[729,1146,1147,1153,1164,1167],{},[732,1148,1149,1152],{},[736,1150,1151],{},"for"," loops must initialize a float variable to a constant value, compare it against a constant value, and increment\u002Fmodify it by a constant value",[732,1154,1155,1156,1159,1160,1163],{},"It does not support ",[736,1157,1158],{},"while"," and ",[736,1161,1162],{},"switch"," statements",[732,1165,1166],{},"The types that are supported sampler2D, bool, float, float-vector types, and square float-matrix types",[732,1168,1169],{},"It only uses the built-in functions present in GLSL ES 100",[682,1171,1172,1173,1176],{},"These are some of the limitations\u002Frules mentioned in the ",[819,1174,1143],{"href":1141,"rel":1175},[823]," that you have to adhere to while writing your GLSL code. Some of these rules are handled by Umbra while generating the raw GLSL code, but for some of them, you should be on the lookout.",[682,1178,1179],{},"In addition, note that there isn’t Flutter web support for shaders at this point. These limitations will likely go away in future versions of the library.",[1181,1182,1184],"h3",{"id":1183},"next-steps","Next Steps",[682,1186,1187],{},"The initial release for supporting Flutter shaders paves the way for some creative coding and unlocks new and never-before-seen experiences.",[682,1189,1190,1191,1196,1197,1202],{},"While I researched shaders in Flutter, I found some interesting features on the Flutter GitHub that may land in the near future. Some of them add support for compiling your ",[819,1192,1195],{"href":1193,"rel":1194},"https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\u002Fissues\u002F93498#issuecomment-1141271458",[823],"GLSL shaders to SPIR-V through the Flutter CLI."," There are even proposals that would make it possible to ",[819,1198,1201],{"href":1199,"rel":1200},"https:\u002F\u002Fgithub.com\u002Fflutter\u002Fflutter\u002Fissues\u002F58361",[823],"create custom shaders and ColorFilters with SKSL",", which could be extremely useful for image\u002Fvideo editing apps and games in general.",[682,1204,1205,1206,1211,1212,1216],{},"If you are interested in staying up-to-date on new developments in shaders or reading more technical articles like this, be sure to subscribe to the ",[819,1207,1210],{"href":1208,"rel":1209},"https:\u002F\u002Fpieces.app\u002Fblog",[823],"Pieces blog"," to get updates on weekly articles and check out ",[819,1213,8],{"href":1214,"rel":1215},"https:\u002F\u002Fpieces.app\u002Finstall",[823],", the fastest, smartest AI Assistant for code snippets and screenshots.",[1218,1219,1221],"h4",{"id":1220},"an-easier-way-to-save-your-flutter-fragments","An Easier Way to Save Your Flutter Fragments",[682,1223,1224],{},"When developing Flutter applications, you may have tons of widgets you save that you want to reuse later, but you just do not have them in a safe place where you can access them. There also may be the scenario where you are combing through Flutter and Dart documentation, and you want to save examples that come in handy when implementing a new feature or figuring out which widget to use for different circumstances.",[682,1226,1227,1229],{},[856,1228,8],{}," helps you save all of your useful code snippets efficiently through a desktop application and integrations. Using Pieces, you can save any code snippets from StackOverflow with the click of a button using the Chrome extension, have your code autosaved from locally-hosted ML algorithms that recognize your code patterns, auto-classify snippets by language, share code with others using generated links, and more! The Pieces for Developers Suite is continuously being developed, and there’s some groundbreaking stuff that is being put together to share, reuse, and save code snippets.",[682,1231,1232,1236],{},[819,1233,1235],{"href":1214,"rel":1234},[823],"Try Pieces now using the personal plan for free","!",{"title":1238,"searchDepth":1239,"depth":1239,"links":1240},"",2,[1241,1242,1243,1244,1245,1246],{"id":694,"depth":1239,"text":695},{"id":704,"depth":1239,"text":705},{"id":802,"depth":1239,"text":803},{"id":845,"depth":1239,"text":846},{"id":893,"depth":1239,"text":894},{"id":1131,"depth":1239,"text":1132,"children":1247},[1248],{"id":1183,"depth":1249,"text":1184},3,null,"Software Development","2022-06-28T00:00:00.000Z","Learn how to add fragment Flutter shaders to your applications to really make your visuals pop.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter\u002Fhero.jpg","Create mind-blowing visuals using flutter shaders.",{},"\u002Fblog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter",{"title":673,"description":1253},"blog\u002Fcreate-mind-blowing-visuals-using-shaders-in-flutter","0lPQitDck5o85ZXFp2B91K0WKkehjZiFyUAeHf_Nfow",{"id":1264,"title":674,"body":1265,"description":1269,"draft":1254,"extension":1255,"meta":1272,"navigation":32,"path":1273,"photo":1274,"photoAlt":1250,"seo":1275,"stem":1276,"__hash__":1277},"authors\u002Fauthors\u002Frutvik-tak.md",{"type":679,"value":1266,"toc":1270},[1267],[682,1268,1269],{},"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":1238,"searchDepth":1239,"depth":1239,"links":1271},[],{},"\u002Fauthors\u002Frutvik-tak","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Frutvik-tak.jpg",{"title":674,"description":1269},"authors\u002Frutvik-tak","HWkSe6txnNhDCCk74fgii1tqQGBDyeC8l7Qydvtn8ko",{"left":1279,"top":1279,"width":1280,"height":1280,"rotate":1279,"vFlip":1254,"hFlip":1254,"body":1281},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>"]