DecoratedBox Widget

Demonstrates using DecoratedBox to apply Decoration and BoxDecoration to child widgets, including borders, backgrounds, and foreground positioning.

Preview

Code

pkgs/artisanal_widgets/example/decorated_box/main.dart

// DecoratedBox Widget Example
import 'package:artisanal_widgets/artisanal_widgets.dart';
//
// Demonstrates using DecoratedBox to apply Decoration and BoxDecoration
// to child widgets, including borders, backgrounds, and foreground positioning.
//
// Run with: dart run example/decorated_box/main.dart

import 'package:artisanal/style.dart' hide Padding, Align;
import 'package:artisanal/tui.dart' as tui;
import 'package:artisanal_widgets/widgets.dart' as w;

void main() async {
  final app = WidgetApp(DecoratedBoxExample());
  await tui.runProgram(
    app,
    options: const tui.ProgramOptions(
      altScreen: true,
      mouseMode: tui.MouseMode.allMotion,
    ),
  );
}

class DecoratedBoxExample extends w.StatefulWidget {
  DecoratedBoxExample({super.key});

  @override
  w.State createState() => _DecoratedBoxExampleState();
}

class _DecoratedBoxExampleState extends w.State<DecoratedBoxExample> {
  final w.WidgetScrollController _scrollController = w.WidgetScrollController();

  @override
  w.Widget build(w.BuildContext context) {
    final theme = widget.theme;
    final label = theme.labelSmall.copy()..foreground(theme.onBackground);

    return w.Container(
      child: w.Scrollbar(
        controller: _scrollController,
        thickness: 1,
        gap: 1,
        enableHover: true,
        trackChar: ' ',
        thumbChar: ' ',
        trackUsesBackground: true,
        thumbUsesBackground: true,
        trackGradient: w.ScrollbarGradient.background(
          start: w.hasDarkBackground
              ? const BasicColor('#2f363d')
              : const BasicColor('#e3e7eb'),
          end: w.hasDarkBackground
              ? const BasicColor('#1f252a')
              : const BasicColor('#d3d9e0'),
        ),
        thumbGradient: w.ScrollbarGradient.background(
          start: w.hasDarkBackground
              ? const BasicColor('#3fb2ff')
              : const BasicColor('#2f7df6'),
          end: w.hasDarkBackground
              ? const BasicColor('#7c5cff')
              : const BasicColor('#6e55f5'),
        ),
        hoverThumbGradient: w.ScrollbarGradient.background(
          start: w.hasDarkBackground
              ? const BasicColor('#79ddff')
              : const BasicColor('#4f93ff'),
          end: w.hasDarkBackground
              ? const BasicColor('#b18bff')
              : const BasicColor('#836bff'),
        ),
        hoverThumbChar: ' ',
        child: w.ScrollView(
          controller: _scrollController,
          handleKeys: true,
          child: w.Column(
            gap: 1,
            children: [
              w.Text('DecoratedBox Widget', style: theme.titleLarge),
              w.Text('q: quit', style: label),
              w.Divider(width: 50),

              // Background color decoration
              w.Text(
                'Background color (Decoration):',
                style: theme.titleMedium,
              ),
              w.Row(
                gap: 2,
                children: [
                  w.DecoratedBox(
                    decoration: w.Decoration(color: Colors.blue),
                    child: w.Text(' Blue BG '),
                  ),
                  w.DecoratedBox(
                    decoration: w.Decoration(color: Colors.red),
                    child: w.Text(' Red BG '),
                  ),
                  w.DecoratedBox(
                    decoration: w.Decoration(color: Colors.green),
                    child: w.Text(' Green BG '),
                  ),
                ],
              ),

              w.Divider(width: 50),

              // BoxDecoration with borders
              w.Text('Borders (BoxDecoration):', style: theme.titleMedium),
              w.Row(
                gap: 2,
                children: [
                  w.DecoratedBox(
                    decoration: w.BoxDecoration(border: Border.rounded),
                    child: w.Text(' Rounded '),
                  ),
                  w.DecoratedBox(
                    decoration: w.BoxDecoration(border: Border.normal),
                    child: w.Text(' Normal '),
                  ),
                  w.DecoratedBox(
                    decoration: w.BoxDecoration(border: Border.double),
                    child: w.Text(' Double '),
                  ),
                  w.DecoratedBox(
                    decoration: w.BoxDecoration(border: Border.thick),
                    child: w.Text(' Thick '),
                  ),
                ],
              ),

              w.Divider(width: 50),

              // Border with borderRadius
              w.Text('With borderRadius:', style: theme.titleMedium),
              w.Row(
                gap: 2,
                children: [
                  w.DecoratedBox(
                    decoration: w.BoxDecoration(
                      border: Border.double,
                      borderRadius: w.BorderRadius.all(1),
                    ),
                    child: w.Text(' Radius 1 '),
                  ),
                  w.DecoratedBox(
                    decoration: w.BoxDecoration(
                      border: Border.normal,
                      borderRadius: w.BorderRadius.all(2),
                    ),
                    child: w.Text(' Radius 2 '),
                  ),
                ],
              ),

              w.Divider(width: 50),

              // Foreground decoration position
              w.Text(
                'DecorationPosition.foreground:',
                style: theme.titleMedium,
              ),
              w.Row(
                gap: 2,
                children: [
                  w.DecoratedBox(
                    decoration: w.Decoration(color: Colors.cyan),
                    position: w.DecorationPosition.background,
                    child: w.Text(' Background (default) '),
                  ),
                  w.DecoratedBox(
                    decoration: w.Decoration(color: Colors.cyan),
                    position: w.DecorationPosition.foreground,
                    child: w.Text(' Foreground '),
                  ),
                ],
              ),

              w.Divider(width: 50),

              // Empty DecoratedBox
              w.Text('Empty (no child):', style: theme.titleMedium),
              w.DecoratedBox(
                decoration: w.BoxDecoration(border: Border.rounded),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  tui.Cmd? handleUpdate(tui.Msg msg) {
    if (msg is tui.KeyMsg && msg.key.char == 'q') {
      return tui.Cmd.quit();
    }
    return null;
  }
}

Run it

dart run pkgs/artisanal_widgets/example/decorated_box/main.dart