프로그래밍/flutter 28

[flutter] 앱 아이콘 변경

Icon 만들기 appicon.co 해당 사이트에서 앱 아이콘으로 사용할 이미지를 등록후 다운받도록 하자. 1. 안드로이드 플러터 앱 root 디렉토리에서 android/app/src/main/res 폴더를 확인해보면 아래와 같은 구조를 볼수있다. 위에서 받은 파일을 압축풀면 icon 파일중 android 파일을 열어보면 아래와 같은 폴더들이 있다. res 폴더안에 같은 이름의 폴더들이 존재하는걸 확인 할 수 있다. 해당경로의 파일들을 ic_launcher2.png 로 복사한다. android/app/src/main/AndroidManifest.xml 내용중 andrid:icon 항목을 ic_launcher2 로 변경해준다. android:icon="@mipmap/ic_launcher2" AndroidM..

[flutter] 스플래쉬(splash) 화면 추가

스플래시 화면에 보여줄 이미지를 준비합니다. 스플래시 화면은 일반적으로 앱 로고 또는 홍보 이미지를 사용합니다. main.dart 파일에서 스플래시 화면을 표시할 위젯을 생성합니다. 보통 MaterialApp 위젯을 감싸는 형태로 스플래시 화면을 만듭니다. 스플래시 화면 위젯 내부에서 Future.delayed 함수를 사용하여 지정된 시간 동안 스플래시 화면을 보여준 후에 다음 화면으로 이동하도록 처리합니다. 다음 화면으로 이동하기 위해서는 Navigator 클래스의 pushReplacement 메서드를 사용하면 됩니다. 아래는 간단한 예제 코드입니다: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class ..

[flutter] 백버튼(뒤로가기) 클릭시 "종료하시겠습니까?" 다이얼로그 추가

뒤로가기 버튼을 클릭했을 때 "종료하시겠습니까?"와 관련된 기능을 추가하려면 WillPopScope 위젯을 사용하여 백 버튼 이벤트를 처리할 수 있습니다. 아래와 같이 코드를 수정하여 "뒤로가기" 버튼 클릭 시 종료 여부를 묻는 다이얼로그를 표시할 수 있습니다. 기존코드 @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter WebView 11'), ), body: WebViewWidget( controller: controller, ), ); 수정코드 Future _onWillPop() async { return await showDialog( context: cont..

[flutter] native(앱) 의 웹뷰(vue3) 양방향 통신 방법 InAppWebView 사용

pubspec.yaml dev_dependencies: flutter_test: sdk: flutter # The "flutter_lints" package below contains a set of recommended lints to # encourage good coding practices. The lint set provided by the package is # activated in the `analysis_options.yaml` file located at the root of your # package. See that file for information about deactivating specific lint # rules and activating additional ones. ..

소켓통신 첫 4byte 길이 구하기 (비트연산)

List buffer 에는 연결된 소켓에서 데이터를 받아옵니다. 아래 코드의 buffer 는 길이를 얻기위해 첫 4byte 만 추출 한 것입니다. 여기서 buffer는 바이트 배열로, 각각의 원소는 8비트(1byte) 크기의 바이트입니다. 이렇게 바이트 배열로 표현된 데이터를 조합하여 하나의 정수로 만들기 위해 비트 연산을 사용합니다. 코드 List buffer = [0x00, 0x00, 0x07, 0x04]; // 예시 데이터 int length = (buffer[0]

[flutter] 소켓 통신 응답받을때 데이터 짤리는 문제

flutter 에서 소켓 접속후 응받받을때 데이터가 짤리는경우가 발생한다. 수정전 Future _listenToSocket() async { _socket.listen( (List data) async { // 데이터 수신 처리 _hexString = HEX.encode(data); print('flutter 에서 데이터 수신'); print(_hexString); // 비동기 작업을 수행하고자 하는 경우, await 키워드로 Future를 기다릴 수 있습니다. await someAsyncTask(); // 비동기 작업 후 추가적인 코드 }, onError: (e) { print('Socket error: $e'); _disconnect(); }, onDone: () { print('Socket disc..

[flutter] native(앱) 의 웹뷰(vue3) 양방향 통신 방법 webview_flutter 사용

webview_flutter : 안드로이드에서는 정상 작동하지만 iOS 에서는 alert 을 비롯한 알수없게 작동안된다. => InAppWebViewController 로 변경 목적 : flutter 와 웹뷰(vue3) 의 양방향 통신방법에 대해서 알아본다. 전제 조건 : vue3 에서는 쉐워드워커, 워커를 사용하기 때문에 워커에서는 flutter 의 웹뷰로 의 양방향 통신은 불가능하다. 프로세스 흐름 - input (request) ui 에서 Tr 클릭 (n_flutter.vue) Tr input 객체를 만들어 Worker 로 전송 $Worker.send(data); (n_flutter.vue) js/index.js 의 send 함수에서 웹인지 앱인지 체크 (/js/index.js) inputHexSt..

[flutter] native 와 webview 양방향 통신 방법

목적 : 네이티브와 웹뷰간의 양방향 통신 방법을 알아본다. 네이티브 : 서버와 tcp/ip 소켓접속 후 데이터 전송하여 받아오는 역할을 한다. 웹뷰: input 정보를 네이티브에 전송하고 서버에서 받아온 응답 데이터를 네이티브에서 받아온다. 현재까지는 hexString 으로 input 값으로 전달한후 output 값도 hexString 으로 받아온다. output connect : tcp/ip 소켓 접속연결한다. sendTr : 연결된 소켓으로 input hexString 보낸다. Flutter 프로젝트 구조 main.dart /* * https://pub.dev/packages/webview_flutter * https://kbwplace.tistory.com/176 * */ import 'dart:c..

flutter json -> object 로 변경 jsonDecode 사용

Flutter에서 JSON 데이터를 디코딩하는 방법은 dart:convert 라이브러리의 jsonDecode() 함수를 사용하는 것입니다. jsonDecode() 함수는 JSON 문자열을 Dart 객체로 변환해줍니다. 아래는 Flutter에서 JSON 디코딩을 수행하는 간단한 예제 코드입니다: import 'dart:convert'; void main() { // 예제로 사용할 JSON 문자열 String jsonString = '{"name": "John", "age": 30, "isMarried": false}'; // JSON 문자열을 디코딩하여 Dart Map으로 변환 Map parsedJson = jsonDecode(jsonString); // 디코딩된 데이터 사용 String name = pa..