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

웹을 손쉽게 앱으로 만드는 법

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

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

WebView에서 웹 앱 빌드

Flutter 앱에 WebView 추가

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

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

Flutter에서 Web을 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를 통해서 앱으로 만드는 것은 성공이다!