Flutter 썸네일형 리스트형 플러터(Flutter) - 외부 데이터 불러올때 try / catch 오류(error) 처리 외부에서 Json이나 csv 파일을 비동기로 불러올 때 일반적으로 발생할 수 있는 에러들의 처리 방법입니다. import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; class Test extends StatefulWidget { const Test({Key? key}) : super(key: key); @override State createState() => _TestState(); } class _TestState extends State { @override void initState() { super.initState(); try { // 데이터 불러오기 // http.Respo.. 더보기 플러터(Flutter) 3.0 - QR Code Scanner 검은 화면 해결(qr_code_scanner) qr_code_scanner: ^1.0.0 기존 프로젝트에서 플러터 3.0으로 업데이트 및 qr_code_scanner 1.0.0 사용 시 검은 화면(아래 이미지처럼)만 나온다면 해결 방법입니다. void _onQRViewCreated(QRViewController controller) { this.controller = controller; controller.scannedDataStream.listen((scanData) { setState(() { result = scanData; }); }); } 위 기존 qr_code_scanner를 생성하는 코드를 아래 코드처럼 변경 해 주시면 됩니다. void _onQRViewCreated(QRViewController controller) { // setS.. 더보기 플러터(Flutter) - 삼항연산자 삼항연사자의 기본 구조는 아래와 같습니다. 조건문이 true이면 "?" 쪽을 실행하며 false이면 ":" 쪽을 실행 한다 입니다. 조건문 ? 조건문이 true면 실행 : 조건문이 false면 실행 String question = 'y'; question == 'y' ? const Text('정답') : const Text('오답') question이 y 이면 "정답"을 출력하며 아니면 "오답"을 출력하는 코드입니다. 삼항 연사자의 기본 이겠죠. 위에선 두 가지 조건 true와 false 만 허용되는데 조건을 하나 더 넣고 싶다면 question == 'y' ? const Text('정답') : question == 'n' ? const Text('오답') : const Text('오류'), 첫 번째 조.. 더보기 플러터(Flutter) - QR Code Scan QR Code Scan을 이용하기 위해 qr_code_scanner Package를 설치해야 합니다. https://pub.dev/packages/qr_code_scanner qr_code_scanner | Flutter Package QR code scanner that can be embedded inside flutter. It uses zxing in Android and MTBBarcode scanner in iOS. pub.dev pubspec.yaml 에서 추가해 줍니다. dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the Cupert.. 더보기 플러터(Flutter) - 이미지 메뉴(Image Menu) Flutter를 이용한 아이콘 목록의 메뉴를 만들어 보겠습니다. 메뉴 선택 시 선택된 아이콘은 그림자를 주어 표시되는 방식입니다. 상태 관리는 GetX를 사용했습니다. https://pub.dev/packages/get get | Flutter Package Open screens/snackbars/dialogs without context, manage states and inject dependencies easily with GetX. pub.dev pubspec.yaml 설정 dependencies: flutter: sdk: flutter get: ^4.6.1 flutter: uses-material-design: true assets: - images/ dependencies: 에 getX를 a.. 더보기 플러터(Flutter) - 앱의 폰트 크기 유지 스마트폰의 디스플레이 설정에서 글자 크기를 변경할 경우 앱에서 설정된 폰트 크기는 무시되며 스마트폰 글자 크기로 변경 됩니다. 글자 크기의 변화로 인해 Text의 Overflow가 발생하게 되는 문제들이 있는데 이럴 경우 Text( '폰트 크기 설정', overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 16), ) overflow: TextOverflow.ellipsis 기능으로 일부 해결이 되겠지만 원하는 디자인은 결코 아닐 겁니다. 스마트폰의 설정에서 변경된 글자 크기에 영향을 받지 않고 일정한 크기의 폰트 크기를 유지하려면 class MyApp extends StatelessWidget { @override Widget build(BuildC.. 더보기 Flutter : 플러터 기존 프로젝트 2.0 으로 마이그레이션 하기 기존 Flutter 앱을 null safety를 지원하는 2.0으로 마이그레이션 해 보았습니다. 현재 앱의 dart 총 소스 라인은 1만 2천 라인 가까이 되는 프로젝트며 완벽한 마이그레이션까지 총 3일 정도 소요된 것 같습니다. Flutter의 업그레이드 및 마이그레이션의 자세한 내용들은 아래 링크에 들어가시면 자세히 보실 수 있습니다. https://dart.dev/null-safety/migration-guide Migrating to null safety How to move your existing Dart code to the world of null safety dart.dev 우선 Flutter 2.0으로 업그레이드는 Flutter 홈페이지에서 2.0을 받아와 기존 하드의 Flutter 폴.. 더보기 플러터(Flutter) - SnackBar 사용 플러터 2.0 부터는 Scaffold 대신 ScaffoldMessenger 를 사용해야 합니다. ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('내용 표시'))); 처음 플러터에서 SnackBar를 사용해 보려 하면 뜻대로 안 될 때가 많을 것입니다. SnackBar의 기본 구조는 아래와 같습니다. Scaffold.of(context).showSnackBar(SnackBar(content:Text('내용표시'))); 메시지 전달에서 간편하게 사용할 수 있지만 사용하려면 Scaffold 안에서 context 문제를 해결해 줘야 합니다. 첫 번째 새로운 context를 가져오면 됩니다. child: Builder( builder:(con.. 더보기 플러터(Flutter) - Generate signed apk fails with build\app\intermediates\flutter\profile\libs.jar 오류 플러터에서 안드로이드 APK 앱으로 빌드시키려 할 때 Generate signed apk fails with build\app\intermediates\flutter\profile\libs.jar Project Structure.. 를 선택 후... Project 오른쪽 화면의 Gradle version를 다운시켜 준 후 Apply 적용해 주시면 됩니다. 플러터가 열린 창에서 Project Structure.. 메뉴를 여시면 다른 화면이 나오니 안드로이드 파일이 열린 창에서 열어주셔야 합니다. 이제 apk로 다시 빌드해 주시면 됩니다. 더보기 Flutter - CurvedNavigationBar(네비게이션바) 구현 https://pub.dev/packages/curved_navigation_bar curved_navigation_bar | Flutter Package Stunning Animating Curved Shape Navigation Bar. Adjustable color, background color, animation curve, animation duration. pub.dev Flutter의 하단 내비게이션 바 중 하나인 CurvedNavigationBar입니다. CurvedNavigationBar를 사용하기 위해선 pubspec.yaml에 dependencies를 추가해 주셔야 합니다. dependencies: curved_navigation_bar: ^0.3.4 class _main exten.. 더보기 이전 1 2 다음
