Callout

A component for displaying important information or messages with optional icons.

When to use this

• Important information: Highlight critical information that users need to see
• Warnings: Display warning messages or cautionary notes
• Tips and hints: Show helpful tips or contextual guidance
• Status messages: Communicate system status or updates

Basic implementation

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

class CalloutExample extends StatelessWidget {
  const CalloutExample({super.key});

  @override
  Widget build(BuildContext context) {
    return RemixCallout(
      text: 'Callout important information for the user.',
      icon: Icons.info_outline,
      style: style,
    );
  }

  RemixCalloutStyle get style {
    return RemixCalloutStyle()
        .color(Colors.grey.shade200)
        .spacing(12)
        .height(60)
        .paddingRight(12)
        .icon(
          IconStyler().size(24).color(Colors.white).wrapBox(BoxStyler()
              .color(Colors.blue.shade900)
              .paddingX(12)
              .height(double.infinity)),
        )
        .mainAxisSize(MainAxisSize.min);
  }
}

Fortal styles

Remix includes Fortal-themed style helpers for this component:

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

class FortalCalloutExample extends StatelessWidget {
  const FortalCalloutExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      spacing: 16,
      children: [
        RemixCallout(
          text: 'Information callout',
          icon: Icons.info,
          style: FortalCalloutStyle.info(),
        ),
        RemixCallout(
          text: 'Success callout',
          icon: Icons.check_circle,
          style: FortalCalloutStyle.success(),
        ),
        RemixCallout(
          text: 'Warning callout',
          icon: Icons.warning,
          style: FortalCalloutStyle.warning(),
        ),
      ],
    );
  }
}

Constructor

const RemixCallout({
  Key? key,
  Widget? child,
  String? text,
  IconData? icon,
  RemixCalloutTextBuilder? textBuilder,
  RemixCalloutIconBuilder? iconBuilder,
  RemixCalloutStyle style = const RemixCalloutStyle.create(),
  RemixCalloutSpec? styleSpec,
})

Properties

Widget Properties

style → Key?

Optional.

styleSpec → Key?

Optional.

key → Key?

Optional. Controls how one widget replaces another widget in the tree.

text → String?

Optional. The text to display in the callout.

icon → IconData?

Optional. The icon to display in the callout.

child → Widget?

Optional. Optional custom child content for the callout body.

Style Methods

padding(EdgeInsetsGeometryMix value)

Sets container padding

margin(EdgeInsetsGeometryMix value)

Sets container margin

color(Color value)

Sets container background color

borderRadius(BorderRadiusGeometryMix radius)

Sets container border radius

decoration(DecorationMix value)

Sets container decoration

alignment(Alignment value)

Sets container alignment

spacing(double value)

Sets flex spacing

iconColor(Color value)

Sets icon color

textColor(Color value)

Sets text color

wrap(WidgetModifierConfig value)

animate(AnimationConfig config)

constraints(BoxConstraintsMix value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)

flex(FlexStyler value)

icon(IconStyler value)

text(TextStyler value)

iconSize(double value)

Sets icon size

iconOpacity(double value)

Sets icon opacity

iconWeight(double value)

Sets icon weight (useful for variable icons like Material Symbols)

iconGrade(double value)

Sets icon grade (useful for Material Icons)

iconFill(double value)

Sets icon fill (useful for Material Icons filled variants)

iconOpticalSize(double value)

Sets icon optical size (useful for Material Icons)

iconBlendMode(BlendMode value)

Sets icon blend mode

iconTextDirection(TextDirection value)

Sets icon text direction

iconShadows(List<ShadowMix> value)

Sets icon shadows

iconShadow(ShadowMix value)

Sets single icon shadow