개발40 Flutter 기본 파일 구조 flutter의 기본적인 파일 구조는 다음과 같다. 안드로이드 스튜디오를 사용에 익숙한 안드로이드 개발자 라면 폴더 구조가 어색할 수 있는 자세히 보면 그리 어렵거나 어색하지 않다. 샘플로 구성한 프로젝트의 폴더 구조를 보자 중요한 폴더 및 파일 android 는 말그대로 안드로이드 프로젝트 폴더 이고 ios는 ios 프로젝트 폴더이다. build는 build된 파일들이 자동으로 생성되는 폴더이다. 여기까지는 다 아는 내용 혹은 알 수 있는 내용이고 flutter와 관계된 파일, 폴더 중 중요한 내용들은 아래 이름을 가지고 있다. lib - flutter 파일(dart)들은 lib 폴더 아래 만들게 된다. test 폴더는 위젯 테스트 및 유닛 테스트 파일을 만드는 폴더 이다. web 폴더의 경우는 프로젝.. 2022. 12. 20. Flutter TickerProviderStateMixin Animation 을 만들때, TabBar를 만들때 필수로 사용하게 되는 TickerProviderStateMixin 클래스에 대해서 알아보자 먼저 공식 문서를 살펴보자 https://api.flutter.dev/flutter/widgets/TickerProviderStateMixin-mixin.html TickerProviderStateMixin mixin - widgets library - Dart API Provides Ticker objects that are configured to only tick while the current tree is enabled, as defined by TickerMode. To create an AnimationController in a class that .. 2022. 6. 9. Flutter Tab layout (TabBar, TabBarView, TabController) Flutter에서 tab 레이아웃을 만드는 방법에 대해서 알아보자 우선 flutter에서 tab의 기본구조에 대해서 알아보자면 tab layout을 만들기 위해서는 TabBar, TabBarView, TabController 이렇게 3개의 위젯이 필요하다. TabBar는 상단 tab TabBarView는 tab의 인덱스에 따라 바뀌어야 하는 View 이고 TabController는 이 둘을 연결해 주는 역할을 하는 연결자라고 보면 이해하기 쉽다. 우선 가장 기본적으로 사용하는 방법에 대해서 알아보자. 다음 애니메이션은 flutter.dev에서 제공하는 기본 코드를 실행한 결과 이다. 위 동작을 가능하게 해주는 코드 이다. import 'package:flutter/material.dart'; void m.. 2022. 6. 2. Flutter: FCM Unhandled Exception: Null check operator used on a null value Flutter fcm관련 설정을 하면서 다음과 같은 오류를 만난다면 FirebaseMessaging.onBackgroundMessage() 핸들러의 위치를 다시한번 살펴보길 바란다. Unhandled Exception: Null check operator used on a null value 풀 소스를 보자면 다음과 같다. Future _firebaseMessagingBackgroundHandler(RemoteMessage message) async { await Firebase.initializeApp(); //message 처리 코드 return Future.value(); } Future main() async { WidgetsFlutterBinding.ensureInitialized(); Fire.. 2022. 5. 15. Flutter Stack Flutter Stack은 Widget을 겹쳐 놓을 수 있게 해주는 Widget 이다. 우선 다음 이미지를 먼저 보자 왼쪽은 Column으로 Text와 Icon을 넣은 경우이고 오른쪽은 Stack에 Text와 Icon을 넣은 경우이다. Stack의 경우는 포토샵의 레이어 처럼 여러 위젯을 겹쳐 놓을 수 있다. 아래는 위 이미지의 소스 이다. Icon은 font_awesome_flutter package를 이용했다. 기본 Icon을 이용해서 테스트 해봐도 된다. import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; void main() { runApp(const MyApp(.. 2022. 4. 21. Flutter error - crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null"textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline" crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null "textBaseline is required if you specify the crossAxisAlignment with CrossAxisAlignment.baseline" baseline 속성값을 적용하려는데 위와 같은 오류를 맞이 했다면 당황하지 말고 textBaseline 속성을 추가 하자. 원하는 대로 baseline이 정렬된 결과를 얻을 수 있을 것이다. Row( //수직축 관련 속성 crossAxisAlignment: CrossAxisAlignment.baseline, //CrossAxisAlignment.baseline 속성을 위해서는 꼭 필요한 속성이다. t.. 2022. 4. 20. 이전 1 2 3 4 5 6 7 다음
