IDE Integration topic

Caution

This topic is under construction.

This topic describes how to improve the integration of Werkbank with your IDE, making development easier and more efficient.

Table of Contents

Adding Live Templates/Snippets to your IDE

Android Studio

  1. Copy the XML from of the live templates below into your clipboard.
  2. Go to File -> Settings -> Editor -> Live Templates.
  3. Right-click on the "Flutter" group.
  4. Press "Paste".

Visual Studio Code

  1. Copy the JSON from of the snippets below into your clipboard.
  2. Go to Code -> Preferences -> Configure Snippets and select "dart".
  3. Paste the JSON into the opened file between the curly braces.

Use Case and Component Live Templates/Snippets

Simple Use Case (wbusecase)

To make it easier to write a new use case, you can create a live template/snippet in your IDE. This one generates a getter for a WerkbankUseCase and a corresponding UseCaseBuilder function.

For an Example usage of this pattern, see slider_use_cases.dart from the example app.

Android Studio Live Template XML 
<template name="wbusecase" value="import 'package:flutter/widgets.dart';&#10;import 'package:werkbank/werkbank.dart';&#10;&#10;WerkbankUseCase get $NAME$UseCase =&gt; WerkbankUseCase(&#10;    name: '$CAP_NAME$',&#10;    builder: _useCase,&#10;  );&#10;&#10;WidgetBuilder _useCase(UseCaseComposer c) {&#10;  return (context) {&#10;    return $END$const Placeholder();&#10;  };&#10;}" description="Creates a Werkbank use case." toReformat="false" toShortenFQNames="true">
  <variable name="NAME" expression="" defaultValue="" alwaysStopAt="true" />
  <variable name="CAP_NAME" expression="capitalize(NAME)" defaultValue="" alwaysStopAt="false" />
  <context>
    <option name="DART_TOPLEVEL" value="true" />
  </context>
</template>
Visual Studio Code Snippet JSON: 
"Create a UseCase": {
    "prefix": "wbusecase",
    "body": [
        "import 'package:flutter/widgets.dart';",
        "import 'package:werkbank/werkbank.dart';",
        "",
        "WerkbankUseCase get ${1:name}UseCase => WerkbankUseCase(",
        "  name: '${1/(.*)/${1:/capitalize}/}',",
        "  builder: _useCase,",
        ");",
        "",
        "WidgetBuilder _useCase(UseCaseComposer c) {",
        "  return (context) {",
        "    return ${0:const Placeholder()};",
        "  };",
        "}",
    ],
    "description": "Creates a Werkbank use case."
},

Generated Code (after entering "myWidget"):

import 'package:flutter/widgets.dart';
import 'package:werkbank/werkbank.dart';

WerkbankUseCase get myWidgetUseCase => WerkbankUseCase(
  name: 'MyWidget',
  builder: _useCase,
);

WidgetBuilder _useCase(UseCaseComposer c) {
  return (context) {
    return const Placeholder();
  };
}

Component with Multiple Use Cases (wbcomponent)

When you have a component that you want to showcase in multiple different ways, you should create multiple use cases and group them in a WerkbankComponent. This live template/snippet generates a getter for a component with two use cases.

For an Example usage of this pattern, see date_picker_use_cases.dart from the example app.

Android Studio Live Template XML 
<template name="wbcomponent" value="import 'package:flutter/widgets.dart';&#10;import 'package:werkbank/werkbank.dart';&#10;&#10;WerkbankComponent get $NAME$Component =&gt; WerkbankComponent(&#10;  name: '$CAP_NAME$',&#10;  useCases: [&#10;    WerkbankUseCase(&#10;      name: 'One',&#10;      builder: _one,&#10;    ),&#10;    WerkbankUseCase(&#10;      name: 'Two',&#10;      builder: _two,&#10;    ),&#10;  ],&#10;);&#10;&#10;WidgetBuilder _one(UseCaseComposer c) {&#10;  return (context) {&#10;    return $END$const Placeholder();&#10;  };&#10;}&#10;&#10;WidgetBuilder _two(UseCaseComposer c) {&#10;  return (context) {&#10;    return const Placeholder();&#10;  };&#10;}" description="Creates a Werkbank component with two use cases." toReformat="false" toShortenFQNames="true">
  <variable name="NAME" expression="" defaultValue="" alwaysStopAt="true" />
  <variable name="CAP_NAME" expression="capitalize(NAME)" defaultValue="" alwaysStopAt="false" />
  <context>
    <option name="DART_TOPLEVEL" value="true" />
  </context>
</template>
Visual Studio Code Snippet JSON: 
"Create a Component": {
    "prefix": "wbcomponent",
    "body": [
        "import 'package:flutter/widgets.dart';",
        "import 'package:werkbank/werkbank.dart';",
        "",
        "WerkbankComponent get ${1:name}Component => WerkbankComponent(",
        "  name: '${1/(.*)/${1:/capitalize}/}',",
        "  useCases: [",
        "    WerkbankUseCase(",
        "      name: 'One',",
        "      builder: _one,",
        "    ),",
        "    WerkbankUseCase(",
        "      name: 'Two',",
        "      builder: _two,",
        "    ),",
        "  ],",
        ");",
        "",
        "WidgetBuilder _one(UseCaseComposer c) {",
        "  return (context) {",
        "    return ${0:const Placeholder()};",
        "  };",
        "}",
        "",
        "WidgetBuilder _two(UseCaseComposer c) {",
        "  return (context) {",
        "    return const Placeholder();",
        "  };",
        "}",
    ],
    "description": "Creates a Werkbank component with two use cases."
},

