如何实现底部带圆角的AppBar？已尝试CustomPainter但觉不妥

Hey there! I totally get why you’d want to skip CustomPainter for this—it’s way overkill for a simple rounded bottom edge. Here are a couple of clean, straightforward approaches to achieve that rounded-bottom AppBar without diving into custom painting:

Method 1: Container with Border Radius (Best for Shadow Support) #

This method uses a Container to handle the rounded background, while keeping all the AppBar’s built-in functionality intact. It’s the go-to if you want to retain or customize the AppBar’s shadow:

PreferredSize(
  preferredSize: Size.fromHeight(kToolbarHeight), // Matches the default AppBar height
  child: Container(
    decoration: BoxDecoration(
      borderRadius: const BorderRadius.only(
        bottomLeft: Radius.circular(20.0),
        bottomRight: Radius.circular(20.0),
      ),
      color: Theme.of(context).primaryColor,
      // Optional: Add a custom shadow instead of relying on AppBar's elevation
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.5),
          spreadRadius: 2,
          blurRadius: 5,
          offset: const Offset(0, 3), // Controls shadow position
        ),
      ],
    ),
    child: AppBar(
      backgroundColor: Colors.transparent, // Critical: Makes AppBar see-through
      elevation: 0, // Removes default shadow to avoid overlapping the Container's shadow
      title: const Text('Rounded Bottom AppBar'),
      // Add your leading icon, actions, or other AppBar features here
    ),
  ),
)

Why this works: #

• The Container takes full responsibility for the rounded background and any shadow effects.
• By setting the AppBar to transparent and disabling its elevation, we let the Container’s rounded edges show through completely.

Method 2: ClipRRect (Simplest Approach) #

If you don’t need a custom shadow and just want to clip the AppBar’s bottom corners, ClipRRect is the fastest, most minimal solution:

PreferredSize(
  preferredSize: Size.fromHeight(kToolbarHeight),
  child: ClipRRect(
    borderRadius: const BorderRadius.only(
      bottomLeft: Radius.circular(20.0),
      bottomRight: Radius.circular(20.0),
    ),
    child: AppBar(
      title: const Text('Rounded Bottom AppBar'),
      // Add your AppBar configuration here (leading, actions, etc.)
    ),
  ),
)

Heads up: #

• If you keep the AppBar’s default elevation, the shadow will be clipped along with the corners. If you need the shadow to extend beyond the rounded edges, stick with Method 1.

Quick Pro Tips #

• Tweak the circular value (e.g., change 20.0 to 15.0 or 30.0) to adjust how rounded the corners are.
• For responsive design, replace the fixed radius with a percentage of the screen width, like MediaQuery.of(context).size.width * 0.05, so the corners scale nicely across different devices.

内容的提问来源于stack exchange，提问作者Mike Bellika