다양한 디바이스 화면을 지원하기 위해서는 반응형 디자인이 필수입니다. 오늘은 그중 하나인 반응형 버튼에 대해서 알아보려고 합니다. 보통 버튼을 만들면 고정 사이즈로 만들게 되고 이는 다양한 디바이스의 화면을 지원하지 못하는 문제가 있습니다. 예전에는 프로젝트별 지원 디바이스 종류가 많지 않아 문제가 되지 않았지만... 시간은 흘러 이제는 사이즈를 고려할 때가 온 것 같습니다. 아래와 같이 화면사이즈가 버튼사이즈보다 큰 경우는 문제가 없지만, 반대로 화면사이즈가 버튼사이즈보다 작아질 경우 버튼 이미지가 잘리게 됩니다.(문제 발생) 이러한 문제를 해결하기 위해서는 실시간 화면 사이즈에 맞게 버튼 사이즈도 변경이 되어야 합니다. ( 반응형 기본 개념 : 화면(전체) 사이즈를 얻어서 버튼(특정 객체) 사이즈에 ..

AnimatedBuilder widget은 상태가 없는 단순한 Animation이 필요할 경우 사용합니다. (보통 사용자에 의한 이벤트 발생 시 Animation 기능을 추가하지만 (복잡도 올라감) AnimatedBuilder widgtet은 사용자가 설정한 시간 주기로 시스템에서 builder 함수를 호출해 주기 때문에 단순 Animatioin 기능 구현 시 좋을 것 같습니다.) 1. 소스코드 아래 AnimatedBuilder 객체 생성하는 부분입니다. body: AnimatedBuilder( animation: _controller, child: Center( child: Container( width: 200.0, height: 200.0, color: Colors.teal, child: const..

오늘부터 Flutter widget에 대해 알아보려고 합니다. 그중에서도 오늘 알아볼 widget은 AnimatedAlign widget입니다. AnimatedAlign widget은 사용자가 설정한 시간 및 위치로 객체를 이동할 수 있습니다. 1. 소스 코드 아래 AnimatedAlign 객체 생성하는 부분입니다. child: AnimatedAlign( alignment: selected ? Alignment.topLeft : Alignment.topRight, duration: const Duration(seconds: 1), curve: Curves.linear, child: const FlutterLogo(size: 50.0), ), - alignment (위치) : Alignment.topLef..

1. Stateless/Stateful Widget 상속받은 클래스 생성 방법 - stless 키 입력 후 아래와 같이 창이 팝업되면 -> Tab 혹은 Enter키 클릭 합니다. - stful 키 입력 후 아래와 같이 창이 팝업되면 -> Tab 혹은 Enter키 클릭 합니다. 2. 클래스 생성 후 .dart 파일 import - a.dart 파일에서 클래스 생성 -> b.dart 파일에서 클래스 생성자 호출 시 아래와 같이 빨간 밑줄이 확인 됩니다. 빨간 밑줄 클릭 후 "Alt + Enter"키를 클릭합니다. 그러면 아래와 같이 도움 창이 팝업되는 것을 확인할 수 있습니다. 예) PdfViewerScreen 생성 -> PdfViewerScreen() 생성자 호출 -> 빨간 밑줄 확인 후 클릭 -> Alt..

A RenderFlex overflowed by 9.0 pixels on the right 증상 : Flutter UI 작업 중 "A RenderFlex overflowed by 9.0 pixels on the right" 메시지 확인될 때, 아래 그림과 같이 실행 시 ToggleSwitch(Disable)에서 의도치 않은(?) 이미지 나타남 1. 실행 시 화면 2. Debug 창에도 "A RenderFlex overflowed by 9.0 pixels on the right" 메시지 빨간색으로 표시 됨 처리 : Container 및 ToggleSwitch의 AutoSizeText Widget의 사이즈를 적절히 조정하여 해결 함 ( 위 Debug창 확인 시 Exception 발생한 이유 잘 나와 있음 b..

증상 : flutter app에 직접 작업한 flutter plugin(for windows) 포함(연결) 작업 후 빌드 시 아래와 같은 Exception 발생 함 1. flutter plugin(for windows) 프로젝트 생성 및 인터페이스 추가 2. flutter app 프로젝 생성 3. 작업한 plugin 포함(연결) 작업 : pubspec.yaml 파일에 종속성 처리 4. flutter app main.dart 파일에 plugin dart 파일 import 5. flutter app 빌드 6. Exception 발생 처리 : 개발자 모드 활성화 필요 : Windows11 기준 아래 이미지 파일 참조 1. 설정 -> 개인 정보 및 보안 -> 개발자 모드 2. 개발자 모드 끔 -> 켬으로 설정 ..

Android Studio 혹은 Visual Code Terminal 창혹은 cmd 창에서 아래 명령어 입력 가능 (단, 윈도우OS의 경우 환경변수에 flutter sdk 등록되어 있어야 함) flutter --version : flutter 버전 확인 flutter doctor : Flutter 개발 시 필요한 부분들이 잘 설정되어 있는지 확인 flutter channel : Flutter 소스 채널 확인 (master, main, beta, stable) flutter channel stable : Flutter 소스 채널 선택(전환) flutter upgrade : Flutter 최신 버전으로 업그레이드 ☆ Flutter 최신 버전으로 업그레이드 시 아래와 같이 입력 flutter channel s..