우리가 선택한 방법은 우리의 웹을 WebView로 띄운 후 Flutter로 앱의 껍데기만 만들어 앱을 만드는 것이었다.
위 두 페이지를 보면서 작업을 진행하였다.
프런트앤드에는 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);
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: '스터디 메이트',
themeMode: ThemeMode.dark,
theme: ThemeData(useMaterial3: true),
home: MyWebView(channel: _channel),
);
}
}
이렇게 하면 WebView를 Flutter를 통해서 앱으로 만드는 것은 성공이다!