Resizable
Cross-platform extension. Draggable split-pane layouts live on iPadOS in split-view, but iOS itself has no equivalent. The closest references are shadcn/ui and forui.dev. liqkit_ui ships this rendered in iOS 26 visual language (Liquid Glass surfaces, San Francisco type, iOS color palette) so it composes cleanly with the rest of the library, but the interaction model itself is web-native rather than iOS-canonical.
LiqResizable is the iOS 26 split-pane container — two children
separated by a draggable divider. Dragging the divider adjusts the
split ratio, clamped between minRatio and maxRatio. Useful for
IDE-style left-sidebar / main / right-inspector layouts.
The divider renders an idle 8% black band that animates to system blue on hover and during drag, with a small grip rectangle centered inside. On desktop the cursor switches to a column- or row-resize cursor when the pointer enters the divider.
Horizontal
import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget resizableHorizontalBuilder(BuildContext context) { return const SnippetFrame( surface: SnippetFrameSurface.themed, maxWidth: 480, height: 200, surfacePadding: EdgeInsets.all(12), child: ClipRRect( borderRadius: BorderRadius.all(Radius.circular(12)), child: LiqResizable( first: _ResizablePane(label: 'Left', emphasized: true), second: _ResizablePane(label: 'Right'), ), ), );}class _ResizablePane extends StatelessWidget { const _ResizablePane({required this.label, this.emphasized = false}); final String label; final bool emphasized; @override Widget build(BuildContext context) { final brightness = LiqTheme.maybeOf(context)?.brightness ?? Brightness.light; final isDark = brightness == Brightness.dark; return ColoredBox( color: isDark ? emphasized ? const Color(0xFF242428) : const Color(0xFF1C1C1E) : emphasized ? const Color(0xFFFAFAFA) : const Color(0xFFFFFFFF), child: Center(child: SnippetLabel(label, fontWeight: FontWeight.w500)), ); }}Vertical
import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/liqkit_ui.dart';/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget resizableVerticalBuilder(BuildContext context) { return const SnippetFrame( surface: SnippetFrameSurface.themed, maxWidth: 480, height: 320, surfacePadding: EdgeInsets.all(12), child: ClipRRect( borderRadius: BorderRadius.all(Radius.circular(12)), child: LiqResizable( direction: LiqResizableDirection.vertical, first: _ResizablePane(label: 'Top', emphasized: true), second: _ResizablePane(label: 'Bottom'), ), ), );}class _ResizablePane extends StatelessWidget { const _ResizablePane({required this.label, this.emphasized = false}); final String label; final bool emphasized; @override Widget build(BuildContext context) { final brightness = LiqTheme.maybeOf(context)?.brightness ?? Brightness.light; final isDark = brightness == Brightness.dark; return ColoredBox( color: isDark ? emphasized ? const Color(0xFF242428) : const Color(0xFF1C1C1E) : emphasized ? const Color(0xFFFAFAFA) : const Color(0xFFFFFFFF), child: Center(child: SnippetLabel(label, fontWeight: FontWeight.w500)), ); }}