Flutter31 [Flutter] Widget(4) - GestureDetector GestureDetector Widget GestureDetector위젯은 사용자의 동작을 감지하는 위젯이다. (마우스 좌클릭, 롱 프레스, 우클릭 등) non-Null 콜백의 제스쳐에 대한 인식을 수행한다. 자식요소가 있으면 위젯에 크기는 자식요소에 따라 결정되고, 자식이 없으면 대신 부모에 맞춰서 결정된다. Align Widget 예제 다음 예제를 통해 GestureDetector위젯으로 클릭버튼을 감지하여 전구 상태의 on / off를 표현해보자 예제 import 'package:flutter/material.dart'; enum Department { treasury, state, } void main() { runApp(const MyApp()); } class MyApp extends Stat.. 2023. 12. 9. [Flutter] UI(1) - copyWith copyWith copyWith가 dart와 flutter만의 특별한 개념은 아니지만, 이 패턴은 꽤 자주 사용된다. `copyWith()`의 가장 큰 이점은 원래 개체(original)를 변경하지 않고, 원래 개체와 같은 속성의 새로운 object에 내가 원하는 값을 특정해서 생성할 수 있다는 점이다. 이를 통해 개체가 변경 가능한 '상태'를 포함하지 않으므로 테스트가 용이하고 관리하기 쉬운 앱을 만들 수 있게 된다. Text( "copyWith Test Sample", style: Theme.of(context) .textTheme .headline .copyWith( color: Colors.red, fontWeight: FontWeight.bold), ) 위 예제는 headline 테마를 복사 한.. 2023. 12. 7. [Flutter] Widget(3) - Align Align Widget Align 위젯은 자신의 자식요소들을 정렬하고, 자식요소의 크기에 따라 선택적으로 자신의 크기를 조정하는 위젯이다. 치수가 제한되고, 너비요소와 높이요소가 null이면 가능한 큰 사이즈로 측정된다. 치수가 제한되지 않고 해당 크기 인자가 null이면 해당 치수에서 자식요소의 크기와 일치한다. 크기 인자가 null이 아닌 경우에는, 이 위젯의 해당 치수는 자식 치수와 크기 인자의 곱이다. Align Widget 예제 다음 예제를 통해 Alignment를 사용하여 Flutter 로고를 배치해보자. 우선 Align을 사용하지 않고 컨테이너 내부에 컨테이너를 배치해본다. 예제 import 'package:flutter/material.dart'; enum Department { treas.. 2023. 12. 7. [Flutter] Widget(2) - ListView ListView Widget ListView는 가장 기본적인 스크롤링 widget이다. ListView는 itemCount만큼의 자식 요소를 가지고, 하나의 자식 밑에 다른 자식이 스크롤 방향으로 쌓이는 형상을 하고 있다. ListView를 생성하는 4가지 옵션 1. 명시적으로 childeren에 List을 넘기는 방법. 자식요소의 수가 적은 리스트뷰에 적합하다. 눈에 보이는 자식 뿐만 아니라 목록 보기에 표시될 가능성이 있는(즉, 모든 자식 요소)에 대한 작업이 수행된다. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({.. 2023. 12. 6. 이전 1 ··· 4 5 6 7 8 다음
