Flutter28 [Flutter] UI(3) - systemNavigationBar 색깔 바꾸기 (Device NavigationBar 대부분 앱을보면 앱 내부의 bottomNavigation과 디바이스의 NavigationBar의 색깔을 일치시켜 통일감 있는 UI를 보여준다. 대표적으로 유튜브 뮤직과 인스타그램을 보면 같은 디바이스에서도 각각 다른 앱을 실행시켰을 때, Device NavigationBar의 색상이 다른것을 확인할 수 있다. Flutter에서 Device의 NavgitationBar의 색깔을 바꾸기 위해서는 SystemChrome 클래스의 setSystemUIOverlayStyle 메써드를 사용하면 된다. void main() { SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle( systemNavigationBarColor: Color.fromARGB(255, 14.. 2023. 12. 15. [Flutter] Widget(7) - FutureBuilder FutureBuilder FutureBuilder 위젯은 Future와의 상호 작용에 대해 최신 스냅샷을 기반으로 자체 build되는 위젯이다. 주로 API 통신 등 데이터를 비동기적으로 받아와 화면에 그려주는 경우에 자주 쓰인다. Future 관리 future 상태는 State.initState, State.didUpdateWidget 또는 State.didChangeDependencies가 일어나는 것보다 더 빠르게 확보되어야 한다. FutureBuilder를 구성할 때 State.build 또는 StatelessWidget.build 메서드 호출 중에 생성되어서는 안된다. 만약 FutureBuilder와 future가 동시에 생성된다면, FutureBuilder의 상위 요소가 rebuild될 때마다.. 2023. 12. 13. [Flutter] Widget(6) - Form Form Widget Form 위젯은 여러 FormField 위젯을 그룹화할 수 있는 위젯이다. (e.g. TextField widgets). 각각의 form field는 FormField 위젯으로 감싸져 있어야 한다. 각각의 FormField의 저장, 초기화, 검증은 FormState에서 메서드를 호출하여 이루어진다. FormState를 가질려면 Form.of를 사용하거나 조상이 Form인 context에서 GlobalKey를 Form 생성자에 전달하고, GlobalKey.currentState를 호출할 수 있다. Form 예제 코드 TextFormField의 input 값을 검증한 후, submit하는 코드 예제 import 'package:flutter/material.dart'; void main.. 2023. 12. 12. [Flutter] Widget(5) - LayoutBuild LayoutBuilder Widget LayoutBuilder 위젯은 부모 위젯의 크기에 따라 달라지는 위젯 트리를 작성한다. 즉, 위젯의 크기에 따라 자식요소를 build를 하겠다는 의미이다. framework가 layout 타임에 빌더 함수를 호출하며 부모 위젯의 제약 조건을 제공한다는 점을 제외하고는 Builder 위젯과 유사하다. 이 위젯은 부모 위젯이 자식의 크기를 결정하고, 자식 위젯의 고유 크기에 의존하지 않을 때 유용하다. 이 위젯의 최종 크기는 자식의 크기와 일치하다. LayoutBuilder Widget이 호출되는 경우 위젯이 처음으로 배치 되는 경우 상위 위젯이 해당 위젯을 업데이트 하는 경우 builder 함수가 구독하는 종속성의 변경이 있는 경우 LayoutBuilder 예제 코드.. 2023. 12. 11. 이전 1 2 3 4 5 6 7 다음
