Flutter 9

AutoRoute에서 Firebase Analytics 설정하기

플러터로 개발시에 라우팅을 AutoRoute에게 맡기고 있다. https://pub.dev/packages/auto_route auto_route | Flutter Package AutoRoute is a declarative routing solution, where everything needed for navigation is automatically generated for you. pub.dev AutoRoute에 대해서는 기회가 되면 다음에 포스팅을 해보는걸로 하고, 지금은 AutoRoute를 사용하다가 Firebase 설정시에 문제가 되었던 것에 대한 해답지를 적어볼려한다. AutoRoute를 사용하게 되면, 기존에 App()에 MaterialApp을 사용할 수가 없고 MaterialApp...

[Flutter] 공통 AppBar 만들기 aka BaseAppBar

안녕하세요. 개발아빠입니다. 오늘은 화면마다 많이 쓰이는 AppBar를 재사용이 편하게 공통으로 한번 만들어 볼려고합니다. 페이지별로 특이하지는 않지만, 매번 AppBar를 만들던 비효율에서 이제는 청산해 볼려고 합니다. AppBar 지옥 안녕.! @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: IconButton( icon: Image.asset("assets/images/ic_chevron_30_back.png", width: 24, height: 24,), onPressed: () => Navigator.of(context).pop(), ), centerTitle: center, title..

[Flutter] 텍스트필드(TextField) Counter 위치 변경하기

안녕하세요. 개발아빠입니다. 오늘은 텍스트필드 Counter에 위치를 변경하는 방법에 대해서 알아볼려고 합니다. 텍스트 필드에 Counter는 기본적으로 maxLength를 지정하게 되면 자동적으로 텍스트필드 아래에 기본적으로 Couter가 생기게 됩니다. 아래를 보시면 더 이해가 잘되실 거에요. TextField( decoration: InputDecoration( hintText: "전화번호", ), maxLength: 11, ), 그냥 TextField() 이렇게만 선언에도 텍스트 필드가 나오는데 현재 hintText와 maxLength를 추가한 상태입니다. 여기서 maxLength를 추가하면 자동적으로 아래에 counter가 생성되는것을 볼 수 있는데요. 그런데 여기서 디자이너 분이 공유해주신 앱..

플러터(Flutter)에서 Fluro 사용하여 Router 설정하기

안녕하세요. 개발아빠입니다. 오늘은 Flutter에서 Fluro 라이브러리를 사용해서 라우터를 설정하여 화면을 이동하는 것을 간단하게 진행해보려고합니다. 기본적으로 Router설정에 대해서 모르시는 분들은 아래 글을 먼저 보고 와주세요. 2020/09/28 - [개발아빠/Flutter] - 플러터(Flutter) 화면 이동을 위한 Router(라우터) 설정 하기 2020/09/29 - [개발아빠/Flutter] - 플러터(Flutter) 화면 이동 시 데이터 넘기기 먼저 이것을 진행하게 된 이유에 대해서 먼저 간단히 살펴보면요. (말이 길어질꺼같지만요) 네이티브 앱에서는 크게 이슈가 없었는데 플러터로 웹까지 같이 하고 있다보니 문제가 되는 것이 생기더라구요. 웹에서는 앱과는 다르게 브라우저의 주소창을 통..

플러터(Flutter)로 화폐 단위 표현하기 / Currency Format

안녕하세요. 개발아빠입니다. 오늘은 제가 계속적으로 공부하면서 만드는 PWA / 안드로이드앱 - 아이가 자란다 에서 가격을 보여주는 기능을 개발을 하다가, 가격을 표시해주기 위해서 처리했던 내용을 공유해드릴까 합니다. 오늘은 간단하니 잠시만 봐주세요~ 상품상세 페이지를 만들고 있는데, 아래와 같이 금액표시가 일반적이지 않게 되고 있네요~ 이걸 간단하게 처리해보겠습니다~ 먼저 pubspec.yaml 에 추가해줍니다. intl: ^0.16.1 위에 라이브러리는 날짜나 단위들을 포맷팅하는데 자주 사용되는 거의 필수적인 라이브러리 입니다. Intl This package provides internationalization and localization facilities, including message tr..

