[069] 플러터 (Flutter) 배우기 - TabBarView와 InAppWebView와 연동(스크롤 이슈도 해결하기)
안녕하세요~ totally 개발자입니다.
TabBarView & InAppWebView
WebView를 사용할 때 패키지는 주로 flutter_inappwebview나 webview_flutter가 사용됩니다. 이 때 flutter_inappwebview를 사용하고 TabBarView를 이용할 때 스크롤이 되지 않는 문제가 있는데 그 때에는 아래 Stackoverflow에 나와 있는 대로 Set()..add 부분을 추가해주시면 됩니다.
Flutter inappwebview scroll not working inside the NestedScrollView TabBarView
Im new to flutter, i have added the webview(inappwebview) inside the TabBarView, but when i try to scroll down the web page, it is not scrolling down, below i have added my code and screenshot impo...
stackoverflow.com
처음부터 차근차근 구성해보도록 하겠습니다.
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: 실행해본 모습입니다.
[전체 소스 코드]