Flutter20 [Flutter] 8. BottomNavigationBar(하단 내비게이션 바) 지난 포스트에서 서랍 메뉴를 이용한 내비게이션을 해보았습니다. 서랍 이외에 내비게이션을 활용할 수 있는 위젯 중 하나는 하단바(BottomNavigationBar) 입니다. 이번 포스트에서는 다음 내용을 다루고 있습니다. BottomNavigationBar 란 스캐폴드에 BottomNavigationBar 추가 NamedRoute, Route 설정하기 BottomNavigationBar 란 BottomNavigationBar는 화면 하단에 표시되는 위젯입니다. 서랍(Drawer)은 여러개의 항목을 사용 수 있지만 BottomNavigationBar는 2~3개 정도의 항목을 사용하는게 일반적인듯 합니다. BottomNavigationBar는 Scaffold내에서 사용이 가능하고, 스캐폴드 내의 bottom.. 2022. 2. 20. [Flutter] 7. 내비게이션(Navigation) 서랍 메뉴에서 내비게이션 기능을 추가해 보도록 하겠습니다. 이번 포스트에서는 다음 내용을 다루고 있습니다. 화면 추가하기 내비게이션 스택 이해하기 내비게이션 코드 추가 화면 추가하기 한 경로에서 다른 경로로 이동하기 위해서 최소한 앱에 두 화면이 존재 해야 하므로 화면 하나를 더 추가하겠습니다. bmi_screen.dart파일을 추가하였고 아래와 같이 코딩해 주었습니다. BmiScreen클래스를 stateless위젯으로 만들었고, 지금은 화면을 완성시키지 않고 Scaffold를 반환하도록 만들어 주겠습니다. Scaffold에는 title로 Text위젯을 가지는 appBar와, body에는 Center에 Text위젯을 설정해 두었습니다. 앱에 내비게이션 기능을 추가하기 전까지는 아직 이 화면은 볼 수 없습.. 2022. 2. 19. [Flutter] 6. Drawer서랍 메뉴 만들기 앱에 내비게이션 메뉴를 추가하는 일반적인 방법은 서랍(Drawer)을 이용하는 것입니다. 앱에 서랍을 만들면서 Flutter와 더 친해져 보도록 합시다. 이번 포스트는 다음 내용을 다루고 있습니다. scaffold에서 Drawer 사용하기 MenuDrawer 클래스 만들기 Scaffold에서 Drawer 사용하기 지금까지 진행된 앱은 아래와 같이 인트로 화면이 하나만 있는 상태입니다. 이 화면에 메뉴로 서랍(Drawer)을 추가해 보도록 하겠습니다. Flutter에서는 Scaffold안에서 Drawer를 사용할 수 있습니다. Scaffold에는 Drawer을 사용하는 drawer 속성이 있습니다. Drawer는 ListView와 같은 단일자식(child)을 가질 수 있습니다. 일반적으로 서랍에는 앱 이름.. 2022. 2. 18. [Flutter] 5. 화면별 파일 분리, 테마 적용, 위젯 트리 지난 포스트에 이어서 Hello world프로젝트를 리팩토링 해보겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. 화면별 파일 분리 테마 적용하기 widget tree(위젯 트리) widget inspector 브라우저에서 실행 main.dart파일에 Flutter앱의 모든 화면을 작성할 수 있지만, 앱의 화면수가 많아지고 앱 기능이 커짐에 따라 하나의 파일이 거대해 질 수 있습니다. 애플리케이션의 각 화면에 대한 파일을 갖는 것이 흔히 화면을 관리하는 접근방식이므로 각 화면 별로 파일을 가지도록 수정해 보겠니다. 화면별 파일 분리 현재 main.dart코드는 아래와 같습니다. 위 소스의 선택된 부분을 잘라내어 새 파일로 이동시킬 계획입니다. 먼저 lib폴더에 새 폴더를 screens라는 새 폴더를.. 2022. 2. 17. 이전 1 2 3 4 5 다음
