Flutter移動電商實戰 --（14）首頁_撥打電話操做

撥打電話的功能在app裏也很常見，好比通常的外賣app都會有這個才作。其實Flutter自己是沒給咱們提供撥打電話的能力的，那咱們如何來撥打電話那?

一、編寫店長電話模塊

這個小夥伴們必定輕車熟路了，我也就再也不多介紹吧。直接看代碼，相信都能看懂。

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),
      ),
    );
  }
}

二、獲取須要的數據

在HomePage裏獲取獲取店長圖片和電話數據，並造成變量。

String  leaderImage= data['data']['shopInfo']['leaderImage'];  //店長圖片
String  leaderPhone = data['data']['shopInfo']['leaderPhone']; //店長電話 

有了數據以後，就能夠調用這個本身寫的組件了。調用方法以下：

LeaderPhone(leaderImage:leaderImage,leaderPhone: leaderPhone)  廣告組件  

三、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';

四、改造店長電話組件

有了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';
    }
  }
}

效果以下圖所示：

這時候就能夠打開虛擬機進行調試了，須要說的是，有些虛擬機並出不來撥打電話的效果，若是你的虛擬機出不來這個效果，可使用真機進行測試。

五、本節總結 ：

本節主要學習了使用url_launcher來進行打開網頁和撥打電話的設置。但願小夥伴們都有所收穫。