How to prevent AppBar from clipping its children in Flutter?

Question

I want to display some content below an AppBar in a way that looks like it's part of the app bar itself. To achieve that I set the app bar's elevation to 0 and create a container below it with the content. This container then has a shadow to make it look like it's part of the app bar.

What I can't figure out is a way to make it so that the app bar doesn't clip the ink splash resulting from taps on buttons in the app bar, since it looks kinda off.

Example of the behavior on DartPad, and a screenshot below:

Code pasted from DartPad below:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.grey[100]!,
          elevation: 0,
          actions: [
            IconButton(
              icon: const Icon(Icons.settings_rounded, color: Colors.black),
              onPressed: () {},
            ),
          ],
        ),
        backgroundColor: Colors.grey[100]!,
        body: Column(
          children: [
            Container(
              height: 32,
              margin: const EdgeInsets.only(bottom: 3),
              decoration: BoxDecoration(
                color: Colors.grey[100]!,
                boxShadow: [BoxShadow(color: Colors.grey[600]!, blurRadius: 3)],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

You can set preferred size for appbar. Instead of adding container attaching to it.

 appBar:PreferredSize(
      preferredSize: Size.fromHeight(50.0), //  desired height for appbar
      child:  AppBar(
                 ..........
              ),
      ),

Answer 2

Either you can use PreferredSize or just try splashRadius property of IconButton

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: FAppBar(),
        backgroundColor: Colors.grey[100]!,
        body: Column(
          children: [
//             Container(
//               height: 32,
//               margin: const EdgeInsets.only(bottom: 3),
//               decoration: BoxDecoration(
//                 color: Colors.grey[100]!,
//                 boxShadow: [BoxShadow(color: Colors.grey[600]!, blurRadius: 3)],
//               ),
//             ),
          ],
        ),
      ),
    );
  }
}

class FAppBar extends StatelessWidget implements PreferredSizeWidget {

  @override
  Size get preferredSize => const Size.fromHeight(100);

  @override
  Widget build(BuildContext context) {
    return Material(elevation: 4,color: Colors.grey[100]!,
      child: Column(
        children: [
          AppBar(actions: [
            IconButton(splashRadius: 25,
                    icon: const Icon(Icons.settings_rounded, color: Colors.black),
                    onPressed: () {},
                  )
          ],elevation: 0, backgroundColor: Colors.grey[100]!,),
          const FlutterLogo()
        ],
      ),
    );
  }
}

Answer 3

Lets try with preferred size and as well as you can try with toolbarHeight: 25,

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(25.0), // here the desired height
            child: AppBar(
              backgroundColor: Colors.grey[100]!,
              elevation: 0,
              actions: [
                IconButton(
                  icon: const Icon(Icons.settings_rounded, color: Colors.black),
                  onPressed: () {},
                ),
              ],
            )),
        backgroundColor: Colors.grey[100]!,
        body: Column(
          children: [
            Container(
              height: 32,
              margin: const EdgeInsets.only(bottom: 3),
              decoration: BoxDecoration(
                color: Colors.grey[100]!,
                boxShadow: [BoxShadow(color: Colors.grey[600]!, blurRadius: 3)],
              ),
            ),
          ],
        ),
      ),
    );
  }
}