[069] 플러터 (Flutter) 배우기 - TabBarView와 InAppWebView와 연동(스크롤 이슈도 해결하기)

안녕하세요~ totally 개발자입니다.

 

TabBarView & InAppWebView

 

WebView를 사용할 때 패키지는 주로 flutter_inappwebview나 webview_flutter가 사용됩니다. 이 때 flutter_inappwebview를 사용하고 TabBarView를 이용할 때 스크롤이 되지 않는 문제가 있는데 그 때에는 아래 Stackoverflow에 나와 있는 대로 Set()..add 부분을 추가해주시면 됩니다. 

 

https://stackoverflow.com/questions/67345346/flutter-inappwebview-scroll-not-working-inside-the-nestedscrollview-tabbarview

Flutter inappwebview scroll not working inside the NestedScrollView TabBarView

 

처음부터 차근차근 구성해보도록 하겠습니다.

 

Step 1: 먼저 pubspec.yaml에 flutter_inappwebview 패키지를 추가해줍니다. flutter pub get해줍니다.

 

 

Step 2: 아래처럼 import를 해줍니다.

 

 

Step 3: 14-18번째 줄처럼 tabUrlList 리스트 변수를 만들어주고 그 안에 원하는 url들을 넣어줍니다.

 

 

Step 4: DefaultTabController 위젯을 추가하여 줍니다. 만약에 변수로 아이콘이나 텍스트를 할당해서 오류가 발생하는 경우에는 const를 빼주시면 됩니다. 

 

 

Step 5: 아래처럼 TabBarView 위젯 내용을 채워주고 gestureRecognizers 내용을 넣어줍니다. 여기에서 VerticalDragGestureRecognizer를 넣어주면 됩니다.

 

 

Step 6: 실행해본 모습입니다. 

 

 

 

[전체 소스 코드]

 

	import 'package:flutter/foundation.dart';
	import 'package:flutter/gestures.dart';
	import 'package:flutter/material.dart';
	import 'package:flutter_inappwebview/flutter_inappwebview.dart';
	class WebViewPage extends StatefulWidget {
	const WebViewPage({super.key});
	@override
	State<WebViewPage> createState() => _WebViewPageState();
	}
	class _WebViewPageState extends State<WebViewPage> {
	List tabUrlList = [
	"https://flutter.dev/multi-platform/mobile",
	"https://flutter.dev/multi-platform/web",
	"https://flutter.dev/multi-platform/desktop",
	];
	@override
	void initState() {
	super.initState();
	}
	@override
	Widget build(BuildContext context) {
	return DefaultTabController(
	length: 3,
	child: Scaffold(
	appBar: AppBar(
	backgroundColor: Colors.black87,
	centerTitle: true,
	title: const Text("WebView"),
	bottom: const TabBar(
	indicator: UnderlineTabIndicator(
	borderSide: BorderSide(width: 5, color: Colors.blue),
	),
	labelColor: Colors.white,
	tabs: [
	Tab(icon: Icon(Icons.phone_iphone)),
	Tab(icon: Icon(Icons.web)),
	Tab(icon: Icon(Icons.desktop_mac)),
	],
	),
	),
	body: TabBarView(
	children: [
	InAppWebView(
	initialUrlRequest: URLRequest(
	url: Uri.parse(tabUrlList[0]),
	),
	gestureRecognizers: Set()
	..add(Factory<VerticalDragGestureRecognizer>(
	() => VerticalDragGestureRecognizer())),
	),
	InAppWebView(
	initialUrlRequest: URLRequest(
	url: Uri.parse(tabUrlList[1]),
	),
	gestureRecognizers: Set()
	..add(Factory<VerticalDragGestureRecognizer>(
	() => VerticalDragGestureRecognizer())),
	),
	InAppWebView(
	initialUrlRequest: URLRequest(
	url: Uri.parse(tabUrlList[2]),
	),
	gestureRecognizers: Set()
	..add(Factory<VerticalDragGestureRecognizer>(
	() => VerticalDragGestureRecognizer())),
	),
	],
	),
	),
	);
	}
	}

view raw 069_webviewpage.dart hosted with ❤ by GitHub