[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: 실행해본 모습입니다. 

 

 

 

[전체 소스 코드]