Flutter webview的定制化

---

目前我有一个需求，就是开发一个新闻APP，类似于头条，有新闻的展示，用户的评论和点赞、收藏等等，这个后端接口已经设计好了，这个功能主要通过访问url使用webview来实现该功能，一言不合就开始撸代码了：

• 加载flutter webview插件
• 定制化webview的显示界面
• 对官方插件的二次定制
• 完成对url的加载监听

1. 加载flutter webview插件

flutter_webview_plugin: ^0.3.0+2

2. 定制化webview的显示界面

本页面主要由三部分组成，最上面那部分是flutter的原生页面，中间部分是webview页面，最下方是由bottomNavigationBar组件实现，如代码所示。

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
          title: Text('网页详情'),
          leading: IconButton(
            icon:Icon(Icons.arrow_back_ios,size:20) ,
            onPressed: (){
              _webviewReference.hide();
              String url = 'http://www.appshuo.club/appview/p/';
              MyRouter.pushNoParams(context, MyRouter.homePage);
            },),
          bottom: PreferredSize(
            child: _progressBar(lineProgress, context),
            preferredSize: Size.fromHeight(0.1),
          )
      ),
      body: SafeArea(
      child:  SingleChildScrollView(
              child: Padding(
          padding: EdgeInsets.all(10),
      child: Column(
          children: [
            Padding(
              padding: EdgeInsets.only(bottom: 10),
             child:Row(
              children: [
                CircleAvatar(
                  radius: 20.0,
                  backgroundImage: NetworkImage(widget.article.user.photo),
                  backgroundColor: Colors.white,
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 10.0),
                  child: Text(widget.article.user.nickname),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 15.0),
                  child: Text('阅读',style: TextStyle(color: Colors.black38,fontSize: 13.0)),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 3.0),
                  child: Text('${widget.article.readcount}',style: