본문 바로가기
Development/Flutter

[FLUTTER] 플루터 첫걸음 부터 시작, 하단 네비게이션 바 (flutter bottomNavigationBar, bottom_btn)

by 망치치 2020. 9. 8.
반응형

 

2020.09.02 부터 flutter를 시작했습니다. 그전까지는 알고만 있었지 이렇게 열심히 찾아가면서 하게 될 줄은 몰랐습니다. 다음에도 만들 일이 생기면 만들 수 있도록 아카이빙 하기 위해서 이렇게 글을 남겨놉니다. 하단에 네이게이션 바를 응용해서 하나의 직사각형 형태의 예약하기 버튼을 만들었습니다. 색상 값은 원하시는대로 넣어두시면 됩니다.

home: Scaffold(), 안에 body 다음에 선언해서 사용하니 오류 없이 잘 돌아가는 것을 확인 할 수 있습니다-! 비쥬얼 스튜디오로 코드 작성 했습니다. 다른 방법으로 하단에 버튼을 배치할 수 있는 법을 아시는 분은 덧글 부탁드립니다. 오늘도 좋은 하루 되시고, 제가 작성한 코드들이 다른 분들에게도 도움이 되면 좋겠어요!

 

 bottomNavigationBar: BottomAppBar(

          color: Color(0xFF1B75BB),

          child: Align(

            heightFactor: 2.2,

            alignment: Alignment.center,

            child: Text(

              '예약하기',

              style: TextStyle(

                fontWeight: FontWeight.bold,

                color: Colors.white,

                fontSize: 25.0,

              ),

            ),

          ),

        ),

 

 

*Align 속성을 사용하여, 버튼 안에 있는 글자가 상하좌우 여백을 두고 가운데로 정렬되는 것을 확인하실 수 있습니다.