如何在 Flutter 应用栏中出现溢出的徽标？

Question

徽标应稍微向底部偏移，并位于主体和正常应用栏之间。

不知何故，无论我尝试使用 Overflowboxes 或类似的结构，徽标都会以一种或另一种方式被剪切。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize:
            Size.fromHeight(100), // Set a fixed height for the AppBar
        child: AppBar(
          title: Text(
            'My App',
            style: Theme.of(context).textTheme.headlineLarge,
          ),
          backgroundColor: Colors
              .transparent, // Optional: Makes the AppBar background transparent
          elevation: 0, // Optional: Removes shadow from the AppBar
        ),
      ),
      body: Stack(
        children: [
          ListView.builder(
            itemCount: DUMMY_MEALS.length,
            itemBuilder: (ctx, index) {
              final mealData = DUMMY_MEALS[index];
              return Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                child: MealItemInOverview(
                    mealData.id,
                    mealData.title,
                    mealData.preparation_time,
                    mealData.ingredients,
                    mealData.steps),
              );
            },
          ),
          Positioned(
            top:
                -60, // Adjust this value to move the CircleAvatar up or down, making sure it's not cut off
            right:
                20, // Adjust this value to set the horizontal position of the CircleAvatar
            child: CircleAvatar(
              radius:
                  50, // Adjust this value to set the size of the CircleAvatar
              backgroundImage: AssetImage('assets/images/images.png'),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

您可以尝试在堆栈上添加

clipBehavior

。

Stack(
  clipBehavior: Clip.none, //this is hardEdge by default
)