Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

bug: `BottomAppBar` custom margins break `NotchShape` calculation due to coordinate offsets

Đang mở
#6,986 0 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@ndonkoHenri đang làm issue này rồi.

Từ ngày 28/10/2026.

  • #7024 của @ndonkoHenri — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
flutter, python
Lĩnh vực
frontend, mobile

Hướng nghiên cứu

Start by tracing the Python BottomAppBar and notch shape bindings into the Flutter handler that calculates the notch path; the issue names no source files or tests. Reproduce the supplied example and inspect how custom margins affect the guest rectangle and cutout coordinates. Done means the notch stays aligned with the floating action button when the bar has custom margins, with offset adjustment available through the bindings.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

bug
Duplicate Check
Describe the bug

When configuring a BottomAppBar with custom spatial styling (such as adjusting outer margins/paddings or wrapping its internal contents inside a padded container to make a modern "floating capsule" navigation bar), the underlying Flutter NotchShape engine fails to align the cutout coordinates properly.

Because Flet relies entirely on fixed enum declarations (ft.NotchShape.CIRCULAR_RECTANGLE) or rigid configuration wrappers (ft.AutomaticNotchShape), python developers have no mechanism to pass custom math offsets (such as adjusting dxOffset or dyOffset) or shifting guest coordinate bounds inside the shape path calculation. As a result, adding margins to the bar permanently misaligns or deletes the cutout relative to a docked FloatingActionButton's position.

Code sample
Code
import flet as ft


def main(page: ft.Page) -> None:
    page.title = "Notch Shape Example"

    page.bottom_appbar = ft.BottomAppBar(
        content=ft.Row(
            controls=[
                ft.IconButton(ft.Icons.HOME, icon_color="#006A6A", icon_size=32),
                ft.IconButton(
                    ft.Icons.ACCOUNT_BOX,
                    icon_color="#006A6A",
                    icon_size=32,
                ),
            ],
            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
        ),
        bgcolor=ft.Colors.WHITE,
        border_radius=42,
        shape=ft.CircularRectangleNotchShape(),
        # To make the bottom bar flay in the bottom of the screen
        margin=ft.Margin.only(left=40, right=40, bottom=28),
        padding=ft.Padding.only(left=14, right=14, top=10),
        height=70,
        # notch_margin=20
    )
    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.ADD,
        shape=ft.CircleBorder(),
        bgcolor="#006A6A",
        on_click=lambda _: print("Floating"),
        elevation=3,
    )
    page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED

    page.add(ft.SafeArea(content=ft.Column(controls=[ft.Container(expand=True)])))


if __name__ == "__main__":
    ft.run(main)
To reproduce
  1. Execute the provided Flet mini-example code sample.
Expected behavior

Developers should be able to cleanly handle notches on floating navigation elements. There should be a built-in mechanism inside Flet's NotchShape
or AutomaticNotchShape bindings to specify raw alignment translation offsets (e.g., properties like dx_offset and dy_offset), allowing the framework to execute a coordinate shift on the guest rect bounds (guest.shift(Offset(dx, dy))) before committing to the layout path generation.

Screenshots / Videos
Captures Image Image
Operating System

Linux

Operating system details

Ubuntu 24 and Android 16

Flet version

1.0.4

Regression

I'm not sure / I don't know

Suggestions

Expose offset adjustment arguments within Flet's notch configuration bindings. Under the hood in the Flutter engine wrapper, these values should translate to shifting the layout rect math properties before calculating the shape path:

// Suggestion for Flutter side handler logic:
final Rect adjustedGuest = guest.shift(Offset(dxOffset, dyOffset));
Logs
Logs
[Paste your logs here]
Additional details

No response

Ngôn ngữ chính
Python
Star
17.4k
Fork
737
Merge trung bình
1 ngày 13 giờ
Pull request đã merge (30 ngày)
62

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của flet-dev/flet

Tất cả issue của flet-dev/flet

Issue tương tự

Thêm issue về Python

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.