Banner

Displays a customizable banner for an impactful visual, made at minimum with a title and an image.

Component source </>

Installation

To install with Mason CLI, run the following:

mason make flex_ui --component banner

To install manually, copy and paste the component source files linked at the top of this page into your Flutter project.

Dependencies

Internal

This component relies on some Flex UI primitive components:

1. FlexImage
2. FlexButton (TODO)

Properties

Name	Type	Description
overline	Widget?	Heading line to emphasise the title
title	Widget	Title of the banner
description	Widget?	Long descriptive text below the title
image	FlexImage	Image of the banner
orientation	Axis?	The banner can be horizontal or vertical (default: horizontal)
imageLayout	FlexBannerImageLayout	The image can be placed after the rest of the elements, or before (default: after)
theme	CardTheme	The banner leverages the Material theme for its styling (elevation, rounded corners, background color, etc.). The provided instance is merged with the one inherited from the app

Examples

Minimal

Preview

Code

FlexBanner(
  title: Text('Halloween specials!'),
  image: FlexImage(
    'https://unsplash.it/320/280',
    width: 320,
    height: 280,
  ),
)

Full

Preview

Code

FlexBanner(
  overline: Text(
    'FEATURED',
    style: Theme.of(context).textTheme.labelSmall,
    textAlign: TextAlign.center,
  ),
  title: Text(
    'Halloween specials!',
    style: Theme.of(context).textTheme.titleMedium,
    textAlign: TextAlign.center,
  ),
  description: Text(
    'Get you hands on the latest Halloween\ndeals before it\'s too late!',
    style: Theme.of(context).textTheme.bodySmall,
    textAlign: TextAlign.center,
  ),
  image: const FlexImage(
    'https://unsplash.it/320/280',
    width: 320,
    height: 280,
  ),
)