14-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( 750,height: 1334)..init(context);
    return Container(
      height: ScreenUtil().setHeight(333),
       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'], 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来进行打开网页和拨打电话的设置。希望小伙伴们都有所收获。