본문 바로가기

프로그래밍124

[Flutter] 10. 토글 버튼 만들기(ToggleButtons) 지난포스트에서 StatefulWidget에 대해 알아보고 StatefulWidget 클래스를 만들었습니다. 지금 부터 bmi_scrren.dart파일에 체질량 계산기 화면을 만들려고 합니다. 체질량 계산기의 화면 UI는 미터법과 파운드법을 선택할 수 있는 토글 버튼과 키와 체중을 입력할 수 있는 텍스트 필드 그리고 계산버튼, 마지막으로 결과값을 출력하는 텍스트로 이루어져 있습니다. 이번 포스트에서는 우선 토글 버튼 을 만들어 보도록 하겠습니다. 다음 내용을 다루고 있습니다. ToggleButtons 위젯 EdgeInsets 설정 late 키워드 StatefulWidget Lifecycle(initState, build, dispose) onPressed와 setState 메소드 토글 버튼 만들기 *하단에.. 2022. 2. 22.
[Flutter] 9. State, StatelessWidget, StatefulWidget 비교와 만드는 단계 State에 대해 알아본 후, StatelessWidget과 StatefulWidget에 대해 살펴보고 차이점을 비교해 보도록 하겠ㅂ니다. 본 포스트는 다음 내용을 다루고 있습니다. State(상태)란 StatelessWidget과 StatefulWidget 비교 StatefulWidget을 만드는 단계 StatelessWidget에서 StatefulWidget으로 변환 State(상태) 상태는 위젯을 작성할 때 사용할 수 있는 정보이며 위젯의 사용 기간 동안 변경될 수 있습니다. 다시 말하자면, 상태는 UI를 구축(재구축)하기 위해서 필요한 데이터 입니다. 상태에는 중요한 순간이 있는데, 상태가 생성될 때 이뤄지는 초기화 프로세스와, 위젯의 생명 주기 동안 이뤄지는 상태의 변경이 중요합니다. 위젯 자체.. 2022. 2. 21.
[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.