Flutter移动电商实战-ADBanner组件的编写
拨打电话的功能在app里也很常见，比如一般的外卖app都会有这个才做。其实Flutter本身是没给我们提供拨打电话的能力的，那我们如何来拨打电话那?
1、编写店长电话模块
这个小伙伴们一定轻车熟路了，我也就不再多介绍吧。直接看代码，相信都能看懂。
class LeaderPhone extends StatelessWidget {
final String leaderImage; 店长图片
final String leaderPhone; 店长电话
LeaderPhone({Key key, this.leaderImage,this.leaderPhone}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: InkWell(
onTap: (){},
child: Image.network(leaderImage),
),
);
}
}
2、获取需要的数据
在HomePage里获取获取店长图片和电话数据，并形成变量。
String leaderImage= data['data']['shopInfo']['leaderImage']; //店长图片
String leaderPhone = data['data']['shopInfo']['leaderPhone']; //店长电话
有了数据之后，就可以调用这个自己写的组件了。调用方法如下：
LeaderPhone(leaderImage:leaderImage,leaderPhone: leaderPhone) 广告组件
3、url_launcher的简介
官方介绍：
A Flutter plugin for launching a URL in the mobile platform. Supports iOS and Android.
意思是用于在移动平台中启动URL的Flutter插件，适用于IOS和Android平台。他可以打开网页，发送邮件，还可以拨打电话。
github地址：https://github.com/flutter/plugins/tree/master/packages/url_launcher
引入依赖
在pubspec.yaml文件里注册依赖，并保存下载包。请注意使用最新版。
url_launcher: ^5.0.1
在需要使用的页面在使用import引入具体的url_launcher包。
import 'package:url_launcher/url_launcher.dart';
4、改造店长电话组件
有了url_launcher插件就后，我们就可以实现拨打电话功能了，不过要简单的改造一下拨打电话模块的代码，改造后的代码如下。
class LeaderPhone extends StatelessWidget {
final String leaderImage; 店长图片
final String leaderPhone; 店长电话
LeaderPhone({Key key, this.leaderImage,this.leaderPhone}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: InkWell(
onTap:_launchURL,
child: Image.network(leaderImage),
),
);
}
void _launchURL() async {
String url = 'tel:'+leaderPhone;
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}
全部代码：
import 'dart:convert';
import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:url_launcher/url_launcher.dart';
class HomePage extends StatefulWidget {
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String homePageContent='正在获取数据';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('百姓生活+'),
),
body:FutureBuilder(
future: getHomePageContent(),
builder: (context,snapshot){
if(snapshot.hasData){
var data = json.decode(snapshot.data.toString());
List<Map> swiper = (data['data']['slides'] as List).cast();
List<Map> navigatorList = (data['data']['category'] as List).cast(); 类别列表
String advertesPicture = data['data']['advertesPicture']['PICTURE_ADDRESS']; 广告图片
String leaderImage= data['data']['shopInfo']['leaderImage']; 店长图片
String leaderPhone = data['data']['shopInfo']['leaderPhone']; 店长电话
return Column(
children: <Widget>[
SwiperDiy(swiperDataList: swiper,),
TopNavigator(navigatorList: navigatorList,),
AdBanner(adbanner: advertesPicture,),
LeaderPhone(leaderImage: leaderImage,leaderPhone: leaderPhone,)
],
);
}else{
return Center(
child: Text("加载中"),
);
}
},
)
);
}
}
轮播组件
class SwiperDiy extends StatelessWidget {
final List swiperDataList;
SwiperDiy({Key key,this.swiperDataList}):super(key:key);
@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
return Container(
height: ScreenUtil().setHeight(333),
width: ScreenUtil().setWidth(750),
child: Swiper(
itemCount: swiperDataList.length,
itemBuilder: (BuildContext context,int index){
return Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);
},
pagination: SwiperPagination(),
autoplay: true,
),
);
}
}
顶部导航
class TopNavigator extends StatelessWidget {
final List navigatorList;
TopNavigator({this.navigatorList});
Widget _gradViewItemUi(BuildContext context,item){
return InkWell(
onTap: (){print("点击了导航");},
child: Column(
children: <Widget>[
Image.network(item['image'],width: ScreenUtil().setWidth(95),),
Text(item['mallCategoryName'])
],
),
);
}
@override
Widget build(BuildContext context) {
if(navigatorList.length>10){
navigatorList.removeRange(10, navigatorList.length);
}
return Container(
height: ScreenUtil().setHeight(320),
padding: EdgeInsets.all(3.0),
child: GridView.count(
crossAxisCount: 5,
padding: EdgeInsets.all(4.0),
children: navigatorList.map((item){
return _gradViewItemUi(context, item);
}).toList(),
),
);
}
}
广告条
class AdBanner extends StatelessWidget {
String adbanner;
AdBanner({this.adbanner});
@override
Widget build(BuildContext context) {
return Container(
child: Image.network(adbanner),
);
}
}
拨打店长电话
class LeaderPhone extends StatelessWidget {
final String leaderPhone;
final String leaderImage;
LeaderPhone({this.leaderPhone,this.leaderImage});
@override
Widget build(BuildContext context) {
return Container(
child: InkWell(
onTap: _launchURL,
child: Image.network(leaderImage),
),
);
}
void _launchURL() async {
String url = 'tel:'+leaderPhone;
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}
效果如下图所示：
这时候就可以打开虚拟机进行调试了，需要说的是，有些虚拟机并出不来拨打电话的效果，如果你的虚拟机出不来这个效果，可以使用真机进行测试。
5、本节总结 ：
本节主要学习了使用url_launcher来进行打开网页和拨打电话的设置。希望小伙伴们都有所收获。
