ui3 플러터(Flutter)에서 Widget UI에 있는 Key란 무엇인가? 플러터의 메인 레이아웃이라고 할 수 있는 StatelessWidget, StatefulWidget을 보면 다음과 같은 키(Key)가 존재합니다. 해당 Key의 의미는 뭐고 왜 존재하는걸까요? Key의 역할 확인을 위한 예시 프로젝트 만들기 다음과 같은 UI를 가진 프로젝트를 생성합니다. 위 프로젝트의 동작은 다음과 같습니다. Sort Descending 버튼을 클릭하면 해당 리스트의 이름을 기준으로 정렬을 실시한다. 정렬 방법은 a -> z 또는 z -> a 이렇게 두 가지의 케이스가 존재한다. (프로젝트 전체 코드는 제일 아래에 게시하겠습니다. 또는 그냥 직접 만드셔도 상관 없습니다.) Sort Descending 버튼을 누를 경우 발생하는 일 살펴보기 버튼을 클릭할 경우 다음과 같이 리스트가 재정렬됩.. 2023. 9. 25. 플러터 - UI 업데이트를 최적화 하는 방법, UI Tree란? 플러터는 setState를 사용해서 주로 UI를 업데이트 합니다. 하지만 setState를 할 때 어떤 일이 발생하는지 알고계신가요? 오늘은 setState를 클릭했을 때 어떤 일이 발생하고 플러터를 사용하여 앱을 만들 때 어떤 방법을 사용하여 UI를 최적화할 수 있는지 알아보겠습니다. 플러터로 UI를 업데이트 하는 간단한 예시 만들기 먼저 아래와 같은 간단한 앱을 만듭니다. Yes를 클릭하면 다음과 같이 바로 아랫 부분에 "Awesome!"이라는 텍스트가 나오는 간단한 앱입니다. 해당 앱을 만들 때 반드시 아래 내용을 포함시켜줘야합니다. StatefulWidget으로 만든다 createElement(), build() 함수에 print() 함수 등을 사용해서 호출될 때마다 로그가 출력되게한다. 저는 아.. 2023. 9. 22. 플러터 기초 - UI 구성 플러터의 UI를 어떻게 구성하고 제일 중요한 핵심인 플러터의 UI 구성 어디서 UI를 정의하는지 UI의 구성 정의한 UI 구조를 한 눈에 살펴보기 플러터 UI의 시작 플러터의 UI는 runApp() 함수에서 시작한다. 플러터의 모든 UI는 위젯으로 되어있기 때문에 위젯을 반환하는 클래스를 runApp()에서 실행한다. void main() { // UI를 만들도록 하는 부분 runApp(MyApp()); } // StatelessWidget: class MyApp extends StatelessWidget { // build 메서드는 UI를 만들어준다 @override Widget build(BuildContext context) { } } 플러터의 기본적인 UI 구성하기 플러터의 UI는 각각의 위젯으로.. 2023. 4. 15. 이전 1 다음
