Materials

LiqMaterialChip renders a live translucent material surface. It uses BackdropFilter to sample whatever sits behind it, then applies a single brightness-appropriate tint, hairline rim, and soft shadow. The examples below place real liqkit material over a continuous content backdrop so the glass effect is visible directly from the rendered widgets.

Five thickness presets (ultraThin → chrome) control overlay alpha and blur radius; the examples below use the default regular preset.

Light

import 'package:docs_snippets/src/materials_specimen.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 materialsLightBuilder(BuildContext context) {  return const SnippetFrame(    maxWidth: 780,    height: 500,    surface: SnippetFrameSurface.liquidLight,    surfacePadding: EdgeInsets.all(40),    child: MaterialsSpecimen(brightness: LiqMaterialBrightness.light),  );}

Dark

import 'package:docs_snippets/src/materials_specimen.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 materialsDarkBuilder(BuildContext context) {  return const SnippetFrame(    maxWidth: 780,    height: 500,    surface: SnippetFrameSurface.liquidDark,    surfacePadding: EdgeInsets.all(40),    child: MaterialsSpecimen(brightness: LiqMaterialBrightness.dark),  );}

All Styles

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

Custom Config

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

Vibrancy Off

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