liquid_segmented_bar 0.2.0

An iOS "liquid glass" style segmented control for Flutter: a frosted glass capsule with an animated glass bubble that slides to the selected segment.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:liquid_segmented_bar/liquid_segmented_bar.dart';

void main() => runApp(const ExampleApp());

enum Category { all, home, work, music, travel }

const _segments = [
  LiquidSegment(value: Category.all, label: 'All', icon: Icons.apps),
  LiquidSegment(value: Category.home, label: 'Home', icon: Icons.home),
  LiquidSegment(value: Category.work, label: 'Work', icon: Icons.work),
  LiquidSegment(
    value: Category.music,
    label: 'Music',
    icon: Icons.music_note,
  ),
  LiquidSegment(value: Category.travel, label: 'Travel', icon: Icons.flight),
];

class ExampleApp extends StatefulWidget {
  const ExampleApp({super.key});

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  Category _selected = Category.all;

  Widget _bar(LiquidLabelBehavior behavior, {double iconSize = 20}) {
    return LiquidSegmentedBar<Category>(
      selected: _selected,
      onChanged: (g) => setState(() => _selected = g),
      labelBehavior: behavior,
      iconSize: iconSize,
      segments: _segments,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF7CF28F),
          brightness: Brightness.dark,
          primary: const Color(0xFF7CF28F),
        ),
      ),
      home: Scaffold(
        backgroundColor: const Color(0xFF0B0F0C),
        body: SafeArea(
          child: ListView(
            padding: const EdgeInsets.all(16),
            children: [
              const Text('always'),
              const SizedBox(height: 8),
              _bar(LiquidLabelBehavior.always),
              const SizedBox(height: 24),
              const Text('selectedOnly'),
              const SizedBox(height: 8),
              _bar(LiquidLabelBehavior.selectedOnly),
              const SizedBox(height: 24),
              const Text('never (iconSize: 26)'),
              const SizedBox(height: 8),
              _bar(LiquidLabelBehavior.never, iconSize: 26),
            ],
          ),
        ),
      ),
    );
  }
}