Color Pickers

liqkit_ui ships a composed LiqColorPicker with an iOS-style popover palette, plus the lower-level LiqColorPickerButton and LiqColorGrid building blocks for custom colour tools.

Large

import 'package:docs_snippets/src/demo.dart';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 colorPickerLargeBuilder(BuildContext context) {  return const _ColorPickerLargeDemo();}​class _ColorPickerLargeDemo extends StatefulWidget {  const _ColorPickerLargeDemo();​  @override  State<_ColorPickerLargeDemo> createState() => _ColorPickerLargeDemoState();}​class _ColorPickerLargeDemoState extends State<_ColorPickerLargeDemo> {  bool _open = false;​  @override  Widget build(BuildContext context) {    return SnippetFrame(      maxWidth: 430,      height: _open ? 820 : 64,      child: Align(        alignment: Alignment.topCenter,        child: Transform.scale(          scale: _open ? 0.82 : 1,          alignment: Alignment.topCenter,          child: LiqDemo<Color>(            initial: const Color(0xFFAF52DE),            builder:                (color, set) =>                LiqColorPicker(                  color: color,                  onChanged: set,                  onOpenChanged: (open) => setState(() => _open = open),                ),          ),        ),      ),    );  }}

Small

import 'package:docs_snippets/src/demo.dart';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 colorPickerSmallBuilder(BuildContext context) {  return const _ColorPickerSmallDemo();}​class _ColorPickerSmallDemo extends StatefulWidget {  const _ColorPickerSmallDemo();​  @override  State<_ColorPickerSmallDemo> createState() => _ColorPickerSmallDemoState();}​class _ColorPickerSmallDemoState extends State<_ColorPickerSmallDemo> {  bool _open = false;​  @override  Widget build(BuildContext context) {    return SnippetFrame(      maxWidth: 430,      height: _open ? 820 : 64,      child: Align(        alignment: Alignment.topCenter,        child: Transform.scale(          scale: _open ? 0.82 : 1,          alignment: Alignment.topCenter,          child: LiqDemo<Color>(            initial: const Color(0xFF34C759),            builder:                (color, set) =>                LiqColorPicker(                  color: color,                  buttonSize: LiqColorPickerButtonSize.small,                  onChanged: set,                  onOpenChanged: (open) => setState(() => _open = open),                ),          ),        ),      ),    );  }}

Grid

import 'package:docs_snippets/src/demo.dart';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 colorPickerGridBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 360,    child: Padding(      padding: const EdgeInsets.all(16),      child: LiqDemo<int>(        initial: 7,        builder:            (selected, set) =>            LiqColorGrid(              colors: liqNativeColorGridColors,              selectedIndex: selected,              onSelected: set,            ),      ),    ),  );}

Chip Buttons

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​Widget colorPickerChipButtonsBuilder(BuildContext context) {  return const SnippetFrame(child: ColorPickerChipButtonsExample());}

Native Button

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​Widget colorPickerNativeButtonBuilder(BuildContext context) {  return const SnippetFrame(child: ColorPickerNativeButtonExample());}

Inline

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​Widget colorPickerInlineBuilder(BuildContext context) {  return const SnippetFrame(child: ColorPickerInlineExample());}

Modal

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​Widget colorPickerModalBuilder(BuildContext context) {  return const SnippetFrame(child: ColorPickerModalExample());}

Selected

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​Widget colorPickerSelectedBuilder(BuildContext context) {  return const SnippetFrame(child: ColorPickerSelectedExample());}

Presets

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​Widget colorPickerPresetsBuilder(BuildContext context) {  return const SnippetFrame(child: ColorPickerPresetsExample());}