Containers
Drawer
LiqDrawer is the iOS 26 side-anchored panel surface. It slides in
from the left or right screen edge over a dimmed scrim and is typically
used for navigation or secondary content.
The widget itself renders a static drawer surface — useful for static
demos and tests. For programmatic presentation with the slide-in
animation, dimmed scrim, and dismiss-on-scrim-tap or Escape key, use
LiqDrawerOverlay.show().
Left
// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport '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 drawerLeftBuilder(BuildContext context) { return const SnippetFrame( maxWidth: 620, height: 260, surface: SnippetFrameSurface.liquidThemed, surfacePadding: EdgeInsets.zero, surfaceScrimOpacity: 0.4, child: Stack( children: <Widget>[ Positioned.fill( left: 240, child: DecoratedBox( decoration: BoxDecoration(color: Color(0x3300A887)), child: Center( child: Icon(Icons.mail_outline, color: Color(0x66FFFFFF)), ), ), ), Align( alignment: Alignment.centerLeft, child: LiqDrawer( width: 240, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( 'Navigation', style: TextStyle(fontWeight: FontWeight.w600), ), SizedBox(height: 16), Text('Inbox'), SizedBox(height: 10), Text('Sent'), SizedBox(height: 10), Text('Drafts'), ], ), ), ), ], ), );}Right
// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport '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 drawerRightBuilder(BuildContext context) { return const SnippetFrame( maxWidth: 620, height: 260, surface: SnippetFrameSurface.liquidThemed, surfacePadding: EdgeInsets.zero, surfaceScrimOpacity: 0.4, child: Stack( children: <Widget>[ Positioned.fill( right: 240, child: DecoratedBox( decoration: BoxDecoration(color: Color(0x332C7DFF)), child: Center(child: Icon(Icons.tune, color: Color(0x66FFFFFF))), ), ), Align( alignment: Alignment.centerRight, child: LiqDrawer( side: LiqDrawerSide.right, width: 240, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text('Filters', style: TextStyle(fontWeight: FontWeight.w600)), SizedBox(height: 16), Text('Unread'), SizedBox(height: 10), Text('Starred'), SizedBox(height: 10), Text('Archived'), ], ), ), ), ], ), );}Collapsed
// ignore_for_file: file_names // hyphenated name required by snippet manifest conventionimport '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 drawerCollapsedBuilder(BuildContext context) { return const SnippetFrame( maxWidth: 620, height: 260, surface: SnippetFrameSurface.liquidThemed, surfacePadding: EdgeInsets.zero, surfaceScrimOpacity: 0.32, child: Stack( children: <Widget>[ Positioned.fill( left: 72, child: DecoratedBox( decoration: BoxDecoration(color: Color(0x332C7DFF)), child: Center( child: Text( 'Content', style: TextStyle( color: Color(0x99FFFFFF), fontWeight: FontWeight.w600, ), ), ), ), ), Align( alignment: Alignment.centerLeft, child: LiqDrawer( collapsed: true, collapsedWidth: 72, padding: EdgeInsets.symmetric(vertical: 16, horizontal: 12), child: Column( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ Icon(Icons.inbox, size: 22), SizedBox(height: 18), Icon(Icons.send_outlined, size: 22), SizedBox(height: 18), Icon(Icons.drafts_outlined, size: 22), ], ), ), ), ], ), );}