Flutter快速拨号插件flutter_fab_dialer的使用

Introduction（介绍）

这是一个用于替代默认菜单的小部件。

有四种类型的快速拨号菜单项：

带文字和图像的菜单项

FabMiniMenuItem.withTextWithImage(
        img,
        4.0,
        "Button menu",
        _logCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      ),

只带文字的菜单项

FabMiniMenuItem.withText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _incrementCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      )

不带文字和图像的菜单项

FabMiniMenuItem.noTextWithImage(
        img,
        4.0,
        "Button menu",
        _incrementCounter,
        false
      )

不带文字和图像的菜单项

FabMiniMenuItem.noText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _logCounter,
        false
      )

Usage（使用方法）

创建一个包含所需元素的列表并自定义每个元素

var _fabMiniMenuItemList = [
      new FabMiniMenuItem.withTextWithImage(
        img,
        4.0,
        "Button menu",
        _logCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      ),

      new FabMiniMenuItem.withText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _incrementCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      ),
      new FabMiniMenuItem.noText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _logCounter,
        false
      ),

      new FabMiniMenuItem.noTextWithImage(
        img,
        4.0,
        "Button menu",
        _incrementCounter,
        false
      )
    ];

将拨号器添加到您的UI中

class _MyHomePageState extends State<MyHomePage> {

  // 提供一张猫的图片
  static String getNewCatUrl() {
     return 'http://thecatapi.com/api/images/get?format=src&type=jpg&size=small'
         '#${new DateTime.now().millisecondsSinceEpoch}';
   }

   int _counter = 0;

  // 增加计数器的值
   void _incrementCounter() {
     setState(() {
       _counter++;
     });
   }

   // 打印计数器的值
   void _logCounter() {
     setState(() {
       print(_counter);
     });
   }

  [@override](/user/override)
   Widget build(BuildContext context) {

     ImageProvider img = new NetworkImage(getNewCatUrl());

    // 我们将要使用的FabMiniMenuItems列表
     var _fabMiniMenuItemList = [
       new FabMiniMenuItem.withTextWithImage(
         img,
         4.0,
         "Button menu",
         _logCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),

       new FabMiniMenuItem.withText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _incrementCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),
       new FabMiniMenuItem.noText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _logCounter,
         false
       ),

       new FabMiniMenuItem.noTextWithImage(
         img,
         4.0,
         "Button menu",
         _incrementCounter,
         false
       )
     ];

     return new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
       ),
       // 使用Stack可以确保拨号器出现在布局的最后
       body:  new Stack(
         children: <Widget>[
           new Center(
             child: new Column(
               children: <Widget>[
                 new Text('You have pushed the button this many times:'),
                 new Text('$_counter', style: Theme.of(context).textTheme.display1),
               ],
             ),
           ),
           new FabDialer(_fabMiniMenuItemList, Colors.blue, new Icon(Icons.add)),
         ],
       ),
     );
   }
}

更多关于Flutter快速拨号插件flutter_fab_dialer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter快速拨号插件flutter_fab_dialer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_fab_dialer 是一个用于在 Flutter 应用中实现快速拨号功能的插件。它提供了一个浮动操作按钮（FAB），点击后可以展开一个拨号盘，用户可以通过该拨号盘快速拨打电话。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_fab_dialer 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_fab_dialer: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

使用插件

以下是一个简单的示例，展示如何在 Flutter 应用中使用 flutter_fab_dialer 插件：

import 'package:flutter/material.dart';
import 'package:flutter_fab_dialer/flutter_fab_dialer.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter FAB Dialer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter FAB Dialer Example'),
      ),
      body: Center(
        child: Text('Press the FAB to open the dialer.'),
      ),
      floatingActionButton: FlutterFabDialer(
        fabIcon: Icons.phone,
        fabColor: Colors.blue,
        dialerColor: Colors.white,
        dialerIconColor: Colors.blue,
        onDial: (String phoneNumber) {
          // 处理拨号逻辑
          print('Dialing: $phoneNumber');
          // 你可以在这里调用拨号功能
          // 例如：使用 url_launcher 插件拨打电话
        },
      ),
    );
  }
}

参数说明

  • fabIcon: 设置 FAB 的图标，默认为 Icons.phone。
  • fabColor: 设置 FAB 的背景颜色，默认为 Colors.blue。
  • dialerColor: 设置拨号盘的背景颜色，默认为 Colors.white。
  • dialerIconColor: 设置拨号盘图标的颜色，默认为 Colors.blue。
  • onDial: 当用户输入电话号码并点击拨号按钮时触发的回调函数。你可以在这个回调中处理拨号逻辑。

拨号功能

flutter_fab_dialer 插件本身并不直接处理拨号功能。你需要在 onDial 回调中使用其他插件（如 url_launcher）来实现拨号功能。

例如，使用 url_launcher 插件拨打电话：

import 'package:url_launcher/url_launcher.dart';

void _makePhoneCall(String phoneNumber) async {
  final Uri launchUri = Uri(
    scheme: 'tel',
    path: phoneNumber,
  );
  if (await canLaunch(launchUri.toString())) {
    await launch(launchUri.toString());
  } else {
    throw 'Could not launch $launchUri';
  }
}

然后在 onDial 回调中调用 _makePhoneCall 方法：

onDial: (String phoneNumber) {
  _makePhoneCall(phoneNumber);
},
回到顶部