앱 개발/Flutter
-
[Flutter] 플러터 2.0 버튼 hover, pressed, focused, disable, overlay 상태(state) 변화 개발앱 개발/Flutter 2021. 7. 30. 21:17
기존에는 state 별 버튼의 컬러를 parameter로 지정하고 state를 조건문으로 지정해줘야했다. 하지만 flutter 2.0에서는 style 요소 내에서 버튼의 상태(state)에 맞는 시각적 요소를 지정할 수 있게 되었다. material design이 정의한 버튼의 상태(state)와 state별로 버튼 시각적 요소 지정, overlay 색상을 수정하는 방법을 정리해보려고 한다. 1. material design에서 지정하고 있는 버튼의 상태 - enabled : 상호작용 가능한 버튼 상태 - pressed : 사용자가 탭 했을 때 - hover : 사용자가 마우스 커서를 상호작용 가능한 버튼 위에 올려두었을 때 - focus : 사용자가 키보드나 음성과 같은 입력 방법을 사용하여 강조표시한..
-
[Flutter] 플러터 버튼 종류 (TextButton / OutlinedButton / ElevatedButton / Icon button)앱 개발/Flutter 2021. 1. 18. 19:49
flutter에서 주로 쓰이는 버튼은 FlatButton, RaisedButton, OutlineButton인데 TextButton, ElevatedButton, OutlinedButton으로 각각 변화되었다. theme 또한 TextButtonTheme, ElevatedButtonTheme, OutlinedButtonTheme으로 바뀌었다. style은 textcolor property 요소를 이용해 글꼴 색상을 지정했던 것과 달리 stylefrom property 내에서 color들을 지정한다. primary , onsurface color가 parameter인 것을 보니 material design적인 요소가 많이 반영되었다는 생각이 들었다. * 버튼 상태별로 버튼 스타일을 지정하고 싶다면? htt..
-
[Flutter] Material Design Components - layout (app bar / navigation)앱 개발/Flutter 2021. 1. 11. 15:38
최근 좀 더 컨텐츠에 집중할 수 있는 디자인이 트렌드이기 때문에 창의적인 디자인과 개발가능한 디자인 사이를 고민해야한다. 그 중 개발 친화적인 디자인의 표본이라고 생각하는 design system인 material design 요소들과 flutter 코드를 정리해보려 한다. 더 자세하고 다양한 design 적인 요소들을 보기 위해서는 아래의 링크에 들어가서 항목을 찾으면 된다. material.io/components/app-bars-bottom Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build ..
-
flutter 차트 패키지 (syncfusion_flutter_charts)앱 개발/Flutter 2021. 1. 4. 11:03
flutter 에서 활용할 수 있는 차트 패키지(chart package) pub.dev/packages/syncfusion_flutter_charts syncfusion_flutter_charts | Flutter Package Syncfusion Flutter Charts is a data visualization library written natively in Dart for creating beautiful and high-performance cartesian and circular charts. pub.dev document help.syncfusion.com/flutter/cartesian-charts/chart-types Syncfusion Cartesian Chart types Char..
-
[FLUTTER] 스크린 방향 설정앱 개발/Flutter 2020. 1. 21. 10:49
스크린 세로로 고정 void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContext context) { SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitDown, DeviceOrientation.portraitUp, ]); return MaterialApp( home: MyDemo(), ); } } 스크린 가로로 고정 void main() => runApp(App()); class App extends StatelessWidget { static String _pkg = "parallax_travel_cards_list..
-
[FLUTTER/Firebase] Firestore 연동 데이터 쿼리 설명 및 코드앱 개발/Flutter 2019. 12. 31. 14:52
이전 포스팅에서는 Flutter에 대한 Firestore 연동 데이터 추가 및 관리 코드를 작성했다. 2019/12/31 - [앱 개발/Flutter] - [FLUTTER/Firebase] Firestore 연동 데이터 추가 및 관리 코드 [FLUTTER/Firebase] Firestore 연동 데이터 추가 및 관리 코드 Java script로 쓰여있는 Firestore 연동 코드들을 Flutter dart 언어로 작성했다. https://firebase.google.com/docs/firestore/manage-data/add-data Cloud Firestore에 데이터 추가 | Firebase 다음과 같은 몇.. seizemymoment.tistory.com 이번 포스팅에서는 firestore의 데..
-
[FLUTTER/Firebase] Firestore 연동 데이터 추가 및 관리 코드앱 개발/Flutter 2019. 12. 31. 14:04
Java script로 쓰여있는 Firestore 연동 코드들을 Flutter dart 언어로 작성했다. https://firebase.google.com/docs/firestore/manage-data/add-data Cloud Firestore에 데이터 추가 | Firebase 다음과 같은 몇 가지 방법으로 Cloud Firestore에 데이터를 쓸 수 있습니다. 문서 식별자를 명시적으로 지정하여 컬렉션 내의 문서 데이터를 설정합니다. 컬렉션에 새 문서를 추가합니다. 이 경우 Cloud Firestore에서 자동으로 문서 식별자를 생성합니다. 자동으로 생성된 식별자로 빈 문서를 만들고 나중에 데이터를 할당합니다. 이 가이드에서는 Cloud Firestore에서 개별 문서를 설정, 추가, 업데이트하는 ..
-
[안드로이드 스튜디오] 최신버전 안드로이드 스튜디오 로그캣 실행앱 개발/Flutter 2019. 12. 31. 10:48
구버전의 Android Device Monitor 및 로그캣이 Sdk 의 tool로 옮겨갔다. C:\Users\사용자이름\AppData\Local\Android\Sdk\tools\monitor.bat을 실행하면 아래와 같은 Android Device Monitor에서 로그캣을 확인할 수 있다. 빨간 네모 - 현재 연결된 에뮬레이터 확인 파란 네모 - 로그 확인창 참고사이트 구버전 Android Device Monitor 참고 사이트 https://mainia.tistory.com/4879 최신버전 Android Device Monitor 참고 사이트 http://haseungbong.blogspot.com/2018/06/android-studio-logcat.html Android Studio Logca..