liqkit_ui
Navigation

Popup Buttons

The popup-button family covers three patterns: a value-selecting popup (LiqDropdownButton), an action-only pull-down (LiqPullDownButton), and a split button with a primary action plus a chevron menu (LiqSplitButton). Every variant below is the same widget the showcase app uses — sourced from package:liqkit_ui/examples.dart.

Regular

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 popupButtonRegularBuilder(BuildContext context) {  return SnippetFrame(    child: LiqDemo<int>(      initial: 0,      builder: (v, set) {        return Column(          mainAxisSize: MainAxisSize.min,          children: <Widget>[            LiqPopupButton(label: 'Today', onPressed: () => set(v + 1)),            if (v > 0)              Padding(                padding: const EdgeInsets.only(top: 8),                child: SnippetLabel(                  'Tapped $v time${v == 1 ? '' : 's'}',                  fontSize: 13,                ),              ),          ],        );      },    ),  );}

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 popupButtonLargeBuilder(BuildContext context) {  return SnippetFrame(    child: LiqDemo<int>(      initial: 0,      builder: (v, set) {        return Column(          mainAxisSize: MainAxisSize.min,          children: <Widget>[            LiqPopupButton(label: 'This Week', onPressed: () => set(v + 1)),            if (v > 0)              Padding(                padding: const EdgeInsets.only(top: 8),                child: SnippetLabel(                  'Tapped $v time${v == 1 ? '' : 's'}',                  fontSize: 13,                ),              ),          ],        );      },    ),  );}
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPopupStylesBuilder(BuildContext context) {  return const SnippetFrame(child: PopupButtonStylesExample());}
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPopupSizesBuilder(BuildContext context) {  return const SnippetFrame(child: PopupButtonSizesExample());}
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPopupFullWidthBuilder(BuildContext context) {  return const SnippetFrame(maxWidth: 360, child: PopupButtonFullWidthExample());}
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPopupWithIconsBuilder(BuildContext context) {  return const SnippetFrame(child: PopupButtonWithItemIconsExample());}
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPopupWithoutIconsBuilder(BuildContext context) {  return const SnippetFrame(child: PopupButtonWithoutItemIconsExample());}
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPopupDisabledBuilder(BuildContext context) {  return const SnippetFrame(child: PopupButtonDisabledExample());}
// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPopupPreSelectedBuilder(BuildContext context) {  return const SnippetFrame(child: PopupButtonPreSelectedExample());}

Pulldown Styles

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPulldownStylesBuilder(BuildContext context) {  return const SnippetFrame(child: PullDownButtonStylesExample());}

Pulldown Sizes

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPulldownSizesBuilder(BuildContext context) {  return const SnippetFrame(child: PullDownButtonSizesExample());}

Pulldown With Leading

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPulldownWithLeadingBuilder(BuildContext context) {  return const SnippetFrame(child: PullDownButtonWithLeadingIconExample());}

Pulldown Without Icon

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPulldownWithoutIconBuilder(BuildContext context) {  return const SnippetFrame(child: PullDownButtonWithoutIconExample());}

Pulldown Full Width

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPulldownFullWidthBuilder(BuildContext context) {  return const SnippetFrame(maxWidth: 360, child: PullDownButtonFullWidthExample());}

Pulldown Disabled

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonPulldownDisabledBuilder(BuildContext context) {  return const SnippetFrame(child: PullDownButtonDisabledExample());}

Split Styles

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonSplitStylesBuilder(BuildContext context) {  return const SnippetFrame(child: SplitButtonStylesExample());}

Split Sizes

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonSplitSizesBuilder(BuildContext context) {  return const SnippetFrame(child: SplitButtonSizesExample());}

Split With Leading

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonSplitWithLeadingBuilder(BuildContext context) {  return const SnippetFrame(child: SplitButtonWithLeadingIconExample());}

Split Without Leading

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonSplitWithoutLeadingBuilder(BuildContext context) {  return const SnippetFrame(child: SplitButtonWithoutLeadingIconExample());}

Split Disabled Primary

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonSplitDisabledPrimaryBuilder(BuildContext context) {  return const SnippetFrame(child: SplitButtonDisabledPrimaryExample());}

Common Use Cases

// ignore_for_file: file_namesimport 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/widgets.dart';import 'package:liqkit_ui/examples.dart';​/// Mirrors a `_Section` from `apps/showcase_app/lib/screens/demos/popup_button_demo_screen_v2.dart`,/// sourced via `package:liqkit_ui/examples.dart`.Widget popupButtonCommonUseCasesBuilder(BuildContext context) {  return const SnippetFrame(child: PopupButtonCommonUseCasesExample());}

Lists

iOS 26 grouped list rows — light and dark surface variants.

Status Bars

iOS 26 status bar with clock, signal, Wi-Fi, and battery — light and dark variants.

On this page

RegularLargePopup StylesPopup SizesPopup Full WidthPopup With IconsPopup Without IconsPopup DisabledPopup Pre SelectedPulldown StylesPulldown SizesPulldown With LeadingPulldown Without IconPulldown Full WidthPulldown DisabledSplit StylesSplit SizesSplit With LeadingSplit Without LeadingSplit Disabled PrimaryCommon Use Cases