웹으로 개발한 서비스를 Flutter를 이용하여 앱으로 만들기

 우리의 프로젝트의 처음 목표는 웹 서비스를 만드는 것이었다. 하지만 프로젝트를 진행하면서 처음의 설정 방향과 서비스의 방향이 달라져가고, 우리의 서비스가 컴퓨터보다는 모바일에서 사용하기 더 적합하다고 판단했다. 웹도 개발하고 앱도 개발하는 방법이 있다고 하여 웹을 먼저 개발한 후 Flutter를 사용하여 이 웹을 앱으로 만들었다.

 

 우리가 선택한 방법은 우리의 웹을 WebView로 띄운 후 Flutter로 앱의 껍데기만 만들어 앱을 만드는 것이었다.

 

 

https://developer.android.com/guide/webapps/webview?hl=ko 

WebView에서 웹 앱 빌드  |  Android 개발자  |  Android Developers

https://codelabs.developers.google.com/codelabs/flutter-webview?hl=ko#5 

Flutter 앱에 WebView 추가  |  Google Codelabs

 

위 두 페이지를 보면서 작업을 진행하였다.

 

프런트앤드에는 Flutter에 WebView를 띄우기 위해서 특별히 추가로 해야 하는 작업은 당장은 없었다.

Flutter에서는 WebView를 띄우기 위해서는 위의 공식문서를 참고하면서 코드를 추가로 작성해 주면 된다.

 

// lib/main.dart
//여기는 Flutter가 실행되는 main코드이다.
void main() async {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  //우리의 flutter bridge 이름은 FlutterBridge로 했다. 이것은 각자 커뮤니케이션 하에 정하면 된다.
  //이는 추후 bridge 연결을 위해서 필요하다.
  static const String channelName = 'FlutterBridge';
  final MethodChannel _channel = const MethodChannel(channelName);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '스터디 메이트',
      themeMode: ThemeMode.dark,
      theme: ThemeData(useMaterial3: true),
      home: MyWebView(channel: _channel),
    );
  }
}

 

이렇게 하면 WebView를 Flutter를 통해서 앱으로 만드는 것은 성공이다!