통신 방식 자체가 웹 소켓이라는 것이 일반 HTTP 통신과는 차이점이 있기 때문에 서버 뿐만 아니라 클라이언트도 웹 소켓의 특성을 적용해야 한다.

플러터로 웹 소켓 통신 방식을 활용하기 위한 클라이언트 구축하는 방법을 알아보자

1. SocketIO 패키지 설치

dependencies:
  socket_io_client:

• pubspec.yml 에 넣어주고 flutter pub get 실행

2. 해당 패키지 임포트

import 'package:socket_io_client/socket_io_client.dart' as IO;

3. 웹 소켓 연결 설정

final IO.Socket socket = IO.io('<http://10.0.2.2:5000>',
      IO.OptionBuilder().setTransports(['websocket'])
          .build());

• 해당 패키지를 이용하여 웹 소켓이 적용된 서버의 아이피를 적는 등의 설정과 동시에 State를 생성한다.

4. 웹 소켓 서버 연결

@override
  void initState() {
    super.initState();
    socket.connect(); // 서버 연결
    setSocketEvent();
  }

• socket.connect() 함수를 initState() 함수 안에 넣어서 해당 위젯이 실행될 때 연결이 실행되도록 한다.

5. 데이터를 송수신하는 방법

socket.emit('sendEventName', data) # 데이터 송신

socket.on('receiveEventName', (data) { # 데이터 수신
      print('받은 데이터: ' + data);
    });

• 서버와 데이터를 송수신하기 위해서는 각 작업이 이루어지는 이벤트 이름을 서버와 통일한다.
• 첫 번째 파라미터에는 그에 해당하는 이벤트 이름을 적고, 두 번째 파라미터에는 보내거나 받는 데이터가 사용된다.

플러터 WebView를 이용하여 앱 내에 웹사이트를 표출할 수 있다.

1. WebView 관련 패키지 의존성 추가

dependencies:
  webview_flutter:
  webview_flutter_android:
  webview_flutter_wkwebview:

• pubspec.yaml에 입력하고 flutter pub get 실행

2. 해당 패키지 임포트

import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

3. Android 최소 SDK 버전 설정

android {
        defaultConfig {
            minSdkVersion 19
        }
    }

• WebView 패키지는 안드로이드 SDK의 버전 19 이상부터 지원을 하기 때문에 설정을 해주기 위해 build.gradle 파일에서 작성한다.

4. WebView 컨트롤러 변수 선언

class _TrainingInState extends State<TrainingIn> {
  late final WebViewController _controller;

• 웹뷰를 구현할 위젯에서 컨트롤러 State를 추가한다.

5. WebView 컨트롤러 초기 설정 코드 작성

@override
  void initState() {
    super.initState();
 
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }
 
