main_sliver_app_bar_button_height_demo.dart

import 'package:flutter/material.dart';

/// Main entry point to run this demo independently
void main() {
  runApp(const MaterialApp(
    title: 'SliverAppBar Button Height Demo',
    home: SliverAppBarButtonHeightDemo(),
  ));
}

class SliverAppBarButtonHeightDemo extends StatefulWidget {
  static const String name = 'sliver_app_bar_button_height_demo';

  const SliverAppBarButtonHeightDemo({super.key});

  @override
  State<SliverAppBarButtonHeightDemo> createState() =>
      _SliverAppBarButtonHeightDemoState();
}

class _SliverAppBarButtonHeightDemoState
    extends State<SliverAppBarButtonHeightDemo> {
  bool isFollowing = false;

  void _toggleFollowing() {
    setState(() {
      isFollowing = !isFollowing;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            title: const Text('SliverAppBar Button Height Demo'),
            floating: true,
            pinned: true,
            actions: [
              // Button in SliverAppBar with SizedBox height 32
              Padding(
                padding: const EdgeInsets.only(right: 16),
                child: SizedBox(
                  height: 32, // This height is ignored by the SliverAppBar
                  child: isFollowing
                      ? OutlinedButton(
                          onPressed: _toggleFollowing,
                          style: OutlinedButton.styleFrom(
                            foregroundColor: Colors.purple,
                            side: BorderSide(color: Colors.purple),
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                          ),
                          child: const Text('Following'),
                        )
                      : ElevatedButton(
                          onPressed: _toggleFollowing,
                          style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.purple,
                            foregroundColor: Colors.white,
                            padding: const EdgeInsets.symmetric(horizontal: 10),
                          ),
                          child: const Text('Follow'),
                        ),
                ),
              ),
            ],
          ),
          SliverToBoxAdapter(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text(
                      'Problem: The button in the SliverAppBar ignores the SizedBox height',
                      textAlign: TextAlign.center,
                      style:
                          TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 24),
                    const Text(
                      'This happens because AppBar and SliverAppBar force their children to expand to match the toolbar height (typically 56dp).',
                      textAlign: TextAlign.center,
                    ),
                    const SizedBox(height: 24),
                    const Text(
                      'Solution: Wrap the SizedBox with IntrinsicHeight and Align',
                      textAlign: TextAlign.center,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 16),
                    Container(
                      padding: const EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade100,
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: Colors.grey.shade300),
                      ),
                      child: const Text(
                        'IntrinsicHeight(\n'
                        '  child: Align(\n'
                        '    alignment: Alignment.center,\n'
                        '    child: SizedBox(\n'
                        '      height: 32,\n'
                        '      child: YourButton(...),\n'
                        '    ),\n'
                        '  ),\n'
                        ')',
                        style: TextStyle(
                          fontFamily: 'monospace',
                          fontSize: 14,
                        ),
                      ),
                    ),
                    const SizedBox(height: 24),
                    // Show the correct height button for comparison
                    const Text(
                        'This is what a 32-height button should look like:'),
                    const SizedBox(height: 16),
                    SizedBox(
                      height: 32,
                      child: ElevatedButton(
                        onPressed: () {},
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Colors.purple,
                          foregroundColor: Colors.white,
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                        ),
                        child: const Text('Correct Height Button'),
                      ),
                    ),
                    const SizedBox(height: 24),
                    // Additional content to make the page scrollable
                    const Text(
                      'Try scrolling down to see how the SliverAppBar behaves',
                      style: TextStyle(fontSize: 16),
                    ),
                    Container(
                      height: 200,
                      margin: const EdgeInsets.symmetric(vertical: 24),
                      decoration: BoxDecoration(
                        color: Colors.purple.withOpacity(0.1),
                        borderRadius: BorderRadius.circular(8),
                      ),
                      alignment: Alignment.center,
                      child: const Text('Scrollable content area',
                          style: TextStyle(color: Colors.purple)),
                    ),
                    // Show example of fixed button
                    const Text(
                      'Here\'s how you would fix the button in the SliverAppBar:',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 16),
                    Container(
                      padding: const EdgeInsets.all(16),
                      decoration: BoxDecoration(
                        color: Colors.grey.shade100,
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: Colors.grey.shade300),
                      ),
                      child: const Text(
                        'Padding(\n'
                        '  padding: EdgeInsets.only(right: 16),\n'
                        '  child: IntrinsicHeight(\n'
                        '    child: Align(\n'
                        '      alignment: Alignment.center,\n'
                        '      child: SizedBox(\n'
                        '        height: 32,\n'
                        '        child: ElevatedButton(...),\n'
                        '      ),\n'
                        '    ),\n'
                        '  ),\n'
                        ')',
                        style: TextStyle(
                          fontFamily: 'monospace',
                          fontSize: 14,
                        ),
                      ),
                    ),
                    // Additional spacer
                    const SizedBox(height: 100),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}