Flutter携程APP页面实现

SeacherBar 搜索页面

目录

• SeacherBar
• 语音界面
• 百度SDK接入

image.png

对InputDecoration进行了封装，拥有多种成员函数，是否禁止搜索、按钮隐藏、背景颜色、函数回调等多种功能。
final void Function() leftButtonClick; 将函数从其他地方传入，加大扩展性。
_wrapTap() 封装函数对可点击的按钮进行封装
ValueChanged 文本内容变换监听，用于改变按钮的样式
优化：原因：由于每次文本变化需要从网络拉取数据，可能造成用户输入的内容不是真正需要显示的内容。
解决：在网络请求方法保存keyword。检查请求来的keyword是否一样。检查Widget重绘的次数，并且解决BUG。

_wrapTap(Widget child, void Function() callback) {
  return GestureDetector(
     onTap: () {
       if (callback != null) callback();
     },
     child: child,
   );
 }

  SearchDao.fetch(url, text).then((SearchModel model) {
      // 只有当当前输入的内容与服务端返回的内容一致才渲染
      if (model.keyword == keyword) {// 检验keyword
        setState(() {
          searchModel = model;
        });
      }
    }).catchError((e) {
      print(e);
    });

语音界面

image.png

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(begin: 1, end: 0.5); // 透明度 1 到 0.5
  static final _sizeTween =
      Tween(begin: MIC_SIZE, end: MIC_SIZE - 20.0); // 大小变化

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

  @override
  Widget build(BuildContext context) {
    final Animation 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,
        ),
      ),
    );
  }
}

Animation:在Flutter中，Animation对象本身和UI渲染没有任何关系。Animation是一个抽象类，它拥有其当前值和状态（完成或停止）。其中一个比较常用的Animation类是Animation。
Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。 根据Animation对象的控制方式，动画可以反向运行，甚至可以在中间切换方向。

• Animation还可以生成除double之外的其他类型值，如：Animation 或 >Animation；
• Animation对象有状态。可以通过访问其value属性获取动画的当前值；
• Animation对象本身和UI渲染没有任何关系；

百度语音识别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 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 动画开发核心技能