Stockholm UI Library

Use StockholmPIOneLineProp for simple key-value pairs that fit on a single line. It aligns the property name and the value widget side-by-side.

• name: The label for the property.
• value: The widget displaying the value.
• nameAlignment: The alignment of the name text (defaults to TextAlign.end).

StockholmPIOneLineProp(
  name: 'Username',
  value: Text('jdoe'),
  nameAlignment: TextAlign.start,
);

The StockholmButton is a styled Material button used for primary actions. It supports different visual states such as important (primary color) and large (increased height and text style). It automatically adjusts its border radius based on the platform (Windows uses a radius of 3, others use 6).

StockholmButton(
  onPressed: () => print('Pressed!'),
  child: Text('Click Me'),
  important: true,
  large: true,
  padding: EdgeInsets.symmetric(horizontal: 16),
)

The ColorExt extension adds utility methods to any Flutter Color to adjust its lightness using HSL manipulation.

• darken([double amount = .1]): Returns a new color with reduced lightness. amount must be between 0.0 and 1.0.
• lighten([double amount = .1]): Returns a new color with increased lightness. amount must be between 0.0 and 1.0.

Color baseColor = Colors.blue;
Color darkerColor = baseColor.darken(0.2);
Color lighterColor = baseColor.lighten(0.1);

Use StockholmPIListProp to display a collection of widgets within a scrollable, styled container inside the inspector. If the list is empty or null, it displays a fallback text.

• name: The label for the list.
• fallbackText: Text to show when the list is empty.
• list: The list of widgets to display.
• height: The height of the list container (defaults to 200.0).
• trailing: An optional widget to display next to the name.

StockholmPIListProp(
  name: 'Tags',
  fallbackText: 'No tags assigned',
  list: [
    Text('Flutter'),
    Text('Dart'),
  ],
);

The StockholmToolbar is a container widget used to display a row of interactive elements or information. It supports different placements and automatic border styling based on its position.

Configuration

• children: A list of widgets to display in the toolbar.
• backgroundColor: An optional color for the toolbar background.
• placement: Determines where the toolbar is located and which border side is drawn. Use StockholmToolbarPlacement.top or StockholmToolbarPlacement.bottom.

When placement is top, a bottom border is drawn using the theme's dividerColor. When bottom, a top border is drawn.

StockholmToolbar(
  placement: StockholmToolbarPlacement.top,
  backgroundColor: Colors.white,
  children: [
    StockholmToolbarButton(
      icon: Icons.add,
      onPressed: () => print('Added'),
    ),
  ],
)

Use StockholmPICheckboxProp to display an interactive checkbox for boolean properties.

• name: The label for the checkbox.
• value: The current boolean state.
• onChanged: Callback triggered when the user toggles the checkbox.
• enabled: Whether the checkbox is interactive (defaults to true).

StockholmPICheckboxProp(
  name: 'Active',
  value: isActive,
  onChanged: (bool? newValue) {
    setState(() => isActive = newValue ?? false);
  },
);

A helper function to display a StockholmProgressDialog using Flutter's showDialog. It sets barrierDismissible: false by default, ensuring the user cannot dismiss the progress dialog by tapping outside of it.

showStockholmProgressDialog(
  context: context,
  builder: (context) => StockholmProgressDialog(
    title: Text('Title'),
    controller: myController,
  ),
);

Use StockholmPILargeProp when a property value requires more space (e.g., a large text block or a nested list). The name is placed above the value, and the value can span multiple lines.

• name: The label for the property.
• value: The widget containing the large value.
• trailing: An optional widget to display on the same line as the name (e.g., an icon or badge).

StockholmPILargeProp(
  name: 'Description',
  value: Text('This is a very long description that needs multiple lines.'),
  trailing: Icon(Icons.info),
);