撥打電話的功能在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來進行打開網頁和撥打電話的設置。希望小伙伴們都有所收獲。

總結

以上是生活随笔為你收集整理的14-Flutter移动电商实战-ADBanner组件的编写的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。