오늘은 flutter에서 페이지에서 페이지로 화면 이동을 이동해 보겠다. 페이지 이동 페이지 이동을 나타내기 위해 처음 화면과 이동할 화면을 만들어준다. 처음 화면 class _TestScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('화면 이동'), ), body: Center( child: TextButton( child: const Text('Go to Page'), onPressed: () {}, ), ), ); } } 이동할 화면 class NewPage extends StatelessWidget { const NewPag..
오늘은 앱 안에서 화면이동 시 가장 많이 사용되는 bottom navigation bar를 만들어 보겠다. 시작하기 앞서 이 글에서 bottom navigation bar는 편하게 "bnb" 라고 하겠다. scffold에 있는 bnb 위젯을 통해 bnb를 생성할 수 있다. 또한 bnb 위젯은 BottomNavigationBarItem을 List로 받는다. items에 BottomNavigationBarItem을 아이콘과 함께 추가해줍니다. 이제 item을 클릭시 화면이 변하게 구현해 보겠습니다. 페이지에 순서를 나타내는 index를 만들고 initstate에서 0으로 지정해 줍니다. BottomNavigationBar에서 currentIndex를 index로 지정해주고 클릭이 될 때마다 클릭이된 새로운 ..
오늘은 flutter에서 디버그 배너를 없애는 방법을 알아보겠다. flutter에서 디버그를 실행하면 우측 상단에 디버그 배너가 보인다. 코드에 영향을 주는 것은 아니지만 보기 불편할 때가 있는데 이때 간단한 코드 작성으로 디버그 배너를 삭제 할 수 있다. 앱을 제작하면 처음에 MaterialApp을 사용하게 되는데 MaterialApp에 debugShowChckedModeBanner라는 속성이 있다. 이것을 false로 변경해주면된다. 결과화면
지도를 사용하다 보면 현재 위치 버튼이 필요한 경우가 있다. 오늘은 flutter에서 네이버지도 사용 시 현 위치 버튼을 만들고, 위치 동의를 받는 법도 알아 보겠다. 패키지 문서 확인 flutter에서 패키지 사용 시 어떤 설정을 만지고 싶다면, 가장 먼저 해야 할 것은 패키지를 만든 개발자 문서를 보는 것이다. 네이버지도를 사용하기 위해 flutter_naver_map 패키지를 사용했으니 아래의 공식 문서에서 찾아보겠다. flutter_naver_map docs | flutter_naver_map flutter_naver_map docs note11.dev 공식문서에 들어가 보면 섹션별로 아주 자세히 분류가 된 것을 확인할 수 있다. 우리는 현 위치 위젯을 만들고 싶은 거니 위젯 부분을 확인해 보겠다..
오늘은 플러터에서 플랫폼 위젯을 통해 Andorid, Ios을 분기처리를 하는 방법에 대해 알아보겠습니다 사전배경 여기 두개의 스위치가 있습니다. 위에는 안드로이드의 Meterial 디자인이고, 아래는 Ios의 Cupertino 디자인이다. Platform 사용 만약 사용자가 사용하는 플랫폼별로 원하는 스위치를 보여주려면 어떻게 할까? 바로 Platform을 활용해 주는 것이다. Platform을 입력 후 콤마(.)를 찍고 원하는 플랫폼을 선택한다. 이후 QQ Operator을 사용하여, Ios 일때는 CupertinoSwitch를 Android 일때는 기본 Material Switch를 사용하겠다. 이후 플랫폼별 실행을 해보면 각각에 플랫폼에 맞게 Switch가 보이게 된다. Android 결과화면 I..
오늘은 앱을 처음 시작했을 때 보이는 splash 화면을 쉽게 설정하는 법을 알아보겠습니다. 패키지 다운 splash 화면을 쉽게 적용시켜주는 flutter_native_splash 패키지를 다운한다. flutter pub add flutter_native_splash flutter_native_splash | Flutter Package Customize Flutter's default white native splash screen with background color and splash image. Supports dark mode, full screen, and more. pub.dev 이미지 준비 기본 이미지 사이즈 : 768 x 768 android12 이미지 사이즈 : 1152x1152..
오늘은 Stack 위젯 사용법을 알아보겠다. Stack 사용 이유기본적으로 Flutter의 위젯들은 한층 한층 쌓이는 형태이다. 그러면 위젯들을 겹치고 싶으면 어떻게 할까? 그때 Stack 위젯을 사용하면 된다. Stack 사용법위에 코드에서 column을 stack으로 바꿔보자 그러면 Container 위젯들이 이렇게 겹쳐지게 된다. 여기서 알 수 있는것은 코드 순서대로 위젯이 쌓인다는 것이다. PositionedStack에서 위젯들의 위치를 설정할 때는 positioned를 사용한다. positioned 사용법은 위치를 설정하고 싶은 위젯에 positioned 위젯을 감싸면 된다. positioned을 상, 하, 좌, 우, 높이, 너비를 설정할 수 있는데, 높이, 너비는 여러분이 생각하는 높이, 너비..
오늘은 csv, json 파일 등을 파이어베이스에 쉽게 저장하는 법을 배워보겠다. Firebase Firebase 저장소는 두가지가 있다. 하나는 Realtime DB이고 다른 하나는 Firestore DB이다. 그 둘의 차이점은 이 글에서 자세히 정리해 주어서 참고하면 좋을 것 같다. Firebase Realtime, Cloud Firestore [의미, 공통점, 차이점, 앱 기능에 따라 데이터베이스 추천] 우선 Firebase에 대해 먼저 알아보자! Firebase란 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼이다. 앱을 개발하고 개선할 수 있는 도구 모음을 제공한다. 사실 처음에 Firebase는 단순히 데 iamthejiheee.tistory.com 그럼 Realtime DB에서의 파일 ..
