Scroll Area

LiqScrollArea is the iOS 26 themed-scrollbar wrapper — a SingleChildScrollView whose default platform scrollbar is replaced with a 4pt-thick hairline pill that appears while scrolling and fades after 600ms of inactivity. Use it whenever the default OS scrollbar would feel intrusive — typically desktop scroll regions inside cards, sidebars, or modal content.

The thumb idles at 40% black and deepens to 80% black on hover or drag. The track is invisible — no rail is painted. Consumers can provide an external ScrollController to drive scrolling; otherwise an internal one is created and disposed alongside the widget. Inner padding is applied to the viewport so the scrollbar paints over the gutter.

Vertical

// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport '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 scrollAreaVerticalBuilder(BuildContext context) {  return SnippetFrame(    height: 200,    child: LiqScrollArea(      padding: const EdgeInsets.symmetric(horizontal: 16),      child: Column(        children: List<Widget>.generate(          24,          (i) => Padding(            padding: const EdgeInsets.symmetric(vertical: 6),            child: SnippetLabel('Row ${i + 1}', fontSize: 14),          ),        ),      ),    ),  );}

Horizontal

// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport '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 scrollAreaHorizontalBuilder(BuildContext context) {  return SnippetFrame(    height: 80,    child: LiqScrollArea(      axis: Axis.horizontal,      padding: const EdgeInsets.symmetric(vertical: 16),      child: Row(        children: List<Widget>.generate(          24,          (i) => Padding(            padding: const EdgeInsets.symmetric(horizontal: 8),            child: SnippetLabel('Item ${i + 1}', fontSize: 14),          ),        ),      ),    ),  );}