    final WebViewController controller =
        WebViewController.fromPlatformCreationParams(params);
 
    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {
            debugPrint('WebView is loading (progress : $progress%)');
          },
          onPageStarted: (String url) {
            debugPrint('Page started loading: $url');
          },
          onPageFinished: (String url) {
            debugPrint('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            debugPrint('''
              Page resource error:
                code: ${error.errorCode}
                description: ${error.description}
                errorType: ${error.errorType}
                isForMainFrame: ${error.isForMainFrame}
          ''');
          },
          onNavigationRequest: (NavigationRequest request) {
            debugPrint('allowing navigation to ${request.url}');
            return NavigationDecision.navigate;
          },
        ),
      )
      ..addJavaScriptChannel(
        'Toaster',
        onMessageReceived: (JavaScriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        },
      )
      ..loadRequest(Uri.parse('10.0.2.2:5000/cameraPage'));
 
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);
      (controller.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }
 
    _controller = controller;
  }

• 웹뷰를 활용하기 위해 앞서 선언한 WebViewController를 이용하여 초기 설정을 진행한다.
• ..loadRequest(Uri.parse('<https://flutter.dev/>')); 해당 코드로 앱 내에 출력하기 원하는 웹사이트 주소를 입력한다.

6. 설정된 컨트롤러를 이용하여 앱 내에 최종 표출

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: _controller),
		)
	}

• 최종적으로 웹사이트를 앱에 넣기 위해서 웹뷰를 구현할 위젯에 WebViewWidget 위젯을 사용한다. 앞서 설정한 컨트롤러 변수를 파라미터도 같이 넣어준다.

플러터에서 제공하는 Camera 라이브러리를 사용하여 앱 내에서 핸드폰의 카메라를 볼 수 있다.

1. 플러터 제공 Camera 라이브러리 의존성 추가

dependencies:
  camera: ^0.10.5+9

  - 해당 코드 추가 후 flutter pub get 실행

2. main 함수 내에 카메라를 가져오는 코드 작성

void main() async{
  WidgetsFlutterBinding.ensureInitialized();

  final cameras = await availableCameras(); // 현재 사용 가능한 카메라 목록을 가져옴.
  final firstCamera = cameras.first; // 핸드폰 기기의 후면카메라를 선택

  runApp(
    MaterialApp(
      home: MyApp(
          camera: firstCamera, // 이 곳에서 만든 카메라를 앱 내에 state로 전송
      ),
	  )
  );
}

  - main 함수 내에 앱을 실행하기 전에 카메라를 가져오는 코드를 작성한다.

3. 카메라를 표출할 위젯에서 initState 함수 내에 카메라 컨트롤러 설정

class CameraScreen extends StatefulWidget { 
  const CameraScreen({super.key, required this.camera}); 
  final CameraDescription camera; // main 함수에서 만든 카메라를 전달 받음

  @override
  State<CameraScreen> createState() => _CameraScreenState();
}

class _CameraScreenState extends State<CameraScreen> { 
  late CameraController _controller;
  late Future<void> _initializeControllerFuture;

  @override
  void initState() {
    super.initState();
    _controller = CameraController( // 전달받은 카메라를 이용하여 카메라 컨트롤러 설정
      widget.camera, // 설정할 카메라 지정
      ResolutionPreset.high, // 카메라 화면의 화질 설정
    );
    _initializeControllerFuture = _controller.initialize(); // 지정해준 설정으로 초기화
  }

  - main 함수에서 만든 카메라를 state로 전달 받아 CameraController를 이용하여 카메라에 대한 설정을 한다.

4. 설정된 카메라의 화면을 최종적으로 앱 내 표출

@override
  Widget build(BuildContext context) {
    return FutureBuilder<void>(
        future: _initializeControllerFuture, // 카메라 설정 초기화 진행 (비동기)
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
						// 카메라 설정 초기화가 완료가 되었는지 판단
            return CameraPreview(_controller); // 카메라 화면 표출
          } else {
            return Center(child: CircularProgressIndicator()); // 로딩화면 표출
          }
        },
      ),
    ); 
  }
}

  - 앞서 카메라 설정을 초기화 해주는 부분 _initializeControllerFuture = _controller.initialize(); 이 부분이

    비동기식으로 작동하여 Future를 반환하기 때문에 FutureBuilder를 이용하여 동기식으로 변환하여 표출한다.

얼마 전.. 약 6개월 간 작업하던 프로젝트가 마무리 되고 나서

회사의 내부 사정으로 인해 앱개발을 찍먹해보게 되었다..

IOS와 안드로이드 둘다 개발을 해야하지만,

Swift, Kotlin 등 네이티브 언어를 깊게 공부할 시간이 충분하지 않기에

빠르게 업무에 투입해야 하기 때문에 범용성 있는 플러터를 사용하기로 했다.

그래서 요즘 플러터를 한창 공부중인데 그러한 기념으로 플러터에 대해서 간단히 알아보자!!

1. Flutter(플러터)란?

  - 2017년 5월 구글에서 출시한 모바일, 웹, 데스크톱 크로스 플랫폼 GUI 애플리케이션 프레임워크다.

    해당 프레임워크로 안드로이드, 리눅스, Windows, macOS, iOS 및 웹 브라우저에서

    모두 동작되는 앱을 제작할 수 있다. 

    앞서 범용성 있는 플러터라고 수식어를 덧붙였는데, 이러한 이유로 범용성이 있다고 생각했음.

    물론, 앱을 제작하는 목적에 따라 모바일 기기에 최적화 된 성능의 앱을 만들 수 있는

    네이티브 언어에는 못 미치는 단점이 있겠지만

    간단한 목적의 앱을 만든다면 충분히 가능하다는 점과 범용성이 좋다는 점에서 큰 매력을 가지고 있는 녀석같음.

2. Dart(다트)

  - 플러터에서 여러 어플리케이션을 제작하기 위해 Dart(다트) 라는 언어를 사용한다고 한다.

    다트 역시 구글에서 제작한 언어이다.

    객체지향성이 강하다는 것이 가장 큰 장점이다. 이 때문에 앱을 개발하면서

    직관적으로 레고를 조립하는 듯한 느낌을 받았음.

    이러한 특징이 플러터 내에서 그대로 녹아드는 것 같다. 

    플러터에서는 앱 화면에 들어가는 모든 요소들을 위젯이라고 일컫는데,

    해당 위젯들을 모두 클래스 단위로 취급하여 각 위젯에서 사용하는 변수, 함수들을 정의한다.

    이렇게 각 분리되어 있는 객체들임에도 부모-자식 관계를 맺어주기도 너무 편하고,

    서로 State를 공유하기도 너무 쉽다.

    State를 따로 저장할 수 있는 공간을 만드는 라이브러리도 있다.

    거기서는 어떤 위젯이든지 다 갖다 쓸 수 있다. 참 신기한 놈이다.

    이 때문에 진짜 레고를 조립하는 듯한 느낌이 든다 ㅋㅋㅋ

3. 플러터 전망

  - 모든 개발자들이 작업하다 막힐 때 항상 방문하는 세계 최대규모 커뮤니티 스택오버플로우에서

    2023년 가장 많이 사용하는 프로그래밍 언어 순위 설문조사를 진행했다.

    그 결과 Dart 언어가 18위를 차지했다.

    https://survey.stackoverflow.co/2023/#technology

    일단 네이티브 언어인 코틀린은 다트보다 3위 앞선 15위를 차지했고,

    스위프트는 20위를 차지했다.

    구체적으로 해당 결과가 나온 이유에 대해서는 잘 모르겠지만,

    현재 다른 언어들과 함께 앱개발의 트렌드를 이끌어가는데 중심이 되는 언어라고 볼 수 있을듯 하다.