Flutter - Carousel Slider 기본 구문, 사용 방법, 캐러셀 인디케이터 구현하기

Overview 이번 포스팅에서는 Carousel Slider 를 사용하여 페이지들을 슬라이드로 넘기는 기능을 구현해 보도록 합니다. 또한, 사용자의 입력 없이 자동으로 일정한 간격으로 페이지가 슬라이드 되는 기능과 하단의 인디케이터를 통해 현재 화면 표시 및 특정 페이지로 이동하는 기능을 구현합니다. 포스팅에서는 각 페이지당 이미지를 배치하여 식별할 수 있도록 하였습니다. 포스팅에서 설명하는 플러터 프로젝트 파일은 깃허브에서 다운로드 가능합니다. https://github.com/luvris2/flutter-example/tree/main/flutter_carousel_slider_test 사전 작업 Carousel Slider 패키지 설치 flutter pub add carousel_slider 이미..

• format_list_bulleted Mobile/Flutter
• · 2023. 12. 20.
• textsms

Flutter VS Code Extension - 플러터 코드 자동 완성 익스텐션 설치 및 사용 방법 (Awesome Flutter Snippets With VS Code)

Awesome Flutter Snippets 어썸 플러터 스니펫은 일반적으로 사용되는 플러터 클래스 및 메서드를 모아둔 것이다. 위젯 작성과 관련된 대부분의 보일러 플레이트 코드를 제거하여 개발 속도를 높여준다. 예를 들어, Stateless Widget위젯은 statelessW를 입력하여 만들 수 있도록 한다. 쉽게 말해서, 자주 사용되는 기본적인 클래스 및 메서드들을 쉽게 작성할 수 있도록 도와주는 익스텐션이라고 보면 된다. * 보일러플레이트 코드(Boilerplate code) : 상용구 코드라고도 부르며, 여러 가지 상황에서 수정하지 않거나 최소한의 수정만을 거쳐 여러 곳에 필수적으로 사용되는 코드를 의미한다. 굳이, '이런 간단한 것들 때문에 익스텐션까지 설치해야해?' 라는 의문이 들 수도 있다..

• format_list_bulleted Mobile/Flutter
• · 2023. 12. 15.
• textsms

Flutter - InAppWebview Communication (인앱웹뷰로 웹과 앱 양방향 통신하기, 자바스크립트 커뮤니케이션)

Overview 이번 포스팅에서는... InAppWebview Package를 이용하여 구성된 웹 페이지에서 자바스크립트를 통해 웹에서 앱으로 데이터를 전달하고 (web -> app) 앱에서 웹으로 데이터를 전달하고 (웹에서 데이터를 요청하면, app -> web) 웹과 앱 서로 데이터를 양방향으로 주고 받는 (web app) 방법에 대해서 포스팅합니다. 이 포스팅에서는 InAppWebview의 기본 사용 방법은 설명하지 않습니다. 웹 페이지 구성 및 기본 사용 방법에 대한 포스팅은 아래의 포스팅을 참고해주세요. Flutter - inAppWebView 사용 방법, 메서드 설명, 당겨서 새로고침 기능 구현 inAppWebview에서 팝업은 기본적으로 보여지지 않기 때문에 따로 구현해야 합니다. 팝업 구현..

• format_list_bulleted Mobile/Flutter
• · 2023. 11. 28.
• textsms

Flutter - showDialog 상태변환하기 (다이얼로그 새로고침, setState, StatefulBuilder, StatefulWdiget)

Overview 다이얼로그 내에서는 상태변환이 이뤄져도 다이얼로그 창의 위젯이 다시 렌더링이 되지 않는다. 이유는 다이얼로그를 포함하는 클래스 자체가 StatelessWidget으로 구성되어 있기 때문이다. 이것을 어떻게 확인하냐면, IDE툴에서 showDialog 혹은 AlertDialog 위치에서 F12를 눌러보자. 그럼 Dialog 클래스가 StatelessWidget을 상속하는 것을 확인할 수 있다. (필자는 VS Code를 사용하며, F12는 Go to Definition 기능으로, 정의된 부분을 바로 확인할 수 있는 기능을 제공한다.) 즉, 다이얼로그 창 내에서 상태변환을 하여도 데이터가 업데이트되지 않고, 재호출해야 바뀐 값을 불러온다. 아래의 이미지는 확인 버튼을 누르면 값이 +1씩 증가하..

• format_list_bulleted Mobile/Flutter
• · 2023. 11. 27.
• textsms

Flutter - showDialog 사용 방법, 다이얼로그를 출력하여 상호작용하기 (AlertDialog 활용)

Overview 이전에 다이얼로그와 플로팅 액션바를 이용한 메모 앱 만들기를 통해 다이얼로그에 대한 설명을 하였었지만, 이전 포스팅에서는 앱의 기능 구현을 위주로 포스팅하였으나, 다이얼로그의 설명 내용이 너무 부실한 것 같아서 다이얼로그에 대한 설명만을 담은 포스팅을 새롭게 추가하였습니다. (이전 포스팅 보러 가기) Flutter - Floating Action Button, showDialog - 플로팅 액션 버튼으로 특정 작업 수행하기(리스트뷰 항목 추가하기) 이번 포스팅에서는 다이얼로그를 출력하는 기능을 구현해봅니다. showDialog를 이용하여 AlertDialog 위젯을 생성 후, 다이얼로그로 사용자와 상호작용할 수 있는 방법을 설명합니다. 예시) 다이얼로그에서 숫자를 카운팅하는 앱 다이얼로그..

• format_list_bulleted Mobile/Flutter
• · 2023. 11. 22.
• textsms

Flutter - 플러터 버전 다운그레이드 하기 (Flutter Downgrade)

서론6일 전에 업데이트된 플러터 버전 3.16으로 업그레이드하였더니, 이상하게도 어떤 이유에서인지 모르겠으나 앱을 실행시키면 종료된다. 버전이 업그레이드 되면서 특정 부분에서 버그를 일으키는 것 같다. 나는 당장 이틀 뒤에 회사에 앱을 시연해야 하기 때문에... 급한 마음에 일단 플러터 버전을 다운그레이드 진행해서 앱을 돌려봤더니 정상적으로 실행됐다. 이번 포스팅에서는 플러터 버전을 다운그레이드 하는 방법을 알아본다.플러터 다운그레이드하기터미널을 열고 아래와 같이 플러터 다운그레이드 명령어를 입력하고 'y|n' 선택 문구가 뜨면 'y'를 입력한다.flutter downgrade y 이후 플러터 버전 확인 명령어로 버전을 확인하면 Dart SDK 버전이 다시 다운로드 된다.flutter --version ..

• format_list_bulleted Mobile/Flutter
• · 2023. 11. 21.
• textsms