Dartvel UI: DVBox, DVText, modifiers and layouts

const Widget greeting = DVText('Welcome back');

const DVText('Pricing').modifier(
  DVModifier()
      .fontSize(28)
      .fontWeight(.w700)
      .color(Color(0xFF0B1020))
      .semanticHeading(1),
);

Flutter draws text on a canvas, so each page also keeps a hidden copy of its text for the browser's find bar. A match scrolls the page to that paragraph. Static web hosting explains how, and which browsers support it.

Widget card() => DVBox(
      DVText('One child, with padding and a border'),
      DVModifier()
          .padding(16)
          .backgroundColor(Color(0xFFF4F6FB))
          .border(Border.fromBorderSide(BorderSide(color: Color(0xFFE3E7EF))))
          .rounded(12),
    );

Widget layouts() => DVBox.list(<Widget>[
      // A column. Children are 8 apart unless you set spacing.
      const DVBox.row(<Widget>[
        DVText('Left'),
        DVText('Right'),
      ], align: .spaceBetween),
      // A line of children that wraps onto the next line when full.
      const DVBox.wrapLine(<Widget>[
        DVText('Dart'),
        DVText('Flutter'),
        DVText('Web'),
      ], spacing: 12),
      // Up to three columns, fewer on narrow screens.
      DVBox.grid(<Widget>[
        for (int i = 1; i <= 6; i++) DVText('Item $i'),
      ], columns: 3),
    ], spacing: 24);

Start from DVModifier() and chain. Each call returns a new modifier, so you can keep one and reuse it.

Methods: padding, paddingSymmetric, paddingOnly, margin, width, height, maxWidth, minWidth, maxHeight, minHeight, align, centered

Methods: backgroundColor, gradient, backgroundImage, border, rounded, radius, shadow, card, clipContent

Methods: color, fontSize, fontWeight, fontFamily, letterSpacing, lineHeight, maxLines, overflow, decoration

Widget saveButton(VoidCallback onSave) => DVText('Save').modifier(
      DVModifier()
          .paddingSymmetric(horizontal: 20, vertical: 12)
          .backgroundColor(const Color(0xFF2F6BFF))
          .color(const Color(0xFFFFFFFF))
          .rounded(8)
          .animate(const Duration(milliseconds: 150))
          .hover(const DVModifier().opacity(0.9))
          .semanticButton()
          .onTap(onSave),
    );

Widget productGrid(BuildContext context, List<Widget> products) => DVBox.grid(
      products,
      columns: context.screen.value<int>(mobile: 1, tablet: 2, desktop: 4),
      spacing: context.screen.isMobile ? 12 : 24,
    );

value(mobile:, tablet:, desktop:, wide:) picks by breakpoint and falls back to smaller sizes.

Layouts adapt before you add a breakpoint. A row that is too wide for a watch or a phone stacks its children, and a grid drops columns.

On a foldable, context.screen.folds says where the fold is and posture says book or tabletop. DVBox.twoPane puts one pane each side of it.

On a tri-fold, DVBox.threePane puts one pane on each panel and nothing in a crease. Across one fold the first pane has a side and the other two share the other, or with oneFold: DVThreePaneFold.lastAlone the first two share and the third is alone. With no fold: three columns on a desktop, two on a tablet, stacked on a phone. Right-to-left languages start on the right, and a screen reader reads first to last.

Annotate a private function with @DVFunctionalWidget. Dartvel generates a widget class with a const constructor.

// lib/components/price_tag.dart
@DVFunctionalWidget()
Widget _priceTag(BuildContext context, int cents, {String currency = 'USD'}) =>
    DVText('$currency ${(cents / 100).toStringAsFixed(2)}').modifier(
      const DVModifier().fontWeight(.w600),
    );

// Used anywhere as a widget: PriceTag(2499, currency: 'EUR')

Prefer classes? Every sample written as a function has a Class tab beside it. A page is a class extending DVClassWidget with @DVPage on it, and a widget is an ordinary StatelessWidget. Both shapes build and route the same way.

void useDarkMode() => DV.Theme.setMode(.dark);

GETTING STARTED

APP

DATA

BACKEND

OPERATIONS

SHIPPING

REFERENCE

UI and styling

Show text with DVText

Wrap one child with DVBox

Lay out children in a list, row, grid or wrap

Style anything with DVModifier

Make a box react to taps and hover

Adapt to the screen with context.screen

Write reusable widgets as functions

Switch light and dark mode

Status