본문 바로가기

Flutter/Flutter 위젯12

Flutter - RotatedBox, Transform.rotate, AnimatedBuilder, 위젯 회전하기 안녕하세요 독학코딩입니다. 오늘은 Flutter에서 위젯을 세로로 배치하는 방법에 대해서 배워보겠습니다. 그리고 세로 배치와는 비슷하지만 효과와 쓰임새가 다른 위젯 회전에 대해서도 배워보겠습니다. Flutter RotatedBox Flutter에서 위젯을 90도 혹은 180도 회전에서 배치하는 것은 상당히 간단합니다. 레이아웃을 세로 정의할 필요도 없습니다. 그저 RotatedBox만 사용하시면 됩니다. class FirstRoute extends StatefulWidget { const FirstRoute({Key? key}) : super(key: key); @override State createState() => _FirstRouteState(); } class _FirstRouteState ex.. 2022. 4. 30.
Flutter - ExpansionPanel, ExpansionPanelList, 눌러서 열기, 확장 패널 안녕하세요 독학코딩입니다. 오늘은 앱을 개발할 때 정말 많이 사용하는 눌러서 열기 기능에 대해서 배워보겠습니다. 위젯 이름은 ExpansionPanel인데 한국어로는 정확한 번역이 있는지 모르겠네요. 직역으로는 확장 패널인데 눈으로 보시면 익숙하실 겁니다. Flutter ExpansionPanel class FirstRoute extends StatefulWidget { const FirstRoute({Key? key}) : super(key: key); @override State createState() => _FirstRouteState(); } class _FirstRouteState extends State { bool _expanded = false; @override Widget build(.. 2022. 4. 28.
Flutter - Theme, ThemeData, 테마 바꾸기 안녕하세요 독학코딩입니다. 오늘은 Flutter에서 앱의 전체 테마를 한번에 바꾸는 방법에 대해서 배워보겠습니다. 일반적으로는 라이트모드, 다트모드가 있고 만약 원하신다면 더 특별한 커스텀 테마를 적용하는 것도 가능합니다. Flutter Theme Flutter Theme는 하위 위젯의 테마를 적용하는 위젯입니다. 여기서 테마는 앱의 색과 폰트를 의미합니다. 하위 위젯은 Theme.of를 나중에 Theme이 변경되면 ThemeData 개체를 사용하여 자동으로 재구성되므로 변경사항을 적용할 수 있습니다. Flutter Theme을 사용하는 방법은 간단합니다. Theme은 그 하위 모든 위젯의 색과 폰트를 설정하는 위젯이니 Theme을 적용하시고 싶은 위젯 위에 Theme을 작성하시면 됩니다. Elevate.. 2022. 4. 19.
Flutter - RefreshIndicator, Pull to Refresh, 당겨서 새로고침 안녕하세요 독학코딩입니다. 오늘은 Flutter에서 Pull to Refresh 기능인 당겨서 새로고침을 배워보겠습니다. 어떤 앱을 보든 기본적으로 있는 기능있는데요. 모두 본적이 있으실 겁니다. 화면을 아래로 당기면 새로고침 스피너가 나오면서 화면이 새로고침 되는걸 보셨을 겁니다. 오늘은 그 기능인 RefreshIndicator를 배워보겠습니다. Flutter RefreshIndicator RefreshIndicator는 스크롤 가능한 하위 항목이 오버스크롤 되면 새로고침 콜백이 호출됩니다. 다만, Vertical Scroll View에서만 가능하다는 걸 유의하셔야 합니다. int refreshnum = 0; RefreshIndicator( onRefresh: () async { refreshnum +.. 2022. 4. 16.