详情里面是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 '完成加载';
} }

.

Flutter移动电商实战 --(47)详细页_Flutter_html插件的使用的更多相关文章

  1. Flutter实战视频-移动电商-47.详细页_Flutter_html插件的使用

    47.详细页_Flutter_html插件的使用 详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 f ...

  2. Flutter移动电商实战 --(36)FlutterToast插件使用

    https://github.com/PonnamKarthik/FlutterToast fluttertoast: ^3.0.1 category_page.dart页面添加引用 import ' ...

  3. Flutter移动电商实战 --(49)详细页_Stack制作底部工具栏

    一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...

  4. Flutter移动电商实战 --(46)详细页_自定义TabBar Widget

    主要实现详情和评论的tab provide定义变量 自己做一个tab然后用provide去控制 定义两个变量来判断是左侧选中了还是右侧选中了.并定义一个方法来接受参数,修改是左侧还是右侧选中的状态值 ...

  5. Flutter移动电商实战 --(45)详细页_说明区域UI编写

    pages/details_page/details_expain.dart 详情页面引用组件 效果展示: 最终代码: import 'package:flutter/material.dart'; ...

  6. Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写

    把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.da ...

  7. Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页

    首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...

  8. Flutter移动电商实战 --(42)详细页_UI主页面架构搭建

    详细分成六大部分拆分开 body里面用FutureBuilder异步加载. FutureBuilder里面的furure属性这里用一个方法,必须返回的也是future 把我们的方法修改为返回的类型为F ...

  9. Flutter移动电商实战 --(40)路由_Fluro的全局注入和使用方法

    路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是MaterialApp自带的路由配置项, 首页跳转到详细 ...

随机推荐

  1. 网站seo搜索引擎优化

    SEO综合查询方式:http://seo.chinaz.com/网站地址(一般为域名地址),比如:http://seo.chinaz.com/www.test.com 搜索关键字(keywords)优 ...

  2. docker 部署oracle

    Oracle数据库服务器Docker映像文档 Oracle Database Server 12c R2是行业领先的关系数据库服务器.Oracle数据库服务器Docker映像包含在Oracle Lin ...

  3. Keras实现Hierarchical Attention Network时的一些坑

    Reshape 对于的张量x,x.shape=(a, b, c, d)的情况 若调用keras.layer.Reshape(target_shape=(-1, c, d)), 处理后的张量形状为(?, ...

  4. Computer Vision_33_SIFT:A novel coarse-to-fine scheme for automatic image registration based on SIFT and mutual information——2014

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  5. Python标准库3.4.3-webbrowser-21.1

    21.1. webbrowser — Convenient Web-browser controller Source code: Lib/webbrowser.py  翻译:Z.F. The web ...

  6. python自定义ORM并操作数据库

    看这个代码之前先去看上篇文章,理解type的用法及元类的含义: ORM可以代替pymysql,实现将python语义装换为sql语句,简单化 import pymysql ''' metaclass, ...

  7. javascript遍历对象属性

    ":[{"name":"a2"}]}; console.log(Object.keys(obj)); Object.keys(obj).forEach ...

  8. python中函数的定义、返回值以及参数的简要介绍

    一. 1.函数 定义:def关键字开头,空格之后接函数名称和圆括号(),后面紧跟‘:”. 函数是对功能的封装 语法: def 函数名(形参列表): 函数体(代码块,return) 调用: 函数名(实参 ...

  9. springboot的入门

    SpringBoot SpringBoot是SpringMVC的升级版,简化配置,很可能成为下一代的框架 1.新建项目 怎么创建springBoot项目呢? 创建步骤复杂一点点 New Project ...

  10. JavaScript常用类库推荐

    Axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 [中文说明], [Github], [教程] Lodash 一致性.模块化.高性能的 Jav ...