본문 바로가기

App/Flutter14

[Flutter Codelab] Adding Google Maps Adding Google Maps to a Flutter app 1. Introduction google_maps_flutter 플러그인을 이용해서 구글맵을 앱에 추가할 수 있다. 플러그인은 구글맵 서버, 맵 디스플레이에 접근이 자동적으로 가능하고, 클릭이나 드래그와 같은 유저의 제스처에 반응한다. 지도에 위치를 추가할 수 있다. What you'll build 이번 코드랩에서는, FlutterSDK를 사용한 Google Map을 모바일앱에 빌드할 것이다. 구글맵을 보여주기 웹 서비스에서 지도 데이터 검색 지도에서 markers(특정위치)를 표시 What is Flutter? Flutter is : 빠른 개발 : Stateful Hot Reload로 안드로이드 및 iOS 애플리케이션을 밀리 초 단위로 구.. 2020. 6. 30.
[Flutter] 3. Wrap 3. Wrap class 수평 또는 수직으로 여러개의 자식들이 실행되는 것을 표시하는 위젯. Wrap은 각각의 자식을 배치하고 main축에서 direction이 주어지고 사이에 공간이 생긴 이전의 자식을 그 자식에 맞게 위치한다. 만약 충분한 공간이 없다면, Wrap 은 cross축 존재하는 children에 맞게 새로 실행한다. 모든 자식이 할당된 후, 실행된 자식들은 메인축에 따라 위치한다. runSpacing과 runAlignment에 따라 교차 축에 배치된다. Wrap 클래스는 디바이스를 벗어났을때, 줄내림을 해줄때 사용한다. 자동으로 내려감. Ex) 댓글, 글이 길때, 줄내림을 할때 사용. Wrap( children: [ SizedBox( width: 200, child: FlatButton( .. 2020. 6. 22.
[Flutter] 2. Expanded https://flutter.dev/docs/codelabs/layout-basics#expanded-widget flexible 과 비슷하게, Expanded 위젯은 위젯을 감쌀 수 있고, 여분의 공간에 강제로 채워넣을 수 있다. 💡Tip : Flexible 과 Expanded 위젯의 차이점은 무엇일까? Flexible 은 Row 나 Column 위젯에서 특정 위젯을 resize하기 위해 사용한다. 이렇게하면 부모 위젯과 관련하여 크기를 유지하면서 자식 위젯의 간격을 조정할 수 있다. Expanded 위젯은 자식 위젯의 제약을 변경하고 다른 여백의 공간을 채운다. 남아있는 공간을 알아서 채워줌. css에서의 flex 를 먹일수도있음. class FirstWeek extends StatelessWidge.. 2020. 6. 15.
[Flutter] 1. SafeArea https://api.flutter.dev/flutter/widgets/SafeArea-class.html 위젯은 각 OS에 따라 침범을 피하기 위한 충분한 패팅에 의한 위젯의 child를 넣는다. 예를들면, 이렇게하면 화면 상단의 statusbar를 피할 수있을만큼 child가 들여 쓰기된다. 또한 이것은 iphoneX의 노치바나, 다른 디스플레이의 물리적인 기능을 피하는데 필요한만큼 child를 들여쓰기 한다. 최소한 padding이 명시되었을때, 더 나은 최소한의 padding이나 safe area padding이 적용될 것이다. Widget의 가장 최상단에 SafeArea 로 덮는다. Inheritance Object > DiagnositicableTree > Widget > StatelessWi.. 2020. 6. 14.