Top / Right / Bottom / Left

Use inset utilities like top-0, -left-4, and inset-s-0 to offset absolutely-positioned children from the edges of their relative parent. Logical-direction utilities (inset-s-*, inset-e-*) resolve against the ambient Flutter Directionality. Percentage forms (1/2, full) resolve against the parent Stack’s constraints.

Basic example

Style('relative ...', child: Style('absolute top-0 left-0 size-16 ...', child: Text('01')))
Style('relative ...', child: Style('absolute inset-x-0 top-0 h-16 ...', child: Text('02')))
Style('relative ...', child: Style('absolute top-0 right-0 size-16 ...', child: Text('03')))
Style('relative ...', child: Style('absolute inset-y-0 left-0 w-16 ...', child: Text('04')))
Style('relative ...', child: Style('absolute inset-0 ...', child: Text('05')))
Style('relative ...', child: Style('absolute inset-y-0 right-0 w-16 ...', child: Text('06')))
Style('relative ...', child: Style('absolute bottom-0 left-0 size-16 ...', child: Text('07')))
Style('relative ...', child: Style('absolute inset-x-0 bottom-0 h-16 ...', child: Text('08')))
Style('relative ...', child: Style('absolute right-0 bottom-0 size-16 ...', child: Text('09')))

Using negative values

Style('relative ...', child: Style('absolute -top-4 -left-4 ...'))

Using logical properties

class InsetLogicalExample extends StatelessWidget {
  const InsetLogicalExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Style(
      'grid grid-cols-2 place-items-center gap-x-4',
      children: [
        Style(
          'flex flex-col items-start gap-y-4',
          children: [
            const Style('text-sm font-medium', child: Text('Left-to-right')),
            Directionality(
              textDirection: TextDirection.ltr,
              child: Style(
                'relative size-18 rounded-lg sm:size-32',
                children: [
                  Style(
                    'absolute inset-0',
                    child: Stripes('h-full rounded-lg', border: true),
                  ),
                  const Style(
                    'absolute top-0 left-0 flex size-14 items-center'
                    ' justify-center rounded-lg bg-purple-500 p-4',
                    child: SizedBox.shrink(),
                  ),
                ],
              ),
            ),
          ],
        ),
        Style(
          'flex flex-col items-end gap-y-4',
          children: [
            const Style('text-sm font-medium', child: Text('Right-to-left')),
            Directionality(
              textDirection: TextDirection.rtl,
              child: Style(
                'relative size-18 rounded-lg sm:size-32',
                children: [
                  Style(
                    'absolute inset-0',
                    child: Stripes('h-full rounded-lg', border: true),
                  ),
                  const Style(
                    'absolute top-0 right-0 flex size-14 items-center'
                    ' justify-center rounded-lg bg-purple-500 p-4',
                    child: SizedBox.shrink(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class InsetLogicalPage extends StatelessWidget {
  const InsetLogicalPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: const InsetLogicalExample());
  }
}

Class reference

Family	Flutter	Notes
inset-*	all 4 sides	top + right + bottom + left
inset-x-*	horizontal	left + right
inset-y-*	vertical	top + bottom
inset-s-*	logical start	LTR → left, RTL → right
inset-e-*	logical end	LTR → right, RTL → left
inset-bs-*	block start	alias to top (horizontal writing mode only)
inset-be-*	block end	alias to bottom (horizontal writing mode only)
top-* right-* bottom-* left-*	per-side	direct
<class>-<num>	spacing scale	top-4 → 16 px
-<class>	negative	-top-4 → -16 px; Stack uses Clip.none, overflow visible
<class>-<n>/<m>	fraction of parent	top-1/2 → 50% of parent height
<class>-full	100%	resolved against parent size
<class>-auto	unconstrained	same effect as omitting the class; useful to override earlier utility
<class>-px	1 px
<class>-[<N>]	arbitrary pixels	numeric only, no CSS units

Unsupported

• Non-horizontal writing modes — inset-bs / inset-be alias to top / bottom; Flutter has no vertical writing mode.

The CSS custom property form (top-(--foo)) is resolved against theme-defined StyleThemeData.customProperties — e.g. top-(--foo) behaves like top-[20px] when the theme defines --foo: '20px'. Cascade-inherited or JS-set CSS variables remain out of scope.