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()
        .backgroundColor(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);
  }
}

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


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(),
        ),
      ],
    );
  }
}

See the FortalCalloutStyle source code for all available options.

Constructor


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

Properties

Prop	Type	Required / Default Value
`style`	`RemixCalloutStyle`	Optional. The style configuration for the callout. Customize colors, sizing, spacing, and state-based styling.
`styleSpec`	`RemixCalloutSpec?`	Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.
`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

Method	Description
`padding(EdgeInsetsGeometryMix value)`	Sets container padding
`margin(EdgeInsetsGeometryMix value)`	Sets container margin
`backgroundColor(Color value)`	Sets container background color
`foregroundColor(Color value)`	Sets the foreground color (icon and text) of the callout
`shape(ShapeBorderMix value)`	Sets the shape of the callout
`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)`	Applies widget modifiers such as clipping, opacity, or scaling.
`animate(AnimationConfig config)`	Configures implicit animation for style transitions.
`constraints(BoxConstraintsMix value)`	Sets size constraints on the component.
`foregroundDecoration(DecorationMix value)`	Sets a foreground decoration painted on top of the component.
`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`	Applies a matrix transformation to the component.
`flex(FlexStyler value)`	Configures the flex layout properties.
`icon(IconStyler value)`	Configures the icon style using an IconStyler.
`text(TextStyler value)`	Configures the text style using a TextStyler.
`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