Generated Code (after entering "myWidget"):

import 'package:flutter/widgets.dart';
import 'package:werkbank/werkbank.dart';

WerkbankComponent get myWidgetComponent => WerkbankComponent(
  name: 'MyWidget',
  useCases: [
    WerkbankUseCase(
      name: 'One',
      builder: _one,
    ),
    WerkbankUseCase(
      name: 'Two',
      builder: _two,
    ),
  ],
);

WidgetBuilder _one(UseCaseComposer c) {
  return (context) {
    return const Placeholder();
  };
}

WidgetBuilder _two(UseCaseComposer c) {
  return (context) {
    return const Placeholder();
  };
}

Component with Variant Use Cases (wbvariantscomponent)

Sometimes you may find yourself in a position where you want to write multiple use cases for a component that have things in common, like a shared composition with the same knobs or something similar. This may happen when you have different variants of a component. This live template/snippet generates a getter for a component with multiple use cases derived from a single function that takes a variant enum as parameter.

For an Example usage of this pattern, see button_use_cases.dart from the example app.

Before using this pattern, consider whether knob presets are a better fit for your scenario.

Android Studio Live Template XML: 
<template name="wbvariantscomponent" value="import 'package:flutter/widgets.dart';&#10;import 'package:werkbank/werkbank.dart';&#10;&#10;enum _Variant {&#10;  one('One'),&#10;  two('Two');&#10;&#10;  const _Variant(this.name);&#10;&#10;  final String name;&#10;}&#10;&#10;WerkbankComponent get $NAME$Component =&gt; WerkbankComponent(&#10;  name: '$CAP_NAME$',&#10;  useCases: [&#10;    for (final variant in _Variant.values)&#10;      WerkbankUseCase(&#10;        name: variant.name,&#10;        builder: (c) =&gt; _multiUseCase(c, variant),&#10;      ),&#10;  ],&#10;);&#10;&#10;WidgetBuilder _multiUseCase(&#10;  UseCaseComposer c,&#10;  _Variant variant,&#10;) {&#10;  return (context) {&#10;    return switch (variant) {&#10;      _Variant.one =&gt; $END$const Placeholder(),&#10;      _Variant.two =&gt; const Placeholder(),&#10;    };&#10;  };&#10;}" description="Creates a Werkbank component with multiple similar use cases." toReformat="false" toShortenFQNames="true">
  <variable name="NAME" expression="" defaultValue="" alwaysStopAt="true" />
  <variable name="CAP_NAME" expression="capitalize(NAME)" defaultValue="" alwaysStopAt="false" />
  <context>
    <option name="DART_TOPLEVEL" value="true" />
  </context>
</template>
Visual Studio Code Snippet JSON: 
"Create a Component for similar UseCases": {
    "prefix": "wbvariantscomponent",
    "body": [
        "import 'package:flutter/widgets.dart';",
        "import 'package:werkbank/werkbank.dart';",
        "",
        "enum _Variant {",
        "  one('One'),",
        "  two('Two');",
        "",
        "  const _Variant(this.name);",
        "",
        "  final String name;",
        "}",
        "",
        "WerkbankComponent get ${1:name}Component => WerkbankComponent(",
        "  name: '${1/(.*)/${1:/capitalize}/}',",
        "  useCases: [",
        "    for (final variant in _Variant.values)",
        "      WerkbankUseCase(",
        "        name: variant.name,",
        "        builder: (c) => _multiUseCase(c, variant),",
        "      ),",
        "  ],",
        ");",
        "",
        "WidgetBuilder _multiUseCase(",
        "  UseCaseComposer c,",
        "  _Variant variant,",
        ") {",
        "  return (context) {",
        "    return switch (variant) {",
        "      _Variant.one => ${0:const Placeholder()},",
        "      _Variant.two => const Placeholder(),",
        "    };",
        "  };",
        "}",
    ],
    "description": "Creates a Werkbank component with multiple similar use cases."
},

Generated Code (after entering "myWidget"):

import 'package:flutter/widgets.dart';
import 'package:werkbank/werkbank.dart';

enum _Variant {
  one('One'),
  two('Two');

  const _Variant(this.name);

  final String name;
}

WerkbankComponent get myWidgetComponent => WerkbankComponent(
  name: 'MyWidget',
  useCases: [
    for (final variant in _Variant.values)
      WerkbankUseCase(
        name: variant.name,
        builder: (c) => _multiUseCase(c, variant),
      ),
  ],
);

WidgetBuilder _multiUseCase(
  UseCaseComposer c,
  _Variant variant,
  ) {
  return (context) {
    return switch (variant) {
      _Variant.one => const Placeholder(),
      _Variant.two => const Placeholder(),
    };
  };
}

Typedefs

UseCaseBuilder = WidgetBuilder Function(UseCaseComposer c) Getting Started File Structure IDE Integration Writing Use Cases Structure
A builder function for a use case.