Flutter移动电商实战 --（14）首页_拨打电话操作

Love The Way You Lie 2023-06-01 05:58 69阅读 0赞

拨打电话的功能在app里也很常见，比如一般的外卖app都会有这个才做。其实Flutter本身是没给我们提供拨打电话的能力的，那我们如何来拨打电话那?

#### 1、编写店长电话模块 ####

这个小伙伴们一定轻车熟路了，我也就不再多介绍吧。直接看代码，相信都能看懂。

#### 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';
        }
      }
    }

效果如下图所示：

![1090399-20190811222803002-797643740.png][]

这时候就可以打开虚拟机进行调试了，需要说的是，有些虚拟机并出不来拨打电话的效果，如果你的虚拟机出不来这个效果，可以使用真机进行测试。

#### 5、本节总结 ： ####

本节主要学习了使用url\_launcher来进行打开网页和拨打电话的设置。希望小伙伴们都有所收获。

转载于:https://www.cnblogs.com/crazycode2/p/11279159.html

[1090399-20190811222803002-797643740.png]: /images/20230601/9cd64edf06444b20ba6c06233ca0f29b.png