main_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: 'AppBar Button Height Demo',
    home: AppBarButtonHeightDemo(),
  ));
}

class AppBarButtonHeightDemo extends StatefulWidget {
  static const String name = 'app_bar_button_height_demo';

  const AppBarButtonHeightDemo({super.key});

  @override
  State<AppBarButtonHeightDemo> createState() => _AppBarButtonHeightDemoState();
}

class _AppBarButtonHeightDemoState extends State<AppBarButtonHeightDemo> {
  bool isFollowing = false;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar Button Height Demo'),
        actions: [
          // Button in AppBar with SizedBox height 32
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: SizedBox(
              height: 32, // This height is ignored by the AppBar
              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'),
                    ),
            ),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Problem: The button in the AppBar ignores the SizedBox height',
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 16),
            ),
            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'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}