Bottom Navigation

LiqBottomNavBar is the iOS 26 tab bar — an inset rounded Liquid Glass button group with 2 to 5 stacked icon + label tabs. The active tab is rendered in iOS system blue with a rounded selection fill; inactive tabs use the platform label tint for the current appearance. Pass onChanged: null to render the bar in a disabled, dimmed state.

Four Tabs

// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/demo.dart';import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/material.dart';import 'package:liqkit_ui/liqkit_ui.dart';​/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget bottomNavFourTabsBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 420,    height: 190,    surface: SnippetFrameSurface.liquidThemed,    surfacePadding: EdgeInsets.zero,    child: LiqDemo<int>(      initial: 0,      builder:          (i, set) =>          LiqBottomNavBar(            currentIndex: i,            onChanged: set,            items: const <LiqBottomNavItem>[              LiqBottomNavItem(icon: Icons.home_filled, label: 'Home'),              LiqBottomNavItem(icon: Icons.search, label: 'Search'),              LiqBottomNavItem(icon: Icons.notifications, label: 'Inbox'),              LiqBottomNavItem(icon: Icons.person_outline, label: 'Profile'),            ],          ),    ),  );}

Five Tabs

// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport 'package:docs_snippets/src/demo.dart';import 'package:docs_snippets/src/snippet_frame.dart';import 'package:flutter/material.dart';import 'package:liqkit_ui/liqkit_ui.dart';​/// Snippet builder consumed by `apps/docs_snippets/lib/src/routes.g.dart`.Widget bottomNavFiveTabsBuilder(BuildContext context) {  return SnippetFrame(    maxWidth: 420,    height: 190,    surface: SnippetFrameSurface.liquidThemed,    surfacePadding: EdgeInsets.zero,    child: LiqDemo<int>(      initial: 0,      builder:          (i, set) =>          LiqBottomNavBar(            currentIndex: i,            onChanged: set,            items: const <LiqBottomNavItem>[              LiqBottomNavItem(icon: Icons.home_filled, label: 'Home'),              LiqBottomNavItem(icon: Icons.search, label: 'Search'),              LiqBottomNavItem(icon: Icons.notifications, label: 'Inbox'),              LiqBottomNavItem(icon: Icons.person_outline, label: 'Profile'),              LiqBottomNavItem(icon: Icons.settings, label: 'Settings'),            ],          ),    ),  );}