플러터(Flutter) 네이티브앱과 Web에서 웹뷰 처리하기

안녕하세요. 개발아빠입니다. 이전 포스팅에서 안드로이드, iOS에 웹뷰를 붙이고, 이걸 웹으로 띄워봤을때 빨간(?) 화면이 나오면서 실행이 안된거를 다들 기억하시나요? 혹시 안보고 오셨다면 아래를 방문해주고 와주세요~ 플러터(Flutter) WebView 사용 및 History 제어 기능 추가 안녕하세요. 육아개발아빠입니다. 오늘도 개발아빠의 플러터 이야기는 계속 됩니다. 오늘은 WebView에 대해서 이야기 해보겠습니다. 안드로이드, 아이폰 어플리케이션 개발때 익숙하게 사용하는 childcare-daddy.tistory.com 오늘은 이 부분을 처리하는 방법에 대해서 포스팅 해보려고 합니다. 어쩌면 웹에다가 웹뷰를 넣는다는 말 자체가 이상 할수 도있고 해서 그렇게 넣는 일 자체가 없기 때문에 라이브러리..

플러터(Flutter) WebView 사용 및 History 제어 기능 추가

안녕하세요. 육아개발아빠입니다. 오늘도 개발아빠의 플러터 이야기는 계속 됩니다. 오늘은 WebView에 대해서 이야기 해보겠습니다. 안드로이드, 아이폰 어플리케이션 개발때 익숙하게 사용하는 것이 WebView입니다. 하이브리드앱도 있듯이요~ 플러터에서도 당연히 웹뷰를 이용할일이 있겠죠~ 먼저 WebView를 추가해보겠습니다~ WebView는 플러터 기본적인 위젯에는 없고, 추가해야합니다. pubspec.yaml 에 dependencies: 에 webview_flutter: ^0.3.24 추가합니다. 버전은 현재 플러터 버전에 따라서 조금씩 다를수 있습니다. 자세한 내용은 여기에서 확인하세요. https://pub.dev/packages/webview_flutter dependencies: flutter:..

플러터(Flutter) 플랫폼 구분하기 (Android, iOS, Web)

안녕하세요. 육아개발아빠입니다. 오늘도 개발아빠로 자아를 변신해서 플러터 포스팅을 이어갑니다~! 플러터를 접하는 분이시라면 당연히 가장 큰 매력으로 보이는 부분이 바로 바로 원 소스로 멀티 플랫폼을 구현 할 수 있는 부분 입니다. 저도 이 부분에 가장 큰 매력을 가지고 플러터 공부에 매진을 하고 있고, 구글팀에서 열심히 멀티 플랫폼을 향해 나아가고 있습니다. 현재는 안드로이드, iOS,Web, Mac Os, Window Os까지 stable버전과 alpha 버전으로 지원하고 있습니다. 써보면서 이제는 안드로이드 , iOS 두 모바일 양대 산맥 플랫폼에서는 안정적으로 개발이 가능한 수준까지 있다고 느끼고 있고, 현재 웹은 아직은 성능적으로 아주 좋은 퍼포먼스를 내고 있지는 못하고 있지만은 그래도 원소스로 ..

플러터(Flutter) 화면 이동을 위한 Router(라우터) 설정 하기

안녕하세요. 육아개발아빠입니다. 지금은 개발아빠로 변신하여 포스팅을 해봅니다. 개발아빠가 밥벌이 하고 있는건 '안드로이드' 인데, 최근 가장 관심가고 있는 것은 'Flutter' 입니다. Flutter는 안드로이드,아이폰, 웹 심지어 Mac Os 앱, 그리고 최근에는 Window Os 앱 까지 개발이 가능한 Cross Platform Development Framework입니다. 아마 클라이언트 개발자라면 많이들 들어보셨을 단어라고 생각하며, Flutter와 관련되어 앞으로 포스팅 할 예정입니다. 서론이 길었네요~ 오늘 알아볼 내용은 Router를 활용하여 화면을 이동하는 방법에 대해 소개해보려고합니다. Flutter의 모든것은 Widget이라는 단위로 되어있습니다. 기본적으로 Flutter 프로젝트를 ..