전체

[플러터 web] 플러터 웹과 Firebase 연동하기

[Flutter] 플러터 Web 개발하는 법 플러터는 앱&웹을 동시에 제작할 수 있다. 앱을 크롬과 같은 웹 브라우저에서 실행 시키는 건데, 전통적인 웹과는 인터페이스가 다르다. 디스코드를 생각하면 쉽게 이해가 될 것이다. 플러터 공 muhly.tistory.com 플러터로 웹을 빌드하는 방법은 위의 글을 참고하길 바란다. 이번에는 Firebase를 플러터 웹과 연결하는 방법을 알아보겠다. Firebase 패키지 추가하기 dependencies: flutter: sdk: flutter firebase_core_web: ^1.2.0 pubspec.yaml에 Firebase core web 패키지를 추가한다. 해당 패키지는 단순 연동을 위한 것이며, 데이터 입출력 혹은 로그인을 위해서는 추가 패키지가 필요하..

[플러터] onClick 속성이 가능한 Text 위젯

Text 위젯에서 Click에 따른 이벤트가 필요하다거나, 하나의 Text 라인에서 각 부분들이 다른 TextStyle을 가져야 할때, RichText라는 위젯을 사용한다. 구조가 조금 특이한 위젯이다. RichText라는 최상단 위젯에 text 속성으로 TextSpan 위젯을 준다. TextSpan 위젯은 children을 받을 수 있고, 여기에 TextSpan을 여러개 생성해서 넣어준다. RichText( text: TextSpan(children: [ TextSpan( text: '안녕하세요.', style: TextStyle(color: Colors.black)), TextSpan( text: '저는 ', style: TextStyle(fontWeight: FontWeight.w700)), Tex..

[플러터] 자식 클래스에서 부모 클래스에 데이터 전달

dart에서는 포인터가 존재하지 않는다. 따라서 부모 클래스에서 호출시킨 자식 클래스가 부모 클래스 내부 변수 값을 변화시키기 위해서는 부모 클래스에서 변수 값을 변화시키는 함수를 선언하고, 해당 함수를 자식 클래스의 매개변수로 넘겨주어야한다. 단순하게 설명해서 set, get 형태의 함수를 일반 함수로 선언하고 이를 자식 클래스의 생성자에 넘겨주는 것이다. 단, set,get 형태는 인수로 넘기고 받을 수 없으니 Function의 형태로 넘겨주어야한다. (혹은 typedef로 별도 타입을 생성해준다) 아래는 두 가지 방법의 예시이다. 재사용 가능한 형태의 예시1과 조금 더 간결한 형태의 예시2이다. 예시1. 부모 클래스에서 함수를 생성하고, 함수를 인수로 자식 클래스로 넘겨주는 방법 class Pare..

[Flutter 이슈해결] FirebaseException([core/no-app]

이슈 / 에러 FirebaseException ([core/no-app] No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp()) 해결 방법 플러터에서 파이어베이스 연동시 반드시 파이어베이스 초기화 함수를 호출해야한다. 공식 문서의 초기화 함수를 그대로 사용해도 에러가 발생해서 찾아보니, 초기화가 되기전 데이터를 불러와서 발생하는 문제였다. 따라서 파이어베이스 초기화 함수를 future로 변경하고 whenComplete로 다음을 진행하도록 하였다. 최상위 클래스인 MyApp을 stateful로 변경하고 아래의 코드를 추가한다. 이미 초기화 함수가 있는 경우는 초기화 함수를 future로 변경 후 whenComplete로 진..

[플러터] 웹을 깃허브로 배포 및 호스팅 하기

먼저, 플러터 웹 프로젝트를 생성하지 않았다면 아래의 포스팅을 따라 생성하고 오길 바란다. [Flutter] Web 개발 방법과 고찰 플러터는 앱&웹을 동시에 제작할 수 있다. 다르게 이야기하면 앱을 크롬과 같은 웹 브라우저에서 실행 시키는 건데, 전통적인 웹과는 인터페이스의 형태가 다르다. 플러터 공식 웹 샘플 https://gal muhly.tistory.com 플러터로 개발한 웹을 깃허브로 배포하여 깃허브 도메인으로 누구나 접근 가능하도록 하는 방법이다. 따라하기 우선 깃허브 계정이 있어야하고, IDE와 연동되어 있어야한다. 1. IDE의 터미널에서 아래의 내용들을 입력한다. flutter channel master flutter upgrade 플러터도 게임의 베타서버와 같이 개발채널, 안정화채널 ..