Flutter - Webview with searchBar

하이브리드 앱을 만들때 혹은 특정한 페이지를 로드할 때 Webview가 필요하고

 

어떤 앱은 검색하는 기능도 가지고 있습니다

 

먼저 Webview를 사용하기 위해서 다음 패키지를 이용합니다

 

pub.dev/packages/webview_flutter

 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView Example'), actions: [
        IconButton(
          icon: Icon(Icons.search),
          onPressed: () => showSearch(context: context, delegate: Search()),
        )
      ]),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }

사용방법은 시작페이지인 initialUrl과 javascriptMode를 설정하고

 

search기능을 추가하기 위해서 AppBar에 actions에 IconButton을 추가해

 

showSearch()를 만들고 delegate에 사용될 클래스이름을 정의하는데

 

필자는 그냥 Search를 사용했습니다

 

class Search extends SearchDelegate {
  String result;
  String search = 'https://google.com/search?hl=ko&source=hp&ei=i_JtX5r5Lo26wAPdxK5o&q=';
  List<String> url = ['https://www.naver.com', 'https://www.google.com'];

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            query = '';
          })
    ];
  }

  @override
  TextInputAction get textInputAction {
    if (query.startsWith('https://')) {
      result = query;
    } else {
      result = search + query;
    }
    return TextInputAction.search;
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
        icon: Icon(Icons.arrow_back), onPressed: () => Navigator.pop(context));
  }

  @override
  Widget buildResults(BuildContext context) {
    if(!url.contains(result)){
      url.add(result);
    }
    return WebView(
        initialUrl: result, javascriptMode: JavascriptMode.unrestricted);
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return ListView.builder(
        itemCount: url.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(url[index]),
            onTap: () {
              result = url[index];
              showResults(context);
            },
          );
        });
  }
}

그 후 부모클래스로 SearchDelegate를 extends 해주면

 

4개의 메소드를 오버라이딩 해야됩니다

 

소스에 5개의 메소드를 오버라이딩 한 이유는

 

키보드의 검색버튼을 눌렀을 때 처리를 하기 위해서 TextInputAction을 추가로 오버라이딩 했습니다 

 

buildActions은 오른쪽 부분의 버튼으로 해당 코드에서는 url을 지워주는 역할을 합니다

 

x눌렀을때 검색을 취소시키고 싶으시면 onPressed에 Navigator.pop을 추가하면 됩니다

 

buildLeading은 왼쪽 부분의 버튼으로 해당 코드에서는 뒤로가기 역할을 합니다

 

buildResult는 검색을 했을때 결과가 보여지는 곳으로 WebView에 result(url)값을 넘겨줍니다

 

buildSuggestions부분에는 이전에 검색했었던 링크 혹은 검색 제안으로 사용되는 부분으로

 

어떻게 커스터마이징 하냐에 따라 달라집니다 해당 코드에서는

 

구글과 네이버 그리고 검색한 값을 저장해서 보여주게 되어있습니다

 

조금 더 좋은방법으로 url을 다른식으로 처리하고 검색값만 보여주면 더 좋은 앱이 될거 같습니다

 

추가로 google은 잘 검색되는데 naver가 안되는 경우 다음과 같이 처리해주면 됩니다

 

AndroidManifest.xml에서 빨간 문구를 추가해주면 됩니다

 

<application
android:name="io.flutter.app.FlutterApplication"
android:label="ex1"
android:icon="@mipmap/ic_launcher"
android:usesCleartextTraffic="true">