ConstrainedBox

A widget that imposes additional constraints on its child.

For example, if you wanted a child to have a minimum 50.0 logical pixels height, you could use const BoxConstraints(minHeight: 50.0) as the constraints.

Usage

Min Width 100, Min Height 100

50x50

Max Width 150

300x50 -> 150x50

<template>
  <Column :gap="20">
    <Text data="Min Width 100, Min Height 100" />
    <ConstrainedBox :constraints="BoxConstraints({ minWidth: 100, minHeight: 100 })">
      <Container color="red" :width="50" :height="50" alignment="center">
        <Text data="50x50" :style="{ color: 'white' }" />
      </Container>
    </ConstrainedBox>

    <Text data="Max Width 150" />
    <ConstrainedBox :constraints="BoxConstraints({ maxWidth: 150 })">
      <Container color="blue" :width="300" :height="50" alignment="center">
        <Text data="300x50 -> 150x50" :style="{ color: 'white' }" />
      </Container>
    </ConstrainedBox>
  </Column>
</template>

<script setup lang="ts">
import { ConstrainedBox, Container, BoxConstraints, Column, Text } from "fluekit";
</script>

In this example, although the Container requests 50x50, the ConstrainedBox forces it to be at least 100x100.

Props

Prop	Type	Default	Description
constraints	BoxConstraints	Required	The additional constraints to impose on the child.