build method

@override View? build()

Builds this component's renderable output.

App code can return a node, another component, text, or an iterable of renderable values. The renderer normalizes the value internally.

Implementation

@override
View build() {
  return FlintElement(
    'div',
    props: mergeComponentProps(
      props,
      className: className,
      dartStyle: const DartStyle(
        display: Display.grid,
        gap: 10,
        width: SizeValue.full,
      ).merge(dartStyle),
      style: style,
    ),
    children: [
      if (showToolbar)
        FlintElement(
          'div',
          props: mergeComponentProps(
            const {},
            dartStyle: const DartStyle(
              display: Display.flex,
              alignItems: AlignItems.center,
              justifyContent: JustifyContent.between,
              gap: 10,
              flexWrap: FlexWrap.wrap,
            ),
          ),
          children: [
            FlintElement(
              'div',
              props: mergeComponentProps(
                const {},
                dartStyle: const DartStyle(
                  display: Display.flex,
                  alignItems: AlignItems.center,
                  gap: 8,
                ),
              ),
              children: [
                FlintElement(
                  'strong',
                  props: mergeComponentProps(
                    const {},
                    dartStyle: DartStyle(
                      color: ThemeToken.color(
                        'text',
                        fallback: '#0f172a',
                      ).toCss(),
                      fontSize: 13,
                    ),
                  ),
                  children: [FlintText(title)],
                ),
                FlintElement(
                  'span',
                  props: {
                    'id': '$_instanceId-status',
                    'data-state': TerminalConnectionState.idle.name,
                    'style': {
                      'font-size': '12px',
                      'color': ThemeToken.color(
                        'muted',
                        fallback: '#667085',
                      ).toCss(),
                    },
                  },
                  children: const [FlintText('Ready')],
                ),
              ],
            ),
            FlintElement(
              'div',
              props: mergeComponentProps(
                const {},
                dartStyle: const DartStyle(display: Display.flex, gap: 6),
              ),
              children: [
                Button(
                  variant: ButtonVariant.outline,
                  size: ComponentSize.sm,
                  child: 'Reconnect',
                ),
                Button(
                  variant: ButtonVariant.outline,
                  size: ComponentSize.sm,
                  child: 'Clear',
                ),
                Button(
                  variant: ButtonVariant.outline,
                  size: ComponentSize.sm,
                  child: 'Copy',
                ),
              ],
            ),
          ],
        ),
      FlintElement(
        'div',
        props: mergeComponentProps(
          {
            'id': '$_instanceId-mount',
            'role': 'application',
            'aria-label': '$title interactive terminal',
            'tabIndex': 0,
          },
          dartStyle: DartStyle(
            width: SizeValue.full,
            height: height,
            overflow: Overflow.hidden,
            padding: const EdgeInsets.all(8),
            radius: ThemeToken.radius('md', fallback: '8px').toCss(),
            border: Border(
              color: ThemeToken.color(
                'inputBorder',
                fallback: '#d0d5dd',
              ).toCss(),
            ),
            background: ThemeToken.color(
              'inputSurface',
              fallback: '#ffffff',
            ).toCss(),
            color: ThemeToken.color(
              'inputText',
              fallback: '#101828',
            ).toCss(),
            fontFamily: ThemeToken.font(
              'mono',
              fallback: FontFamily.monospace,
            ).toCss(),
            fontSize: fontSize,
          ),
        ),
        children: const [
          FlintText('Interactive terminal loads in the browser.'),
        ],
      ),
    ],
  );
}