Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- npm library
- useSWRImmutable
- npm module
- React
- useCallback()
- Lottie web
- next.js
- Tailwind CSS
- useSwr
- 동적 디자인
- 템플릿 리터럴
- 웹 애니메이션
- react-icons
- 마이크 권한 요청
- 웹 디자인
- nextauth
- flutter
- python
- NEXT
- es module
- useQuery
- useState
- 백틱
- github login
- svg style
- CJS
- npm publish
- typescript
- recoil
- window.scrollY
Archives
- Today
- Total
김재욱의 이모저모
웹으로 개발한 서비스를 Flutter를 이용하여 앱으로 만들기 본문
728x90
우리의 프로젝트의 처음 목표는 웹 서비스를 만드는 것이었다. 하지만 프로젝트를 진행하면서 처음의 설정 방향과 서비스의 방향이 달라져가고, 우리의 서비스가 컴퓨터보다는 모바일에서 사용하기 더 적합하다고 판단했다. 웹도 개발하고 앱도 개발하는 방법이 있다고 하여 웹을 먼저 개발한 후 Flutter를 사용하여 이 웹을 앱으로 만들었다.
우리가 선택한 방법은 우리의 웹을 WebView로 띄운 후 Flutter로 앱의 껍데기만 만들어 앱을 만드는 것이었다.
https://developer.android.com/guide/webapps/webview?hl=ko
https://codelabs.developers.google.com/codelabs/flutter-webview?hl=ko#5
위 두 페이지를 보면서 작업을 진행하였다.
프런트앤드에는 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를 통해서 앱으로 만드는 것은 성공이다!
728x90
'Front-end > Flutter' 카테고리의 다른 글
WebView 에서 앱으로 권한요청 처리하기 (0) | 2023.05.30 |
---|