본문 바로가기

728x90

Flutter11

[Flutter] Flutter 레이아웃 쉽게 이해하기 - 1 (feat. Column,Row,MainAxisAlignment,CrossAlignment) 안녕하세요 Foma 💻 입니다! 정말 오랜만에 Flutter를 다시 공부하는데.. 레이아웃 하는 방법이 iOS와는 달라서.. 헷갈리더라구요. 그래서 레이아웃 하는 방법을 쉽게 이해하기 위해서 글을 정리해보려고 합니다! 바로 시작할게요~ Column 먼저 컬럼 위젯부터 다뤄보겠습니다. 컬럼은 "행"을 뜻하죠? 즉, 세로로 위젯들을 배치하고 싶을 때 사용하는 위젯입니다. 아래와 같이 아무런 옵션을 주지 않으면 왼쪽 상단에 배치되게 됩니다. Column(children: [CircleAvatar(radius: 50.0)]) 컬럼 안에 여러 개의 위젯을 넣으면 아래와 같이 세로로 배치되게 됩니다. Column(children: [CircleAvatar(radius: 50.0), CircleAvatar(radiu.. 2021. 12. 11.

[Flutter Error] CocoaPods could not find compatible versions for pod "cloud_fire 안녕하세요 Foma 💻 입니다! 오늘은 오랜만에 플러터 공부를 하는데 파이어베이스와 연동 과정에서 오류가 발생했습니다. 제목처럼 "CocoaPods could not find compatible versions for pod "cloud_firestore": In Podfile" 라는 에러였습니다. 해석을 해보니 "코코아팟에서 파이어스토어가 호환된느 버전을 찾을 수 없어" 였습니다. 해결 방법은 Flutter 프로젝트의 iOS 폴더로 이동하면 Podfile이 있을거에요. 아래와 같이 Podfile에서 #platform:ios, '9.0' 이라고 적혀있을거에요. 이 부분을 #을 없애주고 ios버전을 10.0으로 올려주면 에러가 해결될겁니다. platform :ios, '10.0' 2021. 11. 12.

[Dart] Mixin이란? (feat. 여러 클래스 상속받기) 안녕하세요 Foma👟 입니다! Dart에 대한 첫 글을 쓰게 됐는데요. 오늘은 Dart에서 여러 클래스의 코드를 재사용할 수 있는 Mixin에 대해서 알아보겠습니다. 바로 시작할게요~ Mixin이란? 공식 문서에는 아래와 같이 나와있습니다. "Mixin은 여러 클래스 계층에서 클래스 코드를 재사용하는 방법입니다." 덧붙여 Mixin을 사용하기 위해선 with 키워드를 사용해 이름을 적어주면 된다고 나와있습니다. Example 아래와 같이 클래스들이 있다고 가정할게요. 보통 아래와 같이 Player 클래스를 만들고 아래 하위 클래스는 상위 클래스를 상속받아서 메소드를 사용합니다. class Player { void play() { print("경기하는 중..."); } } class BasketBallPl.. 2021. 8. 21.

[Flutter] 플러터 웹 배포하기(feat.Fireabse hosting) 안녕하세요 Foma 👟 입니다! 오늘은 파이어베이스 호스팅 통해 플러터로 만든 웹을 배포하는 방법에 대해서 정리하려고 합니다. 바로 시작할게요~ 플러터 프로젝트 생성 비쥬얼 스튜디오에서 cmd + shift + p 를 눌러서 새로운 플러터 프로젝트를 생성해줍니다. Firebase Hosting 터미널로 이동해서 아래와 같이 파이어베이스 툴을 설치해줍니다. sudo npm install -g firebase-tools 파이어베이스 호스팅 초기 설정을 해줍니다. firebase init hosting 1. Create a new project 새로운 프로젝트를 파이어베이스에 만들어줍니다. 2. Google Cloud project id 원하는 이름으로 정해줍니다. 3. 원하는 프로젝트로 아이디로 설정 아래와.. 2021. 6. 12.

[Flutter] 화면 이동하기 (Navigator Push & Pop) 안녕하세요 Foma 👟 입니다! 오늘은 플러터에서 두 화면(ScreenA와 ScreenB)을 서로 이동하고 되돌아오는 방법에 대해 정리하도록 하겠습니다! 바로 시작할게요~ ScreenA ScreenA를 만들어줍니다. import 'package:flutter/material.dart'; class ScreenA extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Screen A page"), ), ); } } ScreenB ScreenB를 만들어줍니다. import 'package:flutter/material.dart'; class Screen.. 2021. 6. 12.

[Flutter Error 해결법 포함] Unable to load asset: packages/rflutter_alert/assets/images/close.png 안녕하세요 Foma 입니다! 플러터에서 새로운 패키지를 추가하고 실행하는데 아래와 같이 애셋을 로드할 수 없다고 에러가 떴어요. 아니.. 패키지 안에 있는 애셋이 없으면 어쩌자는 거지? 라고 생각했는데.. 해결법은 간단하게 flutter clean 을 해주면 됐습니다... (flutter clean은 만능이네요...) 2021. 5. 9.

[Flutter Error 해결법 포함] ** BUILD FAILED **Xcode's output:↳ ld: framework not 안녕하세요 Foma 입니다! 오늘 만나게 된 에러는 제목과 같이 플러터 프레임워크를 찾지 못했다는 오류였습니다. 맥 용량이 거의 다 차지해서 파일을 정리하는 와중에 실수로 지운거 같아요.. 그래서 어떻게 해결할지 구글링해본 결과 방법을 알게 돼서 공유해드리려고 합니다. 먼저 터미널에 Flutter upgrade 를 쳐서 Flutter를 다시 다운로드 해줍니다. flutter upgrade 정상적으로 다운로드가 됐다면 아래와 같이 뜰거에요! 그리곤 flutter run 을 입력해서 시뮬레이터를 실행시켜줍니다. flutter run 이렇게 하면 정상적으로 앱이 실행될거에요! Reference ld: framework not found Flutter When I build flutter project for .. 2021. 5. 9.

[Flutter] 오픈소스 패키지 사용해보기(Using opensource package) 안녕하세요 Foma 입니다! 오늘은 Flutter에서 Pub으로 외부 패키지를 사용해보도록 하겠습니다. iOS로 따지면 Pub은 CocoaPod이고 패키지는 라이브러리를 뜻하는 것 같네요. 바로 시작할게요~ Dart packages 먼저 pub.dev라는 사이트로 이동해주세요. 이 사이트는 다양한 오픈소스들을 사용할 수 있는 검색하고 사용하는 법에 대해 나와있는 사이트입니다. Dart packages Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, and general Dart programs. pub.dev 저는 여기서 e.. 2021. 4. 18.

[Flutter] StatelessWidget과 StatefulWidget의 차이점 안녕하세요 Foma 입니다! 오늘은 플러터에서 가장 기본적인 StatelessWidget과 StatefulWidget의 차이점에 대해서 알아보려고 합니다! 바로 시작할게요! StatelessWidget 공식 문서를 해석해보면 "변경 가능한 상태가 필요하지 않은 위젯" 이라고 하네요. 예를 들면 아래와 같은 화면은 더 이상 변경될 일이 없으므로 상태가 필요없는 위젯입니다. 그러므로 StatelessWidget으로 만들어주면 됩니다. class MyApp extends StatelessWidget {...} StatefulWidget 공식 문서를 해석해보면 "변경 가능한 상태를 가진 위젯" 이라고 되어있습니다. 그렇다면 State는 어떤 일을 할까요?🤔 1.위젯이 빌드 될 때 동기적으로 읽는다. 2.위젯의 .. 2021. 4. 18.

[Flutter] 이미지와 폰트 적용하기 (Image & Font) 안녕하세요 Foma 입니다! 오늘은 이미지와 폰트 적용하는 법에 대해서 정리해보겠습니다. (비쥬얼 스튜디오 기준으로 설명드릴게요) 바로 시작할게요~ 1. 이미지 비쥬얼 스튜디오에 images파일을 만들어주세요. images 안에 이미지 파일을 넣어주세요. pubspec.yaml 파일로 이동하셔서 아래와 같이 파일 경로와 이미지 이름을 넣어주세요. assets: - images/profile.png AssetImage에 이미지 경로와 이름을 넣어주세요. CircleAvatar( radius: 50.0, backgroundImage: AssetImage('images/profile.png'), ), 이렇게 하면 아래와 같이 이미지가 적용됩니다. 2. 폰트 먼저 아래 구글 폰트 사이트로 가서 원하는 폰트를 다.. 2021. 4. 11.

[Flutter Error 해결법 포함] Unimplemented handling of missing static target 안녕하세요 Foma 입니다! 오늘 만난 에러는 Flutter 프로젝트를 시작하려고 하는데 아래와 같이 Unimplemented handling of missing static target 이라고 뜨더라구여.. 해결법은 flutter clean을 한 뒤 flutter 프로젝트를 다시 run 하면 됩니다!! Reference Flutter: Unimplemented handling of missing static target I am running my first Flutter project I created a sample project and I was able to run the app in simulator I have edited the file main.dart main.dart import 'p.. 2021. 4. 4.

이전 1 다음

728x90

티스토리툴바