text static method

StoryItem text({
  1. required String title,
  2. required Color backgroundColor,
  3. Key? key,
  4. TextStyle? textStyle,
  5. bool shown = false,
  6. bool roundedTop = false,
  7. bool roundedBottom = false,
  8. EdgeInsetsGeometry? textOuterPadding,
  9. Duration? duration,
})

Short hand to create text-only page.

title is the text to be displayed on backgroundColor. The text color alternates between Colors.black and Colors.white depending on the calculated contrast. This is to ensure readability of text.

Works for inline and full-page stories. See StoryView.inline for more on what inline/full-page means.

Implementation

static StoryItem text({
  required String title,
  required Color backgroundColor,
  Key? key,
  TextStyle? textStyle,
  bool shown = false,
  bool roundedTop = false,
  bool roundedBottom = false,
  EdgeInsetsGeometry? textOuterPadding,
  Duration? duration,
}) {
  double contrast = ContrastHelper.contrast([
    backgroundColor.r,
    backgroundColor.g,
    backgroundColor.b,
  ], [
    255.0,
    255.0,
    255.0
  ] /** white text */);

  return StoryItem(
    Container(
      key: key,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.vertical(
          top: Radius.circular(roundedTop ? 8 : 0),
          bottom: Radius.circular(roundedBottom ? 8 : 0),
        ),
      ),
      padding: textOuterPadding?? EdgeInsets.symmetric(
        horizontal: 24,
        vertical: 16,
      ),
      child: Center(
        child: Text(
          title,
          style: textStyle?.copyWith(
                color: contrast > 1.8 ? Colors.white : Colors.black,
              ) ??
              TextStyle(
                color: contrast > 1.8 ? Colors.white : Colors.black,
                fontSize: 18,
              ),
          textAlign: TextAlign.center,
        ),
      ),
      //color: backgroundColor,
    ),
    shown: shown,
    duration: duration ?? Duration(seconds: 3),
  );
}