칠구의 블로그

🔗순서0. json 데이터 준비 1. 데이터 모델 클래스 생성 2. json 데이터 파싱 3. json 데이터 로드JSON 데이터 파싱 순서는 이렇게 정리해 보았다.  0. json 데이터 준비0번은  json 데이터 준비라고 했는데 내 로컬주소의 json 데이터를 사용해도 되고외부 url를 이용해도 된다. 나는 화면처럼 KBO리그 순위를 나타내기 위한 팀별 성적을 json 데이터로 가져와서 보여주도록 했다. assets/data/data.json 경로로 json 데이터를 만들어주었다.--> 이거를 사용하기 위해서는 pubspec.yaml에 flutter:  assets:    - assets/data/json 경로를 추가해줘야 한다.[ { "rank" : "1", "im..

https://nanifood.tistory.com/35 [flutter] flask 서버를 이용한 로그인 , 회원가입파이썬 - 회원가입 및 로그인 코드 from flask import Flask, jsonify, request from flask_sqlalchemy import SQLAlchemy from flask_cors import CORS app = Flask(__name__) CORS(app) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db' db = SQnanifood.tistory.com이번에는 저번에 로그인/회원가입에 이어서 자동 로그인 기능을 구현하겠다.사실 저번에 필요한 부분은 다 세팅을 해놔서 의외로 쉽게 ..

파이썬 - 회원가입 및 로그인 코드 from flask import Flask, jsonify, request from flask_sqlalchemy import SQLAlchemy from flask_cors import CORS app = Flask(__name__) CORS(app) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db' db = SQLAlchemy(app) class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(20), unique=True, nullable=False) password = db.Column(d..

이번엔 플라스크 서버와 플러터를 연동해서 서버 내용을 플러터 화면에 보여주는 걸 적어보도록 하겠다. 0,제품명,카테고리,전면사진,후면사진,알레르기성분 1,신라면(봉지),라면,신라면봉지-1.jpg,신라면봉지-2.jpg,밀 대두 돼지고기 계란 쇠고기 8801043015714,신라면 컵,라면,이미지2-1.jpg,이미지2-2.jpg,밀 대두 우유 계란 쇠고기 8801043015981,신라면 큰 사발면,라면,이미지3-1.jpg,이미지3-2.jpg,밀 대두 돼지고기 우유 계란 쇠고기 서버에 이런DB가 저장되 있을 때 이렇게 화면에 보여준 모습이다. 진행과정 1. 서버 및 DB 만들기 (플라스크) 2. DB에 데이터 넣기 3. 플러터 화면 구현 및 서버 연동 먼저 플라스크는 SQLAlchemy을 사용하고 CSV를 통..

FAQ는 frequently asked questions의 약자로 자주 묻는 질문들이라는 뜻이다. 요즘 앱들을 보면 FAQ를 자주 접할 수 있다. 이번엔 그걸 구현해 보겠다. FAQList 클래스 선언하기 -> 내가 원하는 곳에 적용하기 짧게 요약하면 이렇다 먼저 StatelessWidget에 선언한다 class FAQList extends StatelessWidget { const FAQList({super.key}); @override Widget build(BuildContext context) { return const SingleChildScrollView( child: Padding( padding: EdgeInsets.symmetric(horizontal: 3.0), child: Column..

저번에 image_picker에 이어 이번엔 OCR 기술을 이용해서 텍스트를 인식해본다. 영상은 카메라로 찍은 이미지지만 당연히 갤러리에 있는 이미지도 OCR이 잘 작동한다. flutter_tesseract_ocr | Flutter package (pub.dev) flutter_tesseract_ocr | Flutter package Tesseract 4 adds a new neural net (LSTM) based OCR engine which is focused on line recognition. It has unicode (UTF-8) support, and can recognize more than 100 languages. pub.dev OCR은 tessract를 사용했다. 위의 사이트에 들어..

이번엔 위의 사진처럼 플러터(프론트)와 플라스크(벡) 연동을 해보겠다. 파이썬과 플라스크가 설치되어 있다고 가정하고 진행해보겠다. 1. flask 설치 및 파이썬 파일 준비 먼저 플라스크를 설치 설치 방법은 터미널에 pip install flask 을 입력해주면 설치가 된다. 그후 파이썬 파일 준비 from flask import Flask, jsonify from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/') def home(): data = {'message': 'Hello, World!', 'user': '남빈'} return jsonify(data) if __name__ == '__main__': app.run(deb..

ocr을 사용한 앱을 개발 중인데 갤러리에서 가져온 이미지는 ocr이 잘 적용하는데 카메라로 찍은 이미지는 ocr이 되지 않고 Null check operator used on a null value 이 오류가 자꾸 발생했다 ㅠㅠ GPT , POE , 구글링 등등으로도 해결이 안 되다가 이번에 드디어 해결했다. 참고로 난 tesseractocr을 사용했고 이 오류 때문에 엄청 애먹었는데 이 글을 보고 조금이나마 도움이 됐으면 좋겠다 한 줄 요약 : 카메라로 찍은 사진이 갤러리에 저장되게 하고 여기서 이미지를 가져와 OCR 수행시킴 오류 먼저 오류가 나던 코드다 import 'package:flutter_tesseract_ocr/flutter_tesseract_ocr.dart'; import 'packag..

위의 사진처럼 버튼을 클릭하면 달력이 나오고 라디오버튼(팝업 다이얼로그)이 나오도록 구현해 보자 달력(datepicker) 달력을 먼저 살펴보자 class DatePickerButton extends StatefulWidget { const DatePickerButton({ Key? key, this.label = '' this.hintText = '', this.icon, this.iconColor = Colors.grey, this.hintTextColor = Colors.grey, this.borderRadius = const BorderRadius.all(Radius.circular(12.0)), this.buttonWidth = double.infinity, this.buttonHeight = ..

위의 사진처럼 알림상자인 다이얼로그를 구현해보겠다. ElevatedButton( onPressed: () { // 다이얼로그 표시 showDialog( context: context, builder: (BuildContext context) { return AlertDialog( content: Text('문의가 성공적으로 접수되었습니다.'), actions: [ TextButton( onPressed: () { Navigator.of(context).pop(); // 다이얼로그를 닫음 }, child: Text('확인'), ), ], ); 버튼을 클릭하면 "문의가 성공적으로 접수되었습니다." 라는 창이 뜨는 다이얼 로그가 뜬다 "확인" 버튼을 누르면 다이얼로그가 닫힌다 onPressed를 밑에 Navi..