분류 전체보기 (7) 썸네일형 리스트형 [Flutter] 플러터 웹 배포 후 메인화면으로 넘어가지 않는 현상(Failed to load…404 error) 플러터 웹 로컬 환경에서는 문제가 없으나, 호스팅 사이트에서 배포 후 들어가보면, 스플래시 화면이나 흰 화면에서 메인화면으로 넘어가지 않고 멈춰있는 현상이 있습니다. F12를 눌러서 개발자도구로 들어가보면 ‘Failed to load resource: the server responded with a status of 404 ()” 라는 에러가 발생해서 메인화면으로 넘어가지 못합니다. 첫 페이지의 경로를 찾지 못해서 발생하는 에러인 것 같습니다. 해결방법 프로젝트 경로에서 /web/index.html 파일을 열어서 라고 되어있는 부분을 찾아서, “flutter.js”를 “main.dart.js”로 바꿔주세요. 그러고 다시 빌드하고 배포하면 정상적으로 페이지가 열릴겁니다. /web/index.html 파일.. [Flutter] 웹 Mixed Content 에러 쉽고 간단하게 해결하는 방법 플러터 웹 배포 후 공공데이터 API를 호출하는데 데이터가 들어오지 않아서 크롬 개발자 도구를 통해 확인해보니 다음과 같은 에러가 발생했습니다 Mixed Content: The page at '웹앱 URL 주소' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '공공데이터 api 요청 주소'. This request has been blocked; the content must be served over HTTPS. 플러터 웹은 HTTPS 프로토콜로 빌드되는데, 부분적으로 HTTP 프로토콜로 데이터가 들어올 경우 안전하지 않은 요청이라고 판단하여 브라우저에서 차단하게 됩니다. 크롬을 포함한 대부분 브라우저에서 차단하는 것 .. Flutter(플러터) Firebase(파이어베이스)에서 데이터 가져와서 화면으로 보여주기 구글에서 파이어베이스 데이터를 가져오는 방법을 검색해보면 단순히 메서드 형태로 만들어서 print를 통해 데이터를 보여주는 예제들만 있어서, 이 데이터를 실제로 화면으로 보여주는 과정에서 어려움을 겪었습니다. 또한 여러 document를 ListView나 GridView형태로 보여주는 것은 비교적 쉽게 작동했지만 특정 document의 단일 데이터를 보여주는 부분에서는 다양한 문제가 발생하였습니다. 이 과정에서 발생한 문제들을 해결하고 최종적으로 완성된 코드를 아래 예제를 통해 쉽고 자세하게 알아보도록 하겠습니다. 파이어베이스 DB에 저장된 사용자 데이터를 가져와서 Text 위젯으로 보여주는 간단한 예제를 만들어 보겠습니다. DB 구조는, ‘userInfo’라는 컬렉션 밑에 사용자 uid로 된 문서가 있.. [Flutter] 심플한 팝업 메뉴 만들기 더 보기 버튼을 눌렀을 때 선택할 수 있는 목록을 표시하려면 PopupMenuButton 위젯을 사용하면 됩니다. 기본적으로 'more' 아이콘 버튼이 자동 생성되고, 버튼을 눌렀을 때 해당 위치에 팝업 메뉴가 뜨고 각 버튼에 행위를 지정할 수 있습니다. 아래 예제와 같이 아주 심플한 팝업 메뉴를 만들어 보겠습니다. import 'package:flutter/material.dart'; class PopUpMenuTest extends StatefulWidget { @override State createState() => PopUpMenuTestState(); } class PopUpMenuTestState extends State { @override Widget build(BuildContext c.. [Flutter] image_picker로 사진 업로드 화면 만들기 image_picker를 사용하면 간단하게 기기에서 사진 파일을 가져올 수 있습니다 image_picker를 사용해서 사진을 업로드하는 화면을 구현해보겠습니다 1. image_picker를 설치 Pubspec.yaml 파일 dependencies: 에서 image_picker: ^0.8.7 플러그인 추가 dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. image_picker: ^0.8.7 추가하고 Pub g.. Flutter GridView(그리드뷰) 사용 방법 GridView는 ListView와 유사한 기능으로, 화면에 grid 형태로 위젯을 배치하고 여러 장의 사진이나 쇼핑몰 아이템을 보여줄 페이지에서 주로 사용합니다 Sliver delegate 옵션을 사용하면 그리드 형태를 유지하면서 child 위젯의 크기를 자동으로 조정해줍니다. GridView.builder( shrinkWrap: true, // child 위젯의 크기를 정해주지 않은 경우 true로 지정해야됨 itemCount: 6, //item 개수 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount:3, //1 개의 행에 보여줄 item 개수 childAspectRatio: 1 / 1, //item 의 가로 세로의 비율 .. Flutter showDatePicker로 날짜 선택하기 showDatePicker()를 사용하면 달력을 띄워서 날짜를 선택할 수 있습니다 import 'package:flutter/material.dart'; class Calendar extends StatefulWidget { @override State createState() => CalendarState(); } class CalendarState extends State { DateTime date = DateTime.now(); // 선택한 날짜를 입력받을 변수 선언 @override Widget build(BuildContext context) { return Scaffold( body: Center( child: TextButton(onPressed: () async{ final selecte.. 이전 1 다음
