개발노트

AnimatedList AnimatedList가 앞서 소개해드린 ListView 애니메이션 효과 구현 보다 더욱 간단한 이유는 위젯 자체에서 Animation을 제공한다는 점입니다. 따라서 Animation Tween을 따로 구현할 필요가 없어 소스가 더욱 간결해집니다. ListView 위젯에 애니메이션 효과를 넣어야한다면 AnimatedList를 사용하는 것이 더욱 간단합니다. 예시. import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; class TestScreen extends StatefulWidget { const TestScreen({super.key}); @o..

AnimationController, Animation으로 애니메이션 효과 적용하기 개인적으로 노마드코더에서 Flutter를 배우면서 AnimationController, Animation 작성 방법과, 이것들을 사용하려면 왜 with SingleTickerProviderStateMixin 을 해줘야하는지 이해하기까지 어려웠습니다. 이 글에서는 AnimationController, Animation을 생성하고 애니메이션 효과를 적용하는 방법 2가지를 소개하고, 이를 AnimatedModalBarrier, SlideTransition, RotationTransition 위젯에 적용시켜보겠습니다. 구현할 애니메이션 설명 ListTile의 속성 leading:에 들어있는 Icon을 90도 회전시키는 애니메이션..

ListTile ListTile 위젯은 목록 또는 리스트 항목을 나타내는 Flutter 위젯 중 하나로, 다양한 속성을 통해 제목, 부제목, 아이콘 및 기타 정보를 표시할 수 있습니다. 위 그림와 같이 사용할 위젯이 필요하다면 Container 위젯을 이용하여 만들기보다 ListTile 위젯을 사용하면 편리합니다. import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; class TestScreen extends StatefulWidget { const TestScreen({super.key}); @override State createState() => _TestScree..

Dismissible Dismissible 위젯은 사용자가 리스트 항목을 스와이프하여 제거하거나 다른 동작을 수행할 때 유용한 Flutter 위젯입니다. 주로 리스트나 그리드 아이템과 함께 사용되며, 사용자 상호 작용을 처리하고 해당 항목을 제어하는 데 도움을 줍니다. 예시. import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; class TestScreen extends StatefulWidget { const TestScreen({super.key}); @override State createState() => _TestScreenState(); } class _Tes..

GridView GridView 위젯으로 화면을 분할하여 위젯 노출이 가능합니다. Grid의 비율,간격, Column의 갯수 item의 수 등 정할 수 있으며, 쉽게 말해 표처럼 위젯을 표현할 수 있습니다. 또한, .builder를 제공하기 때문에 동적으로 생성이 가능합니다. import 'package:flutter/material.dart'; class TestScreen extends StatefulWidget { const TestScreen({super.key}); @override State createState() => _TestScreenState(); } class _TestScreenState extends State { @override Widget build(BuildContext ..

TabBar, TabBarViewAppBar의 바로 밑에 Tab을 넣어 화면전환이 필요할 때가 있습니다. 이 경우 TabBar를 Appbar() Bottom:에 넣고, body:에 TabBarView를 넣어 기능을 구현할 수 있습니다. *DefaultTabController 위젯으로 꼭 감싸고 Tab item의 갯수를 정해줘야 TabBar 위젯을 사용할 수 있습니다. 예시.import 'package:flutter/material.dart'; class TestScreen extends StatefulWidget { const TestScreen({super.key}); @override State createState() => TestScreenState(); } class _TestScreenStat..

showModalBottomSheet showModalBottomSheet 위젯을 이용하면 하단에서 올라오는 Sheet를 만들수 있습니다. GestureDetector의 onTap을 이용하여 클릭했을 때 Sheet가 나오는 기능을 만들어보겠습니다. Sheet안에는 ListView의 아이템이 나오도록 만들었습니다. 예시. import 'package:flutter/material.dart'; class TestScreen extends StatefulWidget { const TestScreen({super.key}); @override State createState() => _TestScreenState(); } class _TestScreenState extends State { void _onTap..

VideoPlayer 앱내에 동영상을 사용할 수 있도록 도와주는 위젯으로 asset, url 과 같이 경로에 있는 동영상을 controller로 받아 여러가지 속성을 이용하여 표현해주는 위젯입니다. 주요 속성 VideoPlayerController 비디오 재생을 제어하는 컨트롤러입니다. VideoPlayer 비디오를 표시하는 위젯입니다. VideoPlayerController.initialize 비디오를 초기화하는 메서드입니다. VideoPlayerController.setVolume 비디오의 볼륨을 설정하는 메서드입니다. VideoPlayerController.addListener _videoPlayerController 객체의 값이 변경될 때 호출되는 콜백 함수를 설정하는 메서드입니다. VideoPl..

PageView PageView는 여러 페이지를 가로 또는 세로로 스크롤하여 전환할 수 있도록 해줍니다. 주로 이미지 갤러리, 사용자 안내 등 다양한 상황에서 사용됩니다. controller: PageController를 지정합니다. PageController는 페이지의 전환을 제어하는 Widget입니다. children: PageView에 표시할 Widget의 목록입니다. scrollDirection: 스크롤 방향을 지정합니다. scrollDirection은 horizontal, vertical 중 하나를 선택할 수 있습니다. pageSnapping: 페이지가 전환될 때 페이지를 정지시키는 여부를 지정합니다. pageSnapping은 true, false 중 하나를 선택할 수 있습니다. viewport..

AnimatedCrossFade AnimatedCrossFade 위젯은 두 개의 자식 위젯 간에 부드러운 전환 효과를 제공하는 Flutter 애니메이션 위젯입니다. 첫 번째 자식 위젯과 두 번째 자식 위젯 사이에서 애니메이션을 통해 전환되며, 애니메이션 지속 시간과 전환 상태에 따라 어떤 자식 위젯이 표시될지 결정됩니다. bool _showFirstWidget = true; // 첫 번째 자식 위젯을 표시할지 여부를 결정하는 변수 Widget build(BuildContext context) { return AnimatedCrossFade( duration: const Duration(milliseconds: 500), // 애니메이션 지속 시간 firstChild: Container( // 첫 번째 자..