Flutter30 [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. [Flutter] Widget(1) - Dialog, Alert Dialog, Simple Dialog, Show Dialog Dialog Widget Dialog위젯은 Flutter에서 Modal을 표현할 때 사용하는 가장 기본적인 widget이다. 이 widget을 사용하면 앱의 현재 내용 위에 대화상자가 표시된다. 이 대화상자는 확인 및 취소 기능을 가지고 있으며, 모달 barrier를 클릭할 시 dialog가 종료된다. dialog widget은 dialog 대화상자에 대한 어떠한 옵션도 없기 때문에, 이 widget을 바로 사용하는 것보다 AlertDialog 혹은 SimpleDialog를 사용하는 것이 더욱 유용하다 Dialog 예제 코드 import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends St.. 2023. 12. 5. 이전 1 ··· 4 5 6 7 8 다음
