使用flutter 快速完成一个IM前端项目-一一网

目标就是实现一个简单IM聊天工具，个人也接入过腾讯IM，融云IM，效果是还可以，
苦于收费，本身就用用户量不大，于是UI出图，让一两天写完，真不知道咋想的。

截屏2021-05-07 下午7.40.35.png

登录页面和聊天页面简单。很快就写完了
对话框实现文字发送,基本上按照UI还原了（发送语音，发送图片待做）具体效果一个放个APK吧

// 定义一个模拟的消息体
List<Map> item = [
     {"my": 0, "text": "我爱你"},
     {"my": 1, "text": "你也爱我吗"},
     {"my": 0, "text": "我爱你"},
  ];
  
// SingleChildScrollView 的控制器，发送消息之后控制滚动到消息最底部 
ScrollController _controller = ScrollController();
// 输入框的控制器
TextEditingController textEditingController = new TextEditingController();

int state = 0; // 0 啥也不显示   temp 临时数据  1 显示表情 2 更多

bool showKeyboard = false; // 默认不显示

// 集成 with WidgetsBindingObserver 
// 在initState 绑定一下WidgetsBinding.instance.addObserver(this);
//_controller.position.maxScrollExtent  // 最大可以滚动的范围

  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (mounted) {
        _controller.jumpTo(_controller.position.maxScrollExtent);
        if (MediaQuery.of(context).viewInsets.bottom == 0) {
          _controller.jumpTo(_controller.position.maxScrollExtent);
          print("关闭键盘");
          if (state != 0) {
            setState(() {
              showKeyboard = true;
            });
          }
        } else {
          print("显示键盘");
          //显示键盘
          if (showKeyboard != false) {
            setState(() {
              showKeyboard = false;
            });
          }
        }
      }
    });
  }

复制代码

在build 里面

// 第一次进入之后滚动到最底部，加个延迟防止没有加载完成就滚动
if (item.length > 0) {
      Timer(Duration(milliseconds: 100),
          () => _controller.jumpTo(_controller.position.maxScrollExtent));
    }
// 底部菜单输入框
// 使用bottomSheet,SafeArea如果不用这个异形屏不太好控制
// 使用TextField 输入框发的回车事件 进行模拟消息发送
onSubmitted: (value) {
                      contentNode.requestFocus();
                      textEditingController.text = "";
                      item.add({"my": 0, "text": value});
                      item.add({"my": 1, "text": "我爱你"});
                      setState(() {});
},

//在body 外面使用了一个
InkResponse(onTap: () {
          setState(() {
            state = 0;
            showKeyboard = false;
          });
          FocusScope.of(context).unfocus();
})
//在body 最底部
if (showKeyboard) // 留着占位用不然无法滚动到地步
                Container(
                  width: 1.sw,
                  height: 200.w,
                  color: Color(0xFFFFFFFF),
 )

复制代码

通讯录页面，使用类似于qq的好友列表


  // 模拟的数据
  List<Map<dynamic, dynamic>> map = [
    {
      "name": "默认分组",
      "childrend": ["李耀", "迪迦奥特曼", "塞罗奥特曼"]
    },
    {
      "name": "汽配供应商",
      "childrend": ["假老板", "真老板", "黄老板", "孙老板"]
    },
    {
      "name": "汽车技师",
      "childrend": ["技术1号", "技术2号", "技术3号", "技术4号"]
    },
    {
      "name": "附近维修厂",
      "childrend": ["维修厂一号", "维修厂二号", "维修厂三号", "维修厂4号"]
    },
  ];
  
  //  ExpansionItem 从源码里面提取出来的改动成自己想要的样式 太多了就不放了

   for (int i = 0; i < map.length; i++)
                ExpansionItem(
                  expandedAlignment: Alignment.topLeft,
                  title: child,
                  backgroundColor: Colors.white,
                  tilePadding: EdgeInsets.symmetric(horizontal: 16.w),
                  childrenPadding:
                      EdgeInsets.only(left: 16.w, right: 16.w, bottom: 17.w),
                  children: <Widget>[
                      // 自己的样式
                  ],
                ),
复制代码