flutter 移动通知_Flutter移动电商实战 --（14）首页_拨打电话操作

拨打电话的功能在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 {

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 swiper = (data['data']['slides'] as List).cast();

List 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: [

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: [

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来进行打开网页和拨打电话的设置。希望小伙伴们都有所收获。