/*@jsxRuntime automatic @jsxImportSource react*/ const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ section: "section", h1: "h1", p: "p", a: "a", code: "code", pre: "pre" }, props.components), {Accordion} = _components; if (!Accordion) _missingMdxReference("Accordion", true); return _jsxs(_components.section, { id: "faq", children: [_jsx(_components.h1, { id: "faq", children: "FAQ" }), "\n", _jsx(_components.p, { children: "Here is a list of questions that have been previously posed by various members.\nPlease review them carefully as they might address some of the concerns or inquiries you might have." }), "\n", _jsxs(Accordion, { title: "How to configure the widgetbook builder in build.yaml", children: [_jsxs(_components.p, { children: ["You can customize the builder as follows and you can find more configuration in the ", _jsxs(_components.a, { href: "https://pub.dev/packages/build_config", children: [_jsx(_components.code, { children: "build_config" }), " package"] }), "."] }), _jsx(_components.pre, { raw: "targets:\n $default:\n builders:\n widgetbook_generator:use_case_builder:\n generate_for:\n - lib/widgets/**\n", language: "yaml", html: "

targets:\n  $default:\n    builders:\n      widgetbook_generator:use_case_builder:\n        generate_for:\n          - lib/widgets/**\n

", children: _jsx(_components.code, { className: "language-yaml", children: "targets:\n $default:\n builders:\n widgetbook_generator:use_case_builder:\n generate_for:\n - lib/widgets/**\n" }) })] }), "\n", _jsx(Accordion, { title: "How to access the custom theme?", children: _jsxs(_components.p, { children: ["For more detailed information, visit the ", _jsx(_components.a, { href: "/cookbook/custom-theme", children: "Custom Theme in\nWidgetbook" }), "."] }) }), "\n", _jsx(Accordion, { title: "How would I inject a SafeArea or other widgets into the Device Frame for all use cases?", children: _jsx(_components.p, { children: "All devices have a SafeArea by default. Please submit a GitHub issue with the\nbottom sheet issue (including a reproduction code) to be able to track it\nbetter there." }) }), "\n", _jsx(Accordion, { title: "How do we create a Widgetbook account since the 'Get Access' button redirects to Discord without a signup option?", children: _jsx(_components.p, { children: "Widgetbook Cloud is in Early Access. If you've submitted the Typeform on our\nwebsite, you're on the waiting list. For specific details regarding your\nsubmission, please DM the email address you used for the Typeform." }) }), "\n", _jsx(Accordion, { title: "I'm facing a Socket issue with NetworkImage and Image.network() in Widgetbook, though it works fine in emulators/simulators. Did I miss a specific configuration?", children: _jsxs(_components.p, { children: ["It sounds like you're running Widgetbook locally on MacOS. On MacOS, you need\nto grant network access in the XCode project settings. ", _jsx(_components.a, { href: "https://stackoverflow.com/questions/65458903/socketexception-connection-failed-os-error-operation-not-permitted-errno-1.", children: "Refer to this link for\nmore\ndetails" }), "."] }) }), "\n", _jsx(Accordion, { title: "How can I align the `scaffoldBackgroundColor` with my custom dark and light themes in Widgetbook?", children: _jsxs(_components.p, { children: ["When referencing the scaffold's background, it's typically about the\nbackground of the preview screen/app, which Widgetbook renders using a\nMaterial Scaffold defined by the ", _jsx(_components.code, { children: "ScaffoldBuildFunction" }), ". For custom themes,\nthe default Material Scaffold might not be suitable. To rectify this, you\nshould integrate the custom theme with the scaffold. Check out ", _jsx(_components.a, { href: "/cookbook/custom-theme", children: "Custom Theme\nin Widgetbook" }), ". Using the provided context, you can\naccess the prevailing Brightness and/or Theme. It's worth noting that current\ndocumentation might be limited regarding custom theming, but improvements are\nunderway."] }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Overview

Guides

Addons

Knobs

Migration

Next

Cookbook

Widgetbook Cloud

CLI

Contribution

FAQ