Flutter에서 노치가 있는 하단 내비게이션 바 만드는 방법

이 가이드는 하단 네비게이션 앱 바에 노치가 있는 플로팅 액션 버튼을 추가하는 방법을 보여줍니다. 하단 바의 노치가 있는 플로팅 액션 버튼은 앱의 사용자 인터페이스를 더욱 미려하게 만들어줍니다. 더 자세한 정보는 아래 코드를 참조해주세요:

시작해 봅시다

플로팅 액션 버튼이 있는 BottomAppBar는 아래 코드를 사용하여 앱에 추가할 수 있습니다.

Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: BottomAppBar(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        height: 60,
        color: Colors.cyan.shade400,
        notchMargin: 5,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.search,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.print,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.people,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );

아래는 코드의 출력이고 실행하면 앱에 사용 가능한 FloatingActionButton이 있는 BottomAppBar가 표시됩니다.

시작하려면, Scaffold 위젯의 floatingActionButtonLocation 속성을 사용하여 FloatingActionButton 버튼의 위치를 조정하세요. 아래에 표시된 centerDocked를 사용하여 중앙에 위치하도록 설정할 것입니다:

아래와 같이 BottomAppBar에 모양을 적용하세요.

shape: const CircularNotchedRectangle()

extendBody: true을 지정하면 스캐폴드의 본문이 하단 네비게이션 바의 노치를 통해 보이게 됩니다.

 extendBody: true,

그게 다에요. 🎉🎉

풀 코드:

 return Scaffold(
      extendBody: true,
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        padding: const EdgeInsets.symmetric(horizontal: 10),
        height: 60,
        color: Colors.cyan.shade400,
        shape: const CircularNotchedRectangle(),
        notchMargin: 5,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: const Icon(
                Icons.menu,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.search,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.print,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: const Icon(
                Icons.people,
                color: Colors.black,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );

감사합니다! :)