This repository hosts a groceries demo application creatively called Groceries App.
-
In the root folder, bootstrap the app
flutter pub get # Install deps flutter gen-l10n # Generate localization files
-
In the
widgetbookfolder, run Widgetbookflutter pub get # Install deps dart run build_runner build -d # Generate files flutter run # Run
Make sure to have completed the following setup before the workshop starts.
Make sure you have Flutter 3.35 / Dart 3.9 installed.
Setup Cursor, if you've already used the free trial, try another email.
Note: If you don't have access or don't want to use Cursor, you can use VS Code + Copilot + Claude Sonnet instead.
- In Cursor go to Settings > Cursor Settings > Indexing & Docs
- In the bottom add the following docs to index
https://docs.widgetbook.iohttps://pub.dev/documentation/widgetbook/latest/widgetbook/
Note: This might take some time.
- In Cursor go to Settings > Cursor Settings > MCP & Integrations
- Click the "New MCP Server" button at the bottom of the page to open Cursor's mcp.json file
- Insert the following code
{
"mcpServers": {
"Widgetbook MCP": {
"type": "http",
"url": "http://127.0.0.1:3013/mcp"
},
"Figma MCP": {
"type": "http",
"url": "http://127.0.0.1:3845/mcp"
},
"dart": {
"command": "dart",
"args": [
"mcp-server"
]
}
}
}Note: MCP servers for VS Code are pre-defined in .vscode/mcp.json.
We created pre-defined cursor rules (.cursor/rules) for the workshop.
These rules are not automatically applied.
You can check them out in advance.
Note: If you're using VS Code you can find the rules in .github/prompts.
- Make sure you have the lastest version of the Figma Desktop App installed.
- If you don't have a Figma account with an Professional, Organization, or Enterprise plan, log into the following Figma account:
- Email:
[email protected] - Password:
WidgetbookWorkshop - Notes: Account will be deactivated after the workshop
- Email:
- If you have one of the mentioned paid plans, open the Figma file