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)],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The problem is happening because instead of increasing the appbar you put a column to simulate a larger app bar. You can see this if you change the app bar color. Just increase the app bar. https://stackoverflow.com/questions/51089994/flutter-setting-the-height-of-the-appbar — Claudio Castro, Sep 15 '21 at 04:36
@bruno have a look at this link https://dartpad.dev/?id=f122d44e4e2c0486c44e29f42720d203&null_safety=true — Jahidul Islam, Sep 15 '21 at 05:22
@JahidulIslam I can't see your changes, I think if you make changes to the DartPad I shared only you can see them — sleighty, Sep 18 '21 at 02:50
@ClaudioCastro I understand what's happening, I'm asking if there's a way to prevent the clipping, though. (I know I can work around it by making the AppBar larger, but that's not what I'm trying to solve here.) — sleighty, Sep 18 '21 at 02:51
To clarify, I know it's possible because I've seen it done in other apps. I just want to know if it's possible with the default AppBar or if they implemented a custom solution — sleighty, Sep 18 '21 at 02:52

score 1 · Answer 1 · answered Sep 15 '21 at 04:41

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)],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

score 0 · Answer 2 · answered Sep 15 '21 at 04:48

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()
        ],
      ),
    );
  }
}

score 0 · Answer 3 · edited Sep 26 '21 at 08:53

0

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(
                 ..........
              ),
      ),

edited Sep 26 '21 at 08:53

marc_s

732,580
175
1,330
1,459

answered Sep 15 '21 at 05:59

Ananda Krishnan

61
5

How to prevent AppBar from clipping its children in Flutter?

3 Answers3