Flutter實戰視頻-移動電商-47.詳細頁_Flutter_html插件的使用

47.詳細頁_Flutter_html插件的使用

詳情里面是hemlt和圖片組成的，但是flutter是不支持html的所以需要其他插件

flutter webview plugin:這個不太好用

flutter_html：用這個插件

 先解決之前一個bug

在加載詳情頁面的時候，控制台輸出報錯了。

 

需要用的到異步的處理

provide/details_info.dart類的方法：getGoodsInfo

html插件

https://github.com/Sub6Resources/flutter_html

視頻和iframe標簽目前不支持

添加引用：

flutter_html: ^0.9.6

開了上網工具 下載也還是比較慢的

 

詳細列表和評論區域

 

新建details_web.dart頁面。把details_tabbar.dart里面的導入的包引入進來。

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

 引入HTML的插件。直接輸入html就出出現提示了。

 

 

 

pages/detail_page.dart

引入html的widget

import './details_page/details_web.dart';

 

然后調用

效果展示

我們的詳情就已經出來了

 

最終代碼：

details_page/details_web.dart

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../../provide/details_info.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_html/flutter_html.dart';

class DetailsWeb extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var goodsDetails = Provide.value<DetailsInfoProvide>(context).goodsInfo.data.goodInfo.goodsDetail;

    return Container(
      child: Html(
        data: goodsDetails//注意這里是data，而不是child了！！！！
      ),
    );
  }
}

 

 

pages/details_page.dart

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_info.dart';
import './details_page/details_top_area.dart';
import './details_page/details_expain.dart';
import './details_page/details_tabbar.dart';
import './details_page/details_web.dart';

class DetailsPage extends StatelessWidget {
  final String goodsId;

  DetailsPage(this.goodsId);//flutter 1.2的最新的寫法 構造函數

  @override
  Widget build(BuildContext context) {
 
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: (){
            Navigator.pop(context);//返回上一個頁面
          },
        ),
        title: Text('商品詳細頁'),
      ),
      body: FutureBuilder(
        future: _getBackInfo(context),
        builder: (context,snapshot){
          //判斷是否有數據
          if(snapshot.hasData){
            //如果有數據返回一個Container
            return Container(
              child: ListView(
                children: <Widget>[
                  DetailsTopArea(),
                  DetailsExplain(),
                  DetailsTabbar(),
                  DetailsWeb()
                ],
              ),
            );
          }else{
            return Text('加載中......');//沒有數據的情況
          }
        },
      ),
    );
  }

  Future _getBackInfo(BuildContext context) async{
    await Provide.value<DetailsInfoProvide>(context).getGoodsInfo(goodsId);
    //print('加載完成...........');
    return '完成加載';
  }

}