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

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,
  RemixCalloutStyle style = const RemixCalloutStyle.create(),
  RemixCalloutSpec? styleSpec,
})

Properties

Widget Properties

Style Methods

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