import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData.light(),
      scrollBehavior: const MaterialScrollBehavior().copyWith(
        overscroll: false,
      ),
      home: const HomePage(),
    ),
  );
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int selected = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        selectedIndex: selected,
        onDestinationSelected: (int index) {
          setState(() => selected = index);
        },
        destinations: <Widget>[
          const NavigationDestination(
            icon: Icon(Icons.home_outlined),
            selectedIcon: Icon(Icons.home),
            label: 'Home',
          ),
          const NavigationDestination(
            icon: Icon(Icons.image_outlined),
            selectedIcon: Icon(Icons.image),
            label: 'Image',
          ),
        ],
      ),
      body: PopScope(
        canPop: selected == 0,
        onPopInvokedWithResult: (bool didPop, _) {
          if (didPop) return;
          setState(() => selected = 0);
        },
        child: IndexedStack(
          index: selected,
          children: <Widget>[const HomeTab(), const ImagesTab()],
        ),
      ),
    );
  }
}

class HomeTab extends StatelessWidget {
  const HomeTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home tab')),
      body: ValueListenableBuilder<bool>(
        valueListenable: saturationNotifier,
        builder: (BuildContext context, bool enabled, _) => Center(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const Text(
                  'When you enable the saturation, the Android Emulator on Windows became very laggy.',
                ),
                const SizedBox(height: 16),
                SwitchListTile(
                  contentPadding: EdgeInsets.zero,
                  title: const Text('Enable the saturation'),
                  value: enabled,
                  onChanged: (bool value) => saturationNotifier.value = value,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

final ValueNotifier<bool> saturationNotifier = ValueNotifier<bool>(false);

class ImagesTab extends StatelessWidget {
  const ImagesTab({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home tab')),
      body: ValueListenableBuilder<bool>(
        valueListenable: saturationNotifier,
        builder: (BuildContext context, bool enabled, _) => ListView.separated(
          padding: const EdgeInsets.all(16),
          itemCount: 100,
          separatorBuilder: (BuildContext context, int index) =>
              const SizedBox(height: 16),
          itemBuilder: (BuildContext context, int index) =>
              ImageListTile(title: 'Image $index', enabled: enabled),
        ),
      ),
    );
  }
}

class ImageListTile extends StatelessWidget {
  const ImageListTile({required this.title, required this.enabled, super.key});

  final String title;
  final bool enabled;

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.hardEdge,
      margin: EdgeInsets.zero,
      child: Container(
        foregroundDecoration: enabled
            ? const BoxDecoration(
                color: Colors.grey,
                backgroundBlendMode: BlendMode.saturation,
              )
            : null,
        child: ListTile(
          onTap: () {},
          contentPadding: const EdgeInsets.only(right: 8),
          leading: SizedBox(
            height: double.maxFinite,
            width: 80,
            child: Image.network(
              'https://www.francebleu.fr/s3/cruiser-production-eu3/2025/05/a9b4cbd3-6f6a-4338-9e52-f68a934ea8c9/1200x680_sc_250515-fich-diff-lapin-belier-robert-reader-getty.jpg',
              fit: BoxFit.cover,
            ),
          ),
          title: Text(title),
          trailing: const Icon(Icons.add),
        ),
      ),
    );
  }
}