StyledContainer

StyledContainer is a versatile and customizable container component in the Flood toolkit that streamlines the creation of visually consistent layouts. It supports three emphasis levels (subtle, regular, and strong) to convey content hierarchy, adapts automatically to its surroundings, and offers interactivity through onPressed and onLongPressed callbacks. The appearance and behavior of StyledContainer can be fully customized using properties like width, height, color, and padding, allowing you to tailor the container to match your desired design. By leveraging StyledContainer in combination with other StyleComponents, you can create reusable and visually appealing UIs that enhance the overall user experience and development efficiency in your Flood application.

StyledContainer(
  child: StyledList.column(
    children: [
      StyledContainer.subtle(
        child: StyledText.body('Subtle'),
      ),
      StyledContainer(
        child: StyledText.body('Regular'),
      ),
      StyledContainer.strong(
        child: StyledText.body('Strong'),
      ),
    ],
  ),
),
StyledContainer.strong(
  // See how containers adapt to their surroundings automatically
  child: StyledList.column(
    children: [
      StyledContainer.subtle(
        child: StyledText.body('Subtle'),
      ),
      StyledContainer(
        child: StyledText.body('Regular'),
      ),
      StyledContainer.strong(
        child: StyledText.body('Strong'),
      ),
    ],
  ),
),
StyledContainer.strong(
  child: StyledText.body('You can press me!'),
  onPressed: () => print('Hello'),
  onLongPressed: () => print('Helllllo'),
  padding: EdgeInsets.all(8),
),
StyledContainer.strong(
  // Customize the size
  width: 50,
  height: 50,
),
StyledContainer(
  // Complete customization
  shape: CircleBorder(side: BorderSide(color: Colors.red)),
  color: Colors.orange,
  child: StyledText.xs('Circle'),
  padding: EdgeInsets.all(14),
),

Styled Container Demonstration

StyledList StyledCard