본문 바로가기

Flutter Web

(5)
[Flutter Web] PaginatedDataTable Row Height 조정 PaginatedDataTable을 사용하다 보니 행의 간격을 조정해야 할 일이 생겼다. 찾아보니 dataRowHeight 필드를 통해 조정이 가능하다. 기본값은 48로 되어 있으니 참고하시길.. dataRowHeight: 60 PaginatedDataTable( source: _allUsers, header: const Text('Users'), columns: const [ DataColumn(label: Text('profile')), DataColumn(label: Text('Nickname')), DataColumn(label: Text('Uid')), DataColumn(label: Text('Grade')) ], dataRowHeight: 60, columnSpacing: 100, horiz..
[Flutter Web] "Failed to load network image" CORS 해결 Flutter App에서 정상적으로 사용하던 Widget을 가져와서 이미지 로딩을 해보았다. 왠걸.. App에 수도없이 박혀있는 이미지 로딩 코드가 이상한 에러를 뱉어낸다. 보기 싫은 X자 이미지와 함께.. App에서는 주로 경로가 안 맞아 발생하는 에러여서 이미지 경로를 찾아보니, 브라우저에서 정상적으로 이미지를 로딩하고 있다. Flutter 공식문서를 찾아보니.. Flutter는 웹에서 두 가지 렌더러를 선택할 수 있습니다. HTML : 이 렌더러는 HTML, CSS, Canvas 2D 및 SVG의 조합을 사용하여 UI를 렌더링합니다. 요소를 사용하여 이미지를 렌더링합니다. CanvasKit : 이 렌더러는 WebGL을 사용하여 UI를 렌더링하므로 이미지의 픽셀에 액세스해야 합니다. 이런 설명이 나온..
[Flutter Web] Firestore Database 연동하기 지난 포스팅에서 Flutterfire cli 를 통해서 Firebase core 기본 연동을 해보았습니다. 이제 Firebase의 기본 데이터베이스인 Firestore 데이터베이스 연동을 간단하게 해보겠습니다. 우리는 Flutterfire를 통해 Firebase 사용 세팅을 했기 때문에 간단한 add 명령을 통해 Firestore 패키지를 추가할 수 있습니다. $ flutter pub add cloud_firestore dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. c..
[Flutter Web] Firebase 연동하기 (feat. Flutterfire Cli) Flutter Web 에서 Firebase web 을 사용하는 가장 기본적인 동작을 준비해 보겠습니다. Flutterfire를 보면 Manual구성도 가능하다고 하지만 제가 직접 매뉴얼로 구성하려고 했으나, Firebase Iniailize부터 알 수 없는 에러가 발생하네요. 이제는 Flutterfire를 본격적으로 지원하고 가급적 Flutterfire Cli 사용을 권장하는 것으로 보입니다. 1. firebase tool 설치 터미널 창에서 위 명령어를 입력한다. -g 옵션은 전역으로 설치하는 옵션으로 한번만 설치하면 다른 모든 경로에서 사용이 가능하다. hosting, cloud functions 사용시에 필수 설치 요소이므로 설치가 안되었다면 이번 기회에 설치하는 것이 좋다 2. flutterfir..
[Flutter Web] Side bar 만들기 콘솔 종류의 프로그램을 만들경우 가장 기본적으로 필요한 것이 Side Bar 메뉴입니다. 콘솔 필요그램이 작업이 필요해서 간단히 작업해 보았습니다. Flutter Awsome 등에도 비슷한 프로젝트가 다수 검색되기 때문에 이들 중 괜찮아 보이는 프로젝트의 코드를 사용하시는 것도 방법일 것 같습니다. 하지만 저는 여러가지를 찾아보다가 pub.dev 에 있는 sidebarx 플러그인을 사용하기로 했습니다. https://pub.dev/packages/sidebarx sidebarx | Flutter Package flutter multiplatform navigation sidebar / side navigationbar / drawer widget pub.dev 이런 플러그인들이 많아진다는 것은 flut..