SeacherBar 搜索页面

SeacherBar
语音界面
百度SDK接入

语音界面

CurvedAnimation将动画过程定义为一个非线性曲线。
addStatusListener：监听动画执行的状态，completed状态反向执行，dismissed状态从新开始动画。

@override
  void initState() {
    controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));// 初始化controller
    animation = CurvedAnimation(parent: controller, curve: Curves.easeIn)
      ..addStatusListener((status) {
        // 动画执行完毕，希望循环执行
        if (status == AnimationStatus.completed) {
          controller.reverse(); // 反向执行
        } else if (status == AnimationStatus.dismissed) {
          controller.forward(); // 开始动画
        }
      });
    super.initState();
  }

class AnimatedMic extends AnimatedWidget {
  static final _opacityTween = Tween<double>(begin: 1, end: 0.5); // 透明度 1 到 0.5
  static final _sizeTween =
      Tween<double>(begin: MIC_SIZE, end: MIC_SIZE - 20.0); // 大小变化

  AnimatedMic({Key key, Animation<double> animation})
      : super(key: key, listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;

    return Opacity(
      opacity: _opacityTween.evaluate(animation),
      child: Container(
        height: _sizeTween.evaluate(animation),
        width: _sizeTween.evaluate(animation),
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(MIC_SIZE / 2),
        ),
        child: Icon(
          Icons.mic,
          color: Colors.white,
          size: 30,
        ),
      ),
    );
  }
}

百度语音识别SDK

MethodChannel的定义

final MethodChannel _channel = const MethodChannel('asr_plugin');

重点来了，我们要实现Flutter与iOS和Android的交互就是通过这个MethodChannel。MethodChannel就是我们的信使，负责dart和原生代码通信。com.jarvanmo/fluwx是MethodChannel的名字，flutter通过一个具体的名字能才够在对应平台上找到对应的MethodChannel，从而实现flutter与平台的交互。同样地，我们在对应的平台上也要注册名为com.jarvanmo/fluwx的MethodChannel。

 public static void registerWith(PluginRegistry.Registrar registrar) {
        // 实例化MethodChannel 与 Dart关联
        MethodChannel channel = new MethodChannel(registrar.messenger(), "asr_plugin");
        AsrPlugin instance = new AsrPlugin(registrar);
        // 处理Dart端消息
        channel.setMethodCallHandler(instance);
    }

Flutter与原生通信
我们将传进来的参数重新组装成了Map并传递给了invokeMethod。其中invokeMethod函数第一个参数为函数名称，即registerApp，我们将在原生平台用到这个名字。第二个参数为要传递给原生的数据。第二个参数是dynamic的，那么我们是否可以传递任何数据类型呢？至少语法上是没有错误的，但实际上这是不允许的，只有对应平台的codec支持的类型才能进行传递，也就是上文提到的数据类型对应表，这条规则同样适用于返回值，也就是原生给Flutter传值。请记住这条规定，不再做赘述。

// 开始录音
  static Future<String> start({Map params}) async {
    return await _channel.invokeMethod('start', params ?? {});
  }

如何在原生接收Flutter传递过来的数据？
上面我们将数据通过Flutter传递给了原生，我们要原生代码里进行接收与处理

@Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        initPermission();
        switch (methodCall.method) {
            case "start":
                resultStateful = ResultStateful.of(result);
                start(methodCall, resultStateful);
                break;
            case "stop":
                stop(methodCall, result);
                break;
            case "cancel":
                cancel(methodCall, result);
                break;
            default:
                result.notImplemented();
        }
    }

call.method是方法名称，我们要通过方法名称比对完成调用匹配。当call.method == "registerApp"成立时，说明我们要调用registerApp，从而进行更多的操作。此时可能会有同学问，如发现call.method不存在怎么办？很简单，我们可以通过result向Flutter报告一下该方法没实现：
当调用这个方法之后，我们会在Flutter层收到一个没实现该方法的异常。
如何在原生接收Flutter传递过来的数据？
我们可以通过result向Flutter报告一下该方法没实现

  @Override
        public void onAsrFinalResult(String[] results, RecogResult recogResult) {
            if (resultStateful != null) {
                resultStateful.success(results[0]);
            }
        }

参考

带你轻松掌握Flutter 动画开发核心技能

Flutter携程APP页面实现

SeacherBar 搜索页面

语音界面

百度语音识别SDK

参考