frontend 43

[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 / xml] 안드로이드 홈스크린위젯 꾸미기 - 속성사용하기

android xml에는 뷰에 사용할 수 있는 다양한 속성이 있다. 1. 높이 너비 // 뷰의 높이 및 너비 android:layout_width="200dp" // 객체의 width를 200dp로 설정 android:layout_height="100dp" // 객체의 height를 100dp로 설정 android:layout_width="match_parent" // 객체의 width를 부모의 크기만큼 설정 android:layout_height="match_parent" // 객체의 height를 부모의 크기만큼 설정 android:layout_width="wrap_content" // 객체의 width를 컨텐츠의 크기만큼 설정 android:layout_height="wrap_content" // ..

frontend/mobile 2023.10.27

[android / xml] 안드로이드 홈스크린위젯 꾸미기 - 레이아웃

이렇게 무난 평범하게 생긴 홈스크린 위젯을 이렇게 삐까번쩍하게(?) 바꿔주겠다. 사실 안예쁜거 안다. 그래도 연습용으로 이것저것 다 해보기로하자. 제 1탄 레이아웃 잡기!!! 기존의 코드이다. LinearLayout 컨테이너 안에 TextView 두개와 Button 한개가 수직정렬 되어있다. 새로운 레이아웃을 분석하면 대략 이런 모양이다. 레이아웃 뷰 및 뷰 그룹 1. LinearLayout - 내부에 있는 뷰들을(컴포넌트나 xml 덩어리라고 이해하면 된다) 수직 혹은 수평정렬 한다. - 속성지정은 다음과같이 해준다. android:orientation="horizontal" //수평정렬 android:orientation="vertical" //수직정렬 참고링크 https://acredev.tistor..

frontend/mobile 2023.10.26

[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

[dart] functions

1. defingina function function 은 js 랑 달리 앞에 void 를 붙여 줘야 한다. void sayHello() { print("Hello World!!!!"); } 이런식이다. 그런데, 만약!!!!! 저 print 되는 내용을 return 하고 싶다. 라고 하면 다음과 같이 바꾸어 주어야 한다. void main() { print(sayHello()); } String sayHello() { return "Hello World!!!!"; } return 하고싶은 내용이 문자열이기 때문에 void가 String으로 바뀌었다. 만약 return 하고 싶은 내용이 숫자이면 int나 num이 될것이고, 객체이면 Object 가 되겠지????? 자료형에 비교적 자유로운 편이었던 js를 ..

frontend/mobile 2023.09.25

[dart] Variables 정리

js 에서는 자료형에 상관없이 var, let, const를 사용했었고 그마저도 const 위주로 사용하기를 권장했다. 1. var와 자료형 지정 dart 에서는 var를 많이 사용하는데, 대신 자료형을 지정해줘야 할 때에는 String, int와 같은 자료형 선언을 함께 해준다고 한다. String name = "이름을 입력하자"; int number = 3; 그리고 선언한 자료형에 해당하지 않는 변수가 할당되면 에러를 뱉어낸다. String name = 3;

frontend/mobile 2023.09.21