개발노트

ThemeData() Flutter에서 ThemeData 클래스는 앱의 전체적인 디자인 테마를 지정하는 데 사용됩니다. ThemeData를 사용하여 앱의 색상, 텍스트 스타일, 아이콘 테마 등을 일관되게 설정할 수 있습니다. ThemeData는 MaterialApp 위젯의 theme: 속성 에 주로 사용되지만, Cupertino 앱의 디자인도 지정할 수 있습니다. 색상 지정 - primaryColor: 앱의 기본 색상 - accentColor: 강조 색상 - scaffoldBackgroundColor: 스카폴드(전체 앱 화면)의 배경색 - backgroundColor: 앱의 일반적인 배경색 등... 텍스트 스타일 지정 - textTheme: 앱 전체의 텍스트 스타일을 설정합니다. 예: headline1,..

FractionallySizedBox FractionallySizedBox 위젯은 부모 컨테이너 내에서 비율로 크기를 조정하는 데 사용되는 Flutter 위젯입니다. FractionallySizedBox는 부모 컨테이너의 가로 및 세로 공간에 대해 상대적인 비율을 지정할 수 있습니다. 이를 통해 화면 크기에 독립적으로 위젯의 크기를 조정할 수 있습니다. FractionallySizedBox( widthFactor: double, // 가로 비율 (0.0 ~ 1.0) heightFactor: double, // 세로 비율 (0.0 ~ 1.0) alignment: AlignmentGeometry, // 정렬 방식 (선택 사항) child: Widget, // 자식 위젯 ) widthFactor: 부모 컨테이..

Chat GPT SDK를 이용한다면 Flutter 앱에 Chat GPT를 연결하여 사용할 수 있습니다. 준비물.1 - 설치링크: https://pub.dev/packages/chat_gpt_sdk/install chat_gpt_sdk | Flutter Package create chat bot and other bot with ChatGPT SDK Support GPT-3.5 Turbo and SSE Generate Prompt pub.dev 준비물.2 ChatGPT API Key 받는 곳 - 링크: https://platform.openai.com/account/api-keys OpenAI API An API for accessing new AI models developed by OpenAI plat..

Piano 위젯을 사용하여 건반을 이용한 앱을 만들 수 있습니다. 1. 아래 주소에서 piano 패키지를 받아 프로젝트에 설치해줍니다. - 설치링크: https://pub.dev/packages/piano piano | Flutter Package Utilities and widgets for working with piano sheet music learning. pub.dev 2. 아래와 같이 코드를 작성하고 빌드합니다. import 'package:flutter/material.dart'; import 'package:flutter_tonetrainer/models/entity_dump.dart'; import 'package:piano/piano.dart'; class PageChord exten..

위젯 위치를 이동시키고 싶다면 Transform 위젯을 사용하시면됩니다. 1. Transform.rotate: 지정한 각도만큼 위젯을 회전합니다. 2. Transform.translate: 지정한 값만큼 x, y, z 축으로 위젯을 이동합니다. 3. Transform.scale: 지정한 배율로 위젯을 확대 또는 축소합니다. 4. Transform.skew: 지정한 각도만큼 x, y 축으로 위젯을 비틀어 놓습니다. 5. Transform.matrix: 직접 변환 행렬을 지정하여 위젯을 변환합니다. 아래 함수들은 모두 Transform 위젯의 생성자에 옵션으로 전달되며, 필요에 따라 조합하여 사용할 수 있습니다. 각 함수들의 자세한 사용 방법과 예제는 다음과 같습니다. // Transform.rotate 함..

.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..

이전 시간에 만들었던 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..