플러터 안드로이드 네이티브 코드 연동 Flutter MethodChannel
플러터는 크로스 플랫폼 프레임워크입니다.
플랫폼 별로 코드를 별도로 작성하고 이를 사용하는 방법에 대해 공유하고 정리합니다.
네이트브 코드를 작성하고 이를 플러터에서 사용한다고 이해하시면 되겠습니다.
네트워크로 비유하여 설명하자면 ios와 android 각 플랫폼 단에서 API를 구성하여 서버 측을 구현하고,
이를 Flutter app에서 MethodChannel을 통해 호출한다는 의미에서 클라이언트 측이 되는 것입니다.
또한 반대의 방향도 가능하며 pub.dev에 올라오는 플러터 패키지들이 내부적으로 이 구조로 구현되어 있습니다.
UI, Thread 또한 분리가 가능합니다. 하지만 플러터에서 UI, Thread에 대해 지원하는 것들이 강력하다고 생각하기
저는 UI, Thread를 분리하여 실제 개발에 적용하지는 않습니다.
그렇기에 본 글에서는 안드로이드(자바) 네이티브 코드를 작성하고 이를 플러터에서 호출하는 방법을 소개합니다.
만들고자 하는 것
플러터에서 네이버 버튼을 누르면 안드로이드 네이티브 코드가 호출되어 네이버 페이지가 나타나게 할 것입니다.
기본 화면 구성
플러터 프로젝트를 생성하면 기본적으로 만들어지는 앱의 구성을 제거하고 버튼 하나만 추가했습니다.
플러터 플랫폼 클라이언트 생성
가장 먼저 해야 하는 것은 채널을 생성하는 것입니다.
채널에 이름을 부여해야 하는데 이는 유일해야 하기 때문에, 앱 패키지명을 채널 이름 앞에 추가하는 방식을 추천드립니다.
예시 코드(main.dart)는 다음과 같습니다.
class _MyHomePageState extends State<MyHomePage> {
static const platform = MethodChannel('com.thinkabout.nativenaver/android');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ElevatedButton(
onPressed: () { },
child: Text("네이버"),
),
),
);
}
}주목해야 할 부분은 platform 선언에 대한 부분입니다.
그렇다면 이제 'com.thinkabout.nativenaver/android'라는 채널이 열렸다고 생각하시면 되겠습니다.
안드로이드 플랫폼 구현
자바를 이용해서 안드로이드 플랫폼 네이티브 코드를 작성합니다.
안드로이드 폴더 아래에 위와 같은 경로로 가시면 MainActivity라는 자바 파일이 존재합니다.
이 파일에 코드를 작성하면 됩니다. 웹 브라우저를 인텐트로 호출하여 네이버 페이지를 띄우면 되겠죠?
그렇다면 암시적 인텐트를 사용하여 구현해보도록 하겠습니다.
먼저, 네이티브 코드에도 채널을 열어줘야 합니다.
public class MainActivity extends FlutterActivity {
private static final String CHANNEL = "com.thinkabout.nativenaver/android";
@Override
public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
super.configureFlutterEngine(flutterEngine);
new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
.setMethodCallHandler(
(call, result) -> {
// 여기에 우리가 하고 싶은 것을 작성할 예정
}
);
}
}위의 코드는 채널을 통해 플러터 앱과 연결하는 기본 코드입니다.
주의할 점은 플러터 코드에서 명시한 채널 이름과 네이티브 코드에서 명시한 채널 이름은 동일해야 합니다.
그럼 이제 채널은 열렸으니 주석된 부분에 메서드를 작성해보도록 합니다.
public class MainActivity extends FlutterActivity {
private static final String CHANNEL = "com.thinkabout.nativenaver/android";
@Override
public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
super.configureFlutterEngine(flutterEngine);
new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
.setMethodCallHandler(
(call, result) -> {
if(call.method.equals("browseNaver")){
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("http://www.naver.com"));
startActivity(intent);
}
}
);
}
}이렇게 하면 browseNaver라는 메서드를 호출하면 인텐트를 통해 웹 브라우저로 네이버 페이지를 띄우겠다는 의미입니다.
플러터에서 메서드 호출
플러터 앱과 네이티브 간의 채널이 열렸고 메서드도 구현했으니 이제 사용만 하면 됩니다.
플러터 코드를 보시면 ElevatedButton에 onPressed 부분이 비워져 있는데 버튼이 눌렸을 때 어떻게 할 것인지 결정하는 부분입니다. 이 부분에 네이티브에 구현한 browseNaver라는 메서드를 호출하는 코드를 작성합니다.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
await platform.invokeMethod("browseNaver");
},
child: Text("네이버"),
),
),
);
}결과
간단했을 것이라 생각합니다!
안드로이드 스튜디오를 통해 플러터 앱과 네이티브 코드를 연동해봤습니다.
iOS 네이티브 코드 연동도 작성하고 싶지만,
macOS 기반 기기가 없어서 다음 기회에 작성하도록 하겠습니다.
이번 글은 여기까지입니다.
다음에 또 플러터와 관련해서 같이 알아보고 생각해보도록 하겠습니다~!
Think-about ~ Flutter!