Flutter 6

[android / xml] 안드로이드 홈스크린위젯 꾸미기 - 이미지 넣기, 그라데이션적용, drawable resource file 적용

1. 이미지 넣기 이미지를 넣는 방법은 두가지가 있다. 1.1 이미지 뷰 사용하기 xml 뷰 중에서 를 사용하는 방법이다. 먼저 이미지 파일을 res/drawable 폴더에 넣어준다. 에서 src 속성을 사용해 해당 이미지를 불러온다. 1.2 백그라운드로 넣기 버튼이나 텍스트 뷰 같은 뷰안에 백그라운드로 넣는 방식이다. 이미지 사이즈 조절이 안되고 항상 꽉 차있기 때문에 이미지를 따올 때 사이즈를 미리 정해놔야 함. 먼저, res/drawable 폴더에 이미지파일을 넣는다. bacground 속성을 사용해 이미지를 불러온다. 2. 그라데이션 적용 res/drawable 폴더 안에 shape.xml 파일을 새로 생성한다. (이것을 drawable resource file)이라고 한다. 뷰 안에 를 넣고 속..

frontend/mobile 2023.10.28

[android / Kotlin] flutter 에서 home screen widget 만들기

우리는 앱개발을 위해 flutter를 설치했다. android와 ios를 한꺼번에 커버하기 위해서가 가장 큰 이유였다. 그런데, home screen widget은 flutter에서 dart로 만들 수 없고, 패키지를 설치한 다음에 안드로이드와 ios각각 개발을 해줘야 한다고 한다. 이런 네이티브 개발을 피하고 싶었던건데!!!!! 필요하면 해야지 뭐. 일단은 안드로이드용 홈스크린 위젯을 만들어보기로 한다. 이미 플러터에서 위젯이라는 개념을 사용하고 있기 때문에 flutter widget등으로 검색하면 우리가 원하는 휴대폰 위젯 기능이 안나온다. 그래서 홈스크린 위젯이라는 키워드로 검색 해줘야 함. 어쨌든. 우리는 어플에서 카운터 기능을 만들어 줄 것이고, 그 카운터 기능을 홈스크린 위젯에 연동시켜줄 것이..

frontend/mobile 2023.10.25

[flutter] Dynatrace pakage 세팅하기

Dynatrace Flutter Plugin 앱성능 관련 데이터를 측정 할수있도록 해주는 플러그인. flutter에서 패키지 설치가 필요하다. 1. 설치 터미널에서 다음의 명령어를 입력하거나 flutter pub add dynatrace_flutter_plugin pubspec.yaml 파일에서 다음의 명령어를 추가 한 뒤, pub get 버튼을 누른다. dependencies: dynatrace_flutter_plugin: ^3.275.1 2. dynatrace.config.yaml 파일 세팅하기 flutter의 루트 폴더 위치에 dynatrace.config.yaml 파일을 생성하고 필요에 따라 세팅한다. 기본적인 세팅 방식은 아래의 url을 참고. https://pub.dev/packages/dyn..

frontend/mobile 2023.10.07

[flutter] device 정보 가져오기, 화면크기 가져오기

1. device_info_plus 패키지를 이용한 방법(device 정보 가져오기) 1-1. 패키지 설치 패키지는 터미널에서 명령어를 아래와 같이 입력하거나 flutter pub add device_info_plus pubspec.yaml 파일의 dependencies에 다음과같이 추가한후에 pub get을 눌러준다. dependencies: device_info_plus: ^9.0.3 1-2. main.dart에 추가해보기 여러가지 방법이 있겠지만, 앱에 접속 하자마자 device 정보를 얻어오게 하고 싶어서 void main 에 추가했다. 그런데, widget 내부에서 버튼을 누르면 정보가 떨어지게 하는 방법도 있을 것이고...뭐.. 기타등등... 여튼 핵심은 플러그인을 객체를 생성해서 실행해주면 ..

frontend/mobile 2023.10.06

[flutter] 가로모드 방지(화면고정, 세로/가로 고정)

1. main.dart 파일에 package import 하기 import 'package:flutter/services.dart'; 2. void main 함수 안에 추가하기 WidgetsFlutterBinding.ensureInitialized(); 하단의 코드는 void main 함수 혹은 Widget build 함수 안에 추가해주면 된다. SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, ]); // 가로모드 방지(세로모드 지원) SystemChrome.setPreferredOrientations([ DeviceOrientation.landscapeLeft, Devi..

frontend/mobile 2023.10.05

[flutter] 플러터에서 webview 연결하기

- 웹뷰란 네이티브 앱 안에서 웹브라우저를 띄우는 것을 말한다. (네이티브 앱에서)웹 view 하기 정도로 이해해도 괜찮을 것 같다. 1. 플러터 패키지 설치(webview_flutter) - 터미널에서 아래의 코드를 입력하여 추가하거나 flutter pub add webview_flutter - pubspec.yaml 파일 내의 dependencies 목록에 다음과 같이 추가한한 후 pub get 버튼을 눌러준다. dependencies: webview_flutter: ^4.4.1 설치에 관한 내용은 아래의 링크에서 자세히 볼 수 있음 https://pub.dev/packages/webview_flutter/install webview_flutter | Flutter Package A Flutter p..

frontend/mobile 2023.10.05