개발노트

.NET MAUI에서도 움직이는 이미지를 사용할 수 있도록 제공해 줬던 Lottie를 Flutter에서도 사용가능합니다. 1. Lottie 라는 패키지를 설치해줍니다. - 설치링크: https://pub.dev/packages/lottie lottie | Flutter Package Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player. pub.dev 2. Lottie 홈페이지에 가서 마음에 드는 움직이는 이미지를 클릭하여 사용가능한 url를 복사합니다. - Lottie링크: https://lottiefiles.com/featured Featured an..

Flutter의 장점 중 하나는, 구현하고자 하는 위젯들이 대부분 이미 만들어져있다는 것에 있습니다. 위젯을 사용하려면 pubspec.yaml 이나 node.js 혹은 flutter SDK 터미널로 설치만 해주시면됩니다. 오늘은 card_swiper라는 위젯을 프로젝트에 설치하여 사용해 보도록하겠습니다. 기존의 ListView는 스크롤 시, item 상관없이 슬라이드 되었다면, card_swiper는 각각의 item에 할당되어있는 index를 통해 하나씩 스크롤되는 점이 차이가 있으며, 그 밖에도 여러가지 속성을 이용하여 보다 깔끔한 ListView를 만들 수 있습니다. (.NET MAUI에서 했던 CarouselView과 비슷하지만, 보다 사용하기 간편하고 멋집니다.) 링크: https://mroh12..

Flutter에서 제공하는 Hero 위젯을 사용하면 화면전환 애니메이션을 쉽게 넣을 수 있습니다. 사용방법. 전환 이벤트를 가지고 있는 Widget과 전환된 화면에 나타나는 Widget의 부모 Widget으로 Hero()를 작성합니다. Hero() 의 tag: 속성에 두 화면이 서로 공유하는 유일한 고유 값을 설정합니다. page_dump.dart (다음 화면으로 값을 넘기는 Widget(화면)) return GestureDetector( onTap: () { listItemTap(context, dumpl); }, child: Hero( tag: dumpl.title, child: Container( padding: const EdgeInsets.symmetric( horizontal: 80, vert..

Flutter에서 Navigator 클래스는 앱 내에서 화면을 전환하는 데 사용됩니다. 새 화면 띄울때 사용하는 push() 현재 화면을 종료할때 사용하는 pop() 메서드가 있으며, 이를 활용한 페이지 전환이 가능합니다. Navigator.push() push() 메서드: push() 메서드는 새로운 화면을 현재 화면 위에 푸시(push)하여 쌓는 작업을 수행합니다. 이 메서드를 사용하면 새로운 화면이 스택에 추가되고 사용자는 이전 화면으로 되돌아갈 수 있습니다. 일반적으로 사용자가 이전화면을 종료시키지 않은 채로 새로운 화면으로 이동할 때 사용됩니다. Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), );..

이전 시간에 만들었던 page_dump.dart에 ListView 위젯을 사용하여 리스트에 있는 아이템을 노출시켜 보도록 하겠습니다. ListView의 Item으로 사용할 객체를 따로 생성하기 위해 models 라는 폴터를 생성하고 거기에 entity_dump.dart를 생성하겠습니다. Dump라는 객체를 먼저 생성하고, Dump를 item으로 갖는 List인 DumpList를 생성하도록 하겠습니다. 객체 생성. entity_dump.dart import 'package:flutter/material.dart'; enum Level { easy, nomal, hard } class Dump { late final String title, content; Level level; IconData icons;..

BottomNavigationBar 을 사용하여 화면 하단에 Tap 버튼을 두고 위젯(화면)을 전환시키는 기능을 만들어 보겠습니다. 전환되는 화면으로 사용할 Widget을 views라는 폴더를 두고 각각 생성해 줬습니다. 전환되는 것만 확인할 거라서 Text('화면명') 위젯만 추가하였습니다. main.dart import 'package:flutter/material.dart'; import 'package:flutter_tonetrainer/views/page_dump.dart'; import 'package:flutter_tonetrainer/views/page_reward.dart'; import 'package:flutter_tonetrainer/views/page_theory.dart'; vo..

Flutter의 기본구조를 살펴보기 위해 기본 프로젝트인 카운팅 앱 소스를 가지고 설명하겠습니다. void main() import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } import 'package:flutter/material.dart'; - import 로 material 라이브러리를 가져오는 것부터 시작합니다. - void main() Function는 runApp() 함수를 통해 아래 작성된 MyApp Widget을 실행하는 역할을 할 뿐 다른 역할은 하지 않습니다. MyApp class MyApp extends StatelessWidget { const MyApp({super.key}); @override..

Flutter 앱에 Firebase 를 사용하여 API Server와 DB를 구성하려고 한다면 다음과 같이 진행해주세요. Window용 Firebase CLI 설치하기 -링크: https://firebase.google.com/docs/flutter/setup?hl=ko&platform=ios Flutter 앱에 Firebase 추가 의견 보내기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Flutter 앱에 Firebase 추가 plat_ios plat_android plat_web iOS+ Android 웹 기본 요건 아직 Flutter 앱이 없다면 firebase.google.com 1) 링크로 들어가서 Node.js를 먼저 설치해줍니다. 2) 추천 버전과 최신 버..

[문제발생] Flutter를 개발한지 한달째 되는날 새로운 프로젝트를 생성하고 수정뒤에 빌드(F5)버튼을 눌러보니, 아래와 같이 git에 9K가 넘어가는 수정사항들을 커밋하지않았다면서 빌드가 안되는 오류가 발생했습니다. Flutter SDK를 재설치 해보아도 동일한 오류가 발생되었습니다. Flutter 프로젝트에서 "git staged changes"가 9K 이상이 되는 것은 보통 불필요한 파일이나 폴더를 Git 저장소에 추가하여 발생하는 경우가 많습니다. 이 경우 Git이 모든 변경 사항을 추적하려고 하기 때문에 스테이징이나 커밋 단계에서 시간이 오래 걸리며, 저장소의 용량도 증가하게 됩니다. 이 문제를 해결하기 위해서는 Git으로 관리하지 않아도 되는 파일이나 폴더를 .gitignore 파일에 추가하..

칼럼명을 바꾸려면 아래 프로시저와 파라미터를 입력하고 명령실행시켜주면됩니다. EXEC SP_RENAME '테이블명.기존칼럼명', '새로운칼럼명', 'COLUMN'