본문 바로가기

Flutter

WebView 로 bard gpt chat 만들기? ..

 

chat 따로 만들기보다 . 그냥 , 웹뷰에다 주소 넣으면 빠르고 쉽게 Ai chat 완성 . 

 

를 핑계로 만드는 . WebView 입니다.  웹뷰패키지를 설치하고 작성하면 됩니다. 

 

import 'package:flutter/material.dart';
import 'package:screenshot/screenshot.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WwwScreenHome extends StatefulWidget {
  const WwwScreenHome({super.key});

  @override
  State<WwwScreenHome> createState() => _WwwScreenHomeState();
}

class _WwwScreenHomeState extends State<WwwScreenHome> {
  late TextEditingController textEditingController;
  late WebViewController webViewController;
  //"https://www.google.com/";  주소만 바꾸면 바드지 아니한가? ^^)/
  String searchEnginUrl = "https://bard.google.com";
  bool isLoading = false;

  @override
  void initState() {
    textEditingController = TextEditingController(text: searchEnginUrl);
    webViewController = WebViewController();
    webViewController.setJavaScriptMode(JavaScriptMode.unrestricted);
    webViewController.setNavigationDelegate(NavigationDelegate(onPageStarted: (url) {
      textEditingController.text = url;
      setState(() => isLoading = true);
    }, onPageFinished: (url) {
      setState(() => isLoading = false);
    }));
    loadUrl(textEditingController.text);
    super.initState();
  }

  loadUrl(String urlValue) {
    Uri uri = Uri.parse(urlValue);
    if (!uri.isAbsolute) {
      uri = Uri.parse("${searchEnginUrl}search?q=$urlValue");
    }
    webViewController.loadRequest(uri);
  }

  @override
  void dispose() {
    textEditingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: WillPopScope(
          child: Scaffold(
            body: Column(
              children: [
                _build_TopWidget(),
                _build_LoadingWidget(),
                Expanded(flex:6,child: _build_WebWidget()),
                _build_BottomWidget(),
              ],
            ),
          ),
          onWillPop: onWillPop),
    );
  }

  Future<bool> onWillPop() async {
    if (await webViewController.canGoBack()) {
      webViewController.goBack();
      return Future.value(false);
    }
    return Future.value(true);
  }

  _build_TopWidget() {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          border: Border.all(),
          borderRadius: const BorderRadius.all(Radius.circular(32)),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconButton(
              onPressed: () {
                loadUrl(searchEnginUrl);
              },
              icon: const Icon(Icons.home),
            ),
            Expanded(
                child: TextField(
              controller: textEditingController,
              decoration: const InputDecoration(
                border: InputBorder.none,
                hintText: "Search or type web address",
              ),
              onSubmitted: (value) {
                loadUrl(value);
              },
            )),
            IconButton(
                onPressed: () {
                  textEditingController.clear();
                },
                icon: const Icon(Icons.cancel))
          ],
        ),
      ),
    );
  }

  _build_LoadingWidget() {
    return Container(
      height: 2,
      color: Colors.grey,
      child: isLoading ? const LinearProgressIndicator() : Container(),
    );
  }

  _build_WebWidget() {
    return WebViewWidget(controller: webViewController);
  }

  _build_BottomWidget() {
    return BottomNavigationBar(
      onTap: (value) {
        switch (value) {
          case 0:
            webViewController.goBack();
          case 1:
            webViewController.goForward();
          case 2:
            webViewController.reload();
        }
      },
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.arrow_back,color: Colors.cyanAccent,), label: "Back"),
        BottomNavigationBarItem(icon: Icon(Icons.arrow_forward,color: Colors.cyanAccent,), label: "Forward"),
        BottomNavigationBarItem(icon: Icon(Icons.replay_outlined,color: Colors.cyanAccent,), label: "Reload"),
      ],
      showSelectedLabels: false,
      showUnselectedLabels: false,
      unselectedItemColor: Colors.black54,
      selectedItemColor: Colors.black54,
    );
  }

//
}