Grammer

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add qr_flutter

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  qr_flutter: ^4.1.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:qr_flutter/qr_flutter.dart';

출처 : 플러터 패키지 공식문서

QR

pubspec.yaml 파일에 qr_flutter dependencies 세팅을 해주고

qr을 출력할 파일에 qr패키지를 임포트 해줍니다.

[기본 형식]

데이터 부분에는 리스트, 텍스트 등 거의 모든 정보가 들어갈 수 있음.

사이즈를 이용해 QR 코드의 사이즈를 지정할 수 있다.

hild: QrImageView(
  data: 
  size: 
),

[예시]

저는 현재 개발중인 애플리케이션에 넣을 QR을 만들었는데, 데이터베이스에서 유저 정보를 가져와서 qr에 정보를 출력하는 형태로 개발을 했습니다.  (firebase 에서 정보를 가져와서 QR로 출력)

QrImageView(
  data: documentSnapshot['usernum']+documentSnapshot['username'],
  size: 300,
),

Firebase 가 정상작동하려면 우리는 꼭 아래와 같은 명령어를 

await Firebase.initializeApp()

void main() async {
  // await Firebase.initializeApp()
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

 
 
runApp 이 있는 메인함수에 async 를 주고 넣어야 한다. 이는 Firebase 가 시작하기 전 초기화를 하여 정상적으로 작동할 수 있게 하는거라고 하는데, 만약 이 명령어를 써넣지 않으면
 
 
 

 
 
이러한 앱을 구동해도 이런 화면이 뜨면서 Firebase.intializeApp 명령어를 콜하라고 한다. 그래서 나는 firebase 문서를 찾아보고 위와 같이 명령어를 추가해 작동시켰는데, 아래와 같이 하얀창이 뜬 상태로 앱이 정상 작동하지 않았다. 처음에는 그냥 간단한 오류라고 생각했지만, 해결하는데는 정말 오랜시간이 걸렸다.
 
 

 
 
Flutter의 생태계가 좁아서 그런지 국내자료는 오류관련해서는 찾아볼 수도 없었고, Stackoverflow 를 뒤져보았다. Flutter clear 하고 rebuild 하는 방법도 있었고, 환경변수를 설정해야한다는 해결책도 있었지만, 모두 나에게는 해결책이 되지 못했다.
 
 

void main() async {
  await Firebase.initializeApp(
    options: const FirebaseOptions(
      apiKey: "",
      appId: "",
      messagingSenderId: "",
      projectId: "",
    ),
  );
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

 
 
본론부터 말하자면 내 해결책은 이것이었다. Firebase 콘솔에서 Firebase 프로젝트에 연결된 Flutter 프로젝트들의 설정에 들어가면 위와 같은 apikey, appid, messagingSenderId, projectId 를 모두 찾을 수 있다.
 

 
 
apikey 는 그냥 웹 api 키 붙여넣으면 되고,
 
 

 
앱 id는 아래로 내려보면 나온다.
 
 

 
 
messagingSenderId 는 위의 메뉴 중 클라우드 메시징을 누르면 아래에 발신자 ID가 나오는데 그것이다.

 
 
마지막 프로젝트 아이디는 그냥 프로젝트 아이디이다. (일반 메뉴에 있다.)
 
복붙을 모두 끝내고 이제 실행한다면 Firebase가 잘 연동된 상태로 실행될 것이다. 하루종일 Stackoverflow 를 뒤지고 이 방법을 찾아서 성공했을때 쾌감은 쩔었다. 만약 이 방법으로 했는데도 실행이 되지 않는다면, Stackoverflow 에서 찾아봐라 프로젝트를 rebuild 해야하는데 이건 쉬우니깐 대충 찾다보면 나온다. 모르겠으면 댓글 쓰시고, 다른 오류가 있다면 같이 해결을 도와줄테니깐 댓글 남기길 바란다. rebuild 명령어는 안드로이드 스튜디오에서 터미널 연 다음에 하면 된다.

객체나 함수를 사용할 때, 파라미터 값이 null이면 해당 함수나 객체를 사용할 수 없게 된다. 이렇게 되면 오류가 발생하는데 이를 방지하는 것이다. 

예를 들어 회원 가입을 할 때, 문자의 유효성을 검사하는 validator(가입자가 입력한 이메일 주소가 명확한지, 비밀번호에는 숫자, 기호, 문자가 알맞게 배치되어 있는지 검사)에서는 입력된 값을 필요로 한다.

하지만, 입력자가 입력을 하기 전까지는 값이 생기지를 않을 것이고, 그렇게 되면 validator 객체에는 파라미터로 null 값을 갖게 된다.

이처럼 오류가 발생하고 실행할 수 없게 되는데, 이를 방지하기 위해 !를  null 값을 방지한다. 

이런식으로 !를 붙여서 null 값을 방지해주었다. 하지만, 플러터에는 null 로 인해 오류가 일어난다면 이런식으로 수정을 해주기 때문에

오케이다. 공부를 하다가 널체크에 대해 궁금해져서 한번 찾아보고 글을 남겨보았다.

flutter firebase 연동을 알려주는 강의 영상을 봤는데, 강의가 업로드 된 후로 시간이 꽤 지나서인지 그냥 따라서 연동시킬 때는 오류가 꽤 발생했습니다. 이러한 부분에 혼동이 생길 분들을 위하여 연동 방법을 남깁니다.
 
 
 
firebase 홈페이지로 들어갑니다
https://firebase.google.com/?hl=ko 

 
 
 
홈페이지에 들어오셨으면 바로 시작하기 버튼을 눌러줍니다.

 
 
 
이곳의 새프로젝트 버튼을 눌러주시고, 그냥 다 동의하고 넘어오셔서 프로젝트를 만들어주세요.

 
 
 
 
그러면 이 윗부분에 앱 추가 버튼이 있는데 이제는 flutter 를 고르시면 됩니다.

 
 
 
 
들어가면, firebase cli 설치와 flutter sdk 설치를 하라고 하는데 첫번째 링크로 firebase cli를 설치해줍니다.

 
 
 
알맞은 OS의 버튼을 누르시면 맞는 방법으로 이동하게 됩니다.

 
 
 
 
Windows는 아래의 독립실행형 바이너리를 설치한 뒤 설정하면 됩니다.

 
 
 
 
Firebase CLI 를 설치하면 이런 화면이 뜨고 세팅을 자동으로 해주는데, 그냥 계속해서 로그인해 줍니다.

 
 
 
 
하다보면 아래와 같은 링크를 주는데, 들어가서 인증을 해줍시다.

 
 
 
들어가서는 별 절차 없이 로그인하고 Allow 버튼만 눌러주면 끝입니다. 그 뒤에는 Firebase CLI를 윈도우 환경변수에 등록해주어야 합니다. 검색창에 '환경변수' 라고만 치면 나옵니다.
 
 
아래의 환경변수 버튼을 눌러주고

 
 
 
들어가서 위쪽의 환경변수 path를 편집해줍니다.

 
 
 
저희는 firebase cli 의 path를 등록할 것이기 때문에 firebase cli 의 경로를 복붙해서 추가해줍니다.
 
 
다음은 연동하려는 flutter project에 firebase core를 설치해줍니다.
flutter pub add firebase_core (플러터 터미널을 열어서 그안에 이 코드를 복붙하시면 됩니다. 저는 안드로이드 스튜디오를 사용했습니다.)
 

 
 
끝났으면 다음은 플러터 프로젝트의 디렉터리 루트에서 명령어를 실행하라고 하는데, CLI 에 들어가서
cd (플러터 프로젝트 이름) 해준 뒤 명령어들을 복붙해서 실행해줍니다.

 
 
 
 
그 뒤에 firebase 연동한 플러터 프로젝트에 위쪽 내용들을 import 해주고 main 함수 runapp 아래에 아래 내용들을 복붙해줍니다.
 

 
 
 
하지만 이 코드들만으로는 에러가 발생하므로 WidgetsFlutterBinding.ensureInitialized(); 라는 코드를 추가해줍니다.

 
 
firebase 연동 끝!

+ firebase CLI 에서 firebase 와 flutter 프로젝트 생성
 
 
그 뒤에는 firebase project 를 생성해주어야 합니다.
firebase projects:create (프로젝트 이름) 해주시면 됩니다. 이름은 최대한 안 겹치는 개성있는 이름으로 해주셔야 합니다.

 
실행하고서 중간에 갑자기 멈춘다면 그냥 enter 눌러주시면 됩니다.
 
 
그 다음은 flutter project 를 생성할건데, flutter create (프로젝트 이름) 해주시면 됩니다.

 이 가이드에서는 플러터에 대한 원리나 지식을 배제하고, 어떻게 플러터를 사용하는지에 대한 전반적인 감을 전달하는데에 초점을 맞추었습니다. 

 플러터는 구글에서 개발한 크로스 플랫폼 프레임워크로 안드로이드와 ios 환경의 앱을 모두 개발할 수 있습니다.
저는 과거, 혼자서 앱을 개발하고 싶었지만, 혼자서 두가지 환경을 개발할 수 없었기에 플러터 개발을 선택했습니다.
거두절미하고 본격적으로 플러터 개발에 앞서, 플러터를 설치하는 방법을 이번편에서는 플러터를 설치하는 방법에 대해서 알려드리겠습니다. 
 
저희는 안드로이드 스튜디오를 통해서 플러터를 개발할 것입니다. 프로그램 이름만 들으면 안드로이드 환경의 개발만 될 것 같지만, ios 도 가능합니다.
 
 

 
1. 플러터 설치
 
flutter 홈페이지에서 설치하실 수 있습니다.
https://flutter.dev/
 
 
우측 상단에 Get started 버튼을 클릭하시면 다운로드 페이지로 이동합니다. 

 
 
그 뒤엔 사용하시는 운영체제에 따라서 플러터를 설치하시면 됩니다.

 
 
조금만 내리면 Flutter SDK 설치 부분이 있는데, 이 zip 파일을 설치해주시면 됩니다.
 

 
mac 도 마찬가지.

 
 
파일을 다운로드 하신뒤에는 압축을 풀어서, 아무곳이나 잘 보이는 곳에 저장하시면 됩니다.
 
 

 
 
2. 안드로이드 스튜디오 설치
 
안드로이드 스튜디오도 홈페이지에서 잘 다운로드 받으시면 됩니다.
https://developer.android.com/?hl=ko 

 
 
다운로드 누르시면, 설치화면으로 이동되는데 giraffe 그거 다운로드 버튼 누르시면 됩니다.

 
 
클릭하시면, 약관동의같은게 뜨는데 다 동의하면 다운로드 진행하실 수 있습니다.

 
 
설치도우미 뜨면, 그냥 설치하시면 됩니다. 중간에 체크하는 부분에 virtual device 어쩌고 나오는데 그거는 개발하는데 지장 없으니 설치 건너뛰셔도 되고요.
 
 
저는 이미 설치가 되어있어서 원래 깔려있던걸 지우라고 뜨네요.

 
 
3. 안드로이드 스튜디오 개발환경 세팅
 
안드로이드 스튜디오 설치가 끝나셨다면, 몇가지 세팅을 해야합니다.
 
 
안드로이드 스튜디오가 딱 처음 설치되고 실행하면, 이러한 화면이 뜨실겁니다.
여기서 좌측메뉴 중 Plugins 부분을 클릭해줍니다.

 
 
Plugins 창에 들어가시면 바로 Flutter 가 보이실텐데 바로 설치하시면 됩니다. (4번째에 있습니다.)

다시 원래의 Projects 화면으로 돌아오셔서 아랫부분에 More Actions 를 누르시면, SDK Manager 라는 버튼을 볼 수 있는데 이걸 눌러줍니다.

 
 
들어가시면 SDK Tools 라는 탭이 있는데 이걸 클릭해주신 다음

 
 
Android SDK Command-line Tools 를 체크한 다음 아래 Apply 버튼을 눌러주시면 됩니다.

3. Window 환경변수 등록
 
검색창에서 환경변수 편집을 찾아 실행시켜줍니다.

 
 
 
들어오셨다면 아래에 환경변수를 클릭해줍니다.

 
 
그 뒤에는 위쪽 박스의 변수 path라 되어있는 부분을 눌러 편집버튼을 눌러줍니다.
(아래 사진에서는 path 가 아닌 OneDrive가 눌러져있는 상태입니다.)

 
 
편집을 누르셨으면 아래같은 화면이 보이실텐데, 새로만들기 버튼을 눌러줍니다.

 
그리고 이 안에는 파일 경로를 복붙해야하는데, 아까 압축을 풀어뒀던 플러터 파일의 bin 폴더까지의 경로를 복붙해주시면 됩니다.

 
플러터 파일에 들어오셔서, 아래의 bin 폴더를 누르신 후에

 
위쪽에 경로를 두번 클릭하시면 됩니다.

 
 
그리고 이 부분에 복사 붙여넣기하시고, 확인 버튼을 누르시면 끝

 
4. Flutter Doctor
 
여기까지 설치가 완료되었다면, 세팅을 검사하시면 되는데 그게 Flutter Doctor 입니다.
 
먼저 window powershell 이나 cmd 창을 열어줍니다.
 

 
 
cmd 창을 실행하시고, flutter doctor라고 치신 뒤 enter 를 누르시면 좀 있다가 검사를 해줍니다.

 
 
이 중에서 visual studio 부분은 x표시 뜨셔도 됩니다. 하지만, 다른 부분에서 문제가 있다면 해결해주셔야 합니다.

 
 
문제
1. flutter 설치 문제
2. 윈도우 버젼
3. 안드로이드 sdk 문제
4. 크롬 설치
...
 
이중에서 다른 것들은 이젯동안 설치한거라서 문제는 없을 겁니다. 하지만, 크롬은 필수적으로 설치해주셔야 합니다.
크롬 설치 문제이외에도 다른 문제가 뜬다면 그건 검색하셔서 해결하시면 대충 다 될겁니다.
 
 

 
 
5. 프로젝트 시작
 
설치를 마쳤으니 이젠 안드로이드 스튜디오에 들어가셔서 New Flutter Project 를 클릭하신 뒤.

 
왼쪽 메뉴에서 플러터를 클릭하신 뒤, SDK path로 전에 압축을 풀어둔 flutter 파일의 경로를 복붙해주시면 됩니다.
이번에는 bin 폴더가 아니라 그냥 플러터 폴더입니다.

 
 
그 다음에 대충 프로젝트 제목이랑 아래 platform 설정하신뒤 프로젝트 생성시키시면 됩니다.

 
 
왼쪽 메뉴를 보시면 굉장히 다양한 파일들이 있는데 간단하게 생각하시면 됩니다. 쓸일이 없는 경우가 더 많거든요.
일단은 딱 2개만 기억하시면 됩니다. lib, pubspec.yaml 두가지만요.

 
 
lib 폴더를 여셔서 main.dart 파일을 실행시키시면, 이렇게 많은 코드들이 있을 겁니다. 이건 다 쓸모없으니깐,
5번째 줄 아래로는 다 지워주셔도 됩니다.
 

위쪽에 import  와 main 함수, 파이썬이나 C를 배우시면 대충 뭔지 아실텐데 코드 한번 보시면서 flutter 설치 가이드를 마치겠습니다. 
 
모두모두 즐플러터하세요~~