• Flutter简单聊天界面布局及语音录制播放

    目录

    前言：

     注意事项：

    用到的部分组件依赖及版本：

    遇到的坑 

    遇到的坑1：

     遇到的坑2：

    遇到的坑3：

    遇到的坑4：

    Fluuter语音录制及播放组件生命周期

    Flutter录音组件生命周期图：

     Flutter语音播放组件生命周期图：

    代码

    简单视频演示： 

    前言：

    有好多todo没实现，这里总结一下这两天遇到的坑及简单的聊天界面布局和语音录制和播放功能，这里只实现了ios端的语音录制播放功能，android端没有测试。

     注意事项：

    ios端需要开启访问麦克风权限，位置在ios->Runner->Info.plist

    1.     <key>NSMicrophoneUsageDescriptionkey>
    2.     <string>访问麦克风string>

    用到的部分组件依赖及版本：

    1.   #语音录制、播放插件
    2.   flutter_sound: ^9.2.13
    3.   #检查权限
    4.   permission_handler: ^6.0.1
    5.   #此插件会告知操作系统您的音频应用程序的性质（例如游戏、媒体播放器、助手等）以及您的应用程序将如何处理和启动音频中断（例如电话中断）
    6.   audio_session: ^0.1.10
    7.   #uuid
    8.   uuid: ^3.0.6

    遇到的坑 

    遇到的坑1

    聊天消息布局不满一页在上方显示，满一页则停留在最底部：

    解决方法

    使用listview反转设置可以一直保持消息在底部，但是消息数据必须要倒序；

    使用Container的向上居中可以使子元素撑不满一屏时向上显示。

     遇到的坑2

    在iPhoneX及所有刘海屏Bottom留白问题：

    解决方法

    使用SafeArea安全组件可解决此问题

    遇到的坑3

    IOS端在Xcode Build时报错：

    Undefined symbols for architecture arm64:
    "___gxx_personality_v0", referenced from:
    +[FlutterSound registerWithRegistrar:] in flutter_sound(FlutterSound.o)

     解决方法

    在Xcode Build Setting中的Other Linker Flags添加-lc++即可

    遇到的坑4

    点击录音按钮不提示申请权限直接报错：

    排查了好久原来是检查权限工具版本的bug,改为6.0.1可成功弹出权限申请 

    Fluuter语音录制及播放组件生命周期

    Flutter录音组件生命周期图

    Flutter录音组件生命周期图

     Flutter语音播放组件生命周期图

    Flutter语音播放组件生命周期图

    代码

    1. import 'dart:math';
    2. import 'dart:ui';
    3.  
    4. import 'package:audio_session/audio_session.dart';
    5. import 'package:dio/dio.dart';
    6. import 'package:flutter/foundation.dart';
    7. import 'package:flutter/material.dart';
    8. import 'package:fluttertoast/fluttertoast.dart';
    9. import 'package:new_chat/code/message_type.dart';
    10. import 'package:new_chat/r.dart';
    11. import 'package:new_chat/service/screen_adapter.dart';
    12. import 'package:new_chat/util/time_utils.dart';
    13. import 'package:new_chat/widget/toast_widget.dart';
    14. import 'package:flutter_sound/flutter_sound.dart';
    15. import 'package:flutter_sound_platform_interface/flutter_sound_recorder_platform_interface.dart';
    16. import 'package:permission_handler/permission_handler.dart';
    17. import 'package:logger/logger.dart' show Level;
    18. import 'package:uuid/uuid.dart';
    19.  
    20. class SingleChatPage extends StatefulWidget {
    21.   final String chatId;
    22.  
    23.   const SingleChatPage({Key? key, required this.chatId}) : super(key: key);
    24.  
    25.   @override
    26.   State createState() {
    27.     return _SingleChatPageState();
    28.   }
    29. }
    30.  
    31. class _SingleChatPageState extends State<SingleChatPage> {
    32.   //message data
    33.   List _messageData = [];
    34.  
    35.   ///语音播放及录制定义begin
    36.   //默认语音录制为关闭
    37.   bool _keyboardVoiceEnable = false;
    38.  
    39.   //listview跳转控制器
    40.   final ScrollController _scrollController = ScrollController();
    41.  
    42.   //消息文本控制器
    43.   final TextEditingController _textEditingController = TextEditingController();
    44.  
    45.   //语音类型
    46.   final AudioSource _theSource = AudioSource.microphone;
    47.  
    48.   //存储录音编码格式
    49.   Codec _codec = Codec.aacMP4;
    50.  
    51.   //播放器权限
    52.   bool _voicePlayerIsInitialized = false;
    53.  
    54.   //录制权限
    55.   bool _voiceRecorderIsInitialized = false;
    56.  
    57.   //播放器是否可播放
    58.   bool _voicePlayerIsReady = false;
    59.  
    60.   //播放器是否在播放
    61.   bool _voicePlayerIsPlay = false;
    62.  
    63.   //语音播放工具
    64.   final FlutterSoundPlayer _voicePlayer =
    65.       FlutterSoundPlayer(logLevel: Level.error);
    66.  
    67.   //语音录制工具
    68.   final FlutterSoundRecorder _voiceRecorder =
    69.       FlutterSoundRecorder(logLevel: Level.error);
    70.  
    71.   //存储文件后缀
    72.   String _voiceFilePathSuffix = 'temp_file.mp4';
    73.  
    74.   //录音文件存储前缀
    75.   String _voiceFilePrefix = "";
    76.  
    77.   ///语音播放及录制定义end
    78.  
    79.   @override
    80.   void initState() {
    81.     _initMessageData();
    82.     //初始化播放器
    83.     _voicePlayer.openPlayer().then((value) {
    84.       setState(() {
    85.         _voicePlayerIsInitialized = true;
    86.       });
    87.     });
    88.     //初始化录音
    89.     _initVoiceRecorder().then((value) {
    90.       setState(() {
    91.         _voiceRecorderIsInitialized = true;
    92.       });
    93.     });
    94.     super.initState();
    95.   }
    96.  
    97.   @override
    98.   void dispose() {
    99.     //关闭语音播放
    100.     _voicePlayer.closePlayer();
    101.     //关闭语音录制
    102.     _voiceRecorder.closeRecorder();
    103.     super.dispose();
    104.   }
    105.  
    106.   ///录音及语音方法定义begin
    107.   ///初始录音
    108.   ///todo 用户禁止语音权限提示
    109.   Future<void> _initVoiceRecorder() async {
    110.     if (!kIsWeb) {
    111.       var status = await Permission.microphone.request();
    112.       if (status != PermissionStatus.granted) {
    113.         throw RecordingPermissionException('Microphone permission not granted');
    114.       }
    115.     }
    116.     await _voiceRecorder.openRecorder();
    117.     if (!await _voiceRecorder.isEncoderSupported(_codec) && kIsWeb) {
    118.       _codec = Codec.opusWebM;
    119.       _voiceFilePathSuffix = 'tau_file.webm';
    120.       if (!await _voiceRecorder.isEncoderSupported(_codec) && kIsWeb) {
    121.         _voiceRecorderIsInitialized = true;
    122.         return;
    123.       }
    124.     }
    125.     final session = await AudioSession.instance;
    126.     await session.configure(AudioSessionConfiguration(
    127.       avAudioSessionCategory: AVAudioSessionCategory.playAndRecord,
    128.       avAudioSessionCategoryOptions:
    129.           AVAudioSessionCategoryOptions.allowBluetooth |
    130.               AVAudioSessionCategoryOptions.defaultToSpeaker,
    131.       avAudioSessionMode: AVAudioSessionMode.spokenAudio,
    132.       avAudioSessionRouteSharingPolicy:
    133.           AVAudioSessionRouteSharingPolicy.defaultPolicy,
    134.       avAudioSessionSetActiveOptions: AVAudioSessionSetActiveOptions.none,
    135.       androidAudioAttributes: const AndroidAudioAttributes(
    136.         contentType: AndroidAudioContentType.speech,
    137.         flags: AndroidAudioFlags.none,
    138.         usage: AndroidAudioUsage.voiceCommunication,
    139.       ),
    140.       androidAudioFocusGainType: AndroidAudioFocusGainType.gain,
    141.       androidWillPauseWhenDucked: true,
    142.     ));
    143.     _voiceRecorderIsInitialized = true;
    144.   }
    145.  
    146.   ///开始录音并返回录音文件前缀
    147.   String _beginVoice() {
    148.     if (!_voiceRecorderIsInitialized) {
    149.       ToastWidget.showToast("没有录音权限", ToastGravity.CENTER);
    150.       throw Exception("没有录音权限");
    151.     }
    152.     var uuid = const Uuid().v4();
    153.     _voiceRecorder
    154.         .startRecorder(
    155.             codec: _codec,
    156.             toFile: uuid + _voiceFilePathSuffix,
    157.             audioSource: _theSource)
    158.         .then((value) {
    159.       setState(() {
    160.         //播放按钮禁用并插入语音到消息中
    161.         _voicePlayerIsReady = false;
    162.       });
    163.     });
    164.     return uuid;
    165.   }
    166.  
    167.   ///停止录音 并将消息存储
    168.   void _stopVoice(String voiceFileId) async {
    169.     await _voiceRecorder.stopRecorder().then((value) {
    170.       setState(() {
    171.         //可以播放
    172.         _voicePlayerIsReady = true;
    173.         Map data = {};
    174.         data['messageId'] = voiceFileId;
    175.         //todo 差语音时长
    176.         data['message'] = "语音消息按钮...";
    177.         data['messageType'] = MessageType.voice;
    178.         data['messageTime'] = TimeUtils.getFormatDataString(
    179.             DateTime.now(), "yyyy-MM-dd HH:mm:ss");
    180.         data['isMe'] = Random.secure().nextBool();
    181.         //存储路径
    182.         data['messageVoice'] = voiceFileId + _voiceFilePathSuffix;
    183.         _messageData.insert(0, data);
    184.       });
    185.     });
    186.   }
    187.  
    188.   ///开始播放录音
    189.   void _beginPlayer(String messageVoiceFilePath) {
    190.     assert(_voicePlayerIsInitialized &&
    191.         _voicePlayerIsReady &&
    192.         _voiceRecorder.isStopped &&
    193.         _voicePlayer.isStopped);
    194.     _voicePlayer
    195.         .startPlayer(
    196.             fromURI: messageVoiceFilePath,
    197.             //codec: kIsWeb ? Codec.opusWebM : Codec.aacADTS,
    198.             //语音播放完后的动作->停止播放
    199.             whenFinished: () {
    200.               setState(() {
    201.                 print("播放完的动作");
    202.                 _voicePlayerIsPlay = false;
    203.                 _voicePlayerIsReady = true;
    204.               });
    205.             })
    206.         .then((value) {
    207.       //语音正在播放的动作->正在播放
    208.       setState(() {
    209.         print("语音正在播放的动作");
    210.         _voicePlayerIsPlay = true;
    211.         _voicePlayerIsReady = false;
    212.       });
    213.     });
    214.   }
    215.  
    216.   ///停止播放声音
    217.   void _stopPlayer() {
    218.     _voicePlayer.stopPlayer().then((value) {
    219.       setState(() {
    220.         _voicePlayerIsReady = true;
    221.         _voicePlayerIsPlay = false;
    222.       });
    223.     });
    224.   }
    225.  
    226.   ///录音及语音方法定义end
    227.  
    228.   ///初始化聊天数据
    229.   //todo 差网络请求聊天数据 这里暂时mock
    230.   _initMessageData() async {
    231.     Dio dio = Dio();
    232.     //mock data
    233.     try {
    234.       //todo timeout 1 seconds
    235.       var response = await dio
    236.           .get(
    237.             "http://192.168.10.15:3000/mock/313/message",
    238.           )
    239.           .timeout(const Duration(seconds: 1));
    240.       setState(() {
    241.         _messageData = response.data['data'];
    242.       });
    243.     } catch (e) {
    244.       //mock test data
    245.       List<Map> tempData = [];
    246.       Map data = {};
    247.       data['messageId'] = const Uuid().v4();
    248.       data['message'] = "嗯，没问题。明天我起床就联系你。";
    249.       data['isMe'] = false;
    250.       data['messageTime'] = "2022-08-17 16:20:20";
    251.       data['messageType'] = MessageType.text;
    252.       tempData.add(data);
    253.       data = {};
    254.       data['messageId'] = const Uuid().v4();
    255.       data['message'] = "好的。有什么事情及时联系我都在线的。";
    256.       data['isMe'] = true;
    257.       data['messageTime'] = "2022-08-17 16:19:20";
    258.       data['messageType'] = MessageType.text;
    259.  
    260.       tempData.add(data);
    261.       data = {};
    262.       data['messageId'] = const Uuid().v4();
    263.  
    264.       data['message'] = "晚安！";
    265.       data['isMe'] = false;
    266.       data['messageTime'] = "2022-08-17 16:16:20";
    267.       data['messageType'] = MessageType.text;
    268.  
    269.       tempData.add(data);
    270.       data = {};
    271.       data['messageId'] = const Uuid().v4();
    272.  
    273.       data['message'] = "嗯，今晚好好休息！";
    274.       data['isMe'] = false;
    275.       data['messageTime'] = "2022-08-17 16:15:20";
    276.       data['messageType'] = MessageType.text;
    277.  
    278.       tempData.add(data);
    279.       data = {};
    280.       data['messageId'] = const Uuid().v4();
    281.  
    282.       data['message'] = "好的，那到时见！！！";
    283.       data['isMe'] = true;
    284.       data['messageTime'] = "2022-08-16 01:15:20";
    285.       data['messageType'] = MessageType.text;
    286.  
    287.       tempData.add(data);
    288.       data = {};
    289.       data['messageId'] = const Uuid().v4();
    290.  
    291.       data['message'] = "不用准备什么东西，我都已经准备好了。应该是吃完午餐就出发吧。大概下午2点左右。";
    292.       data['isMe'] = false;
    293.       data['messageTime'] = "2022-08-16 01:13:20";
    294.       data['messageType'] = MessageType.text;
    295.  
    296.       tempData.add(data);
    297.       data = {};
    298.       data['messageId'] = const Uuid().v4();
    299.  
    300.       data['message'] = "需要准备什么东西带过去";
    301.       data['isMe'] = true;
    302.       data['messageTime'] = "2022-08-15 12:42:20";
    303.       data['messageType'] = MessageType.text;
    304.  
    305.       tempData.add(data);
    306.       data = {};
    307.       data['messageId'] = const Uuid().v4();
    308.  
    309.       data['message'] = "好的，10点左右可以的。你打算几点出发？";
    310.       data['isMe'] = true;
    311.       data['messageTime'] = "2022-08-14 14:24:20";
    312.       data['messageType'] = MessageType.text;
    313.  
    314.       tempData.add(data);
    315.       data = {};
    316.       data['messageId'] = const Uuid().v4();
    317.  
    318.       data['message'] = "嗯，大概上午10点左右吧。 如果没空就下午。";
    319.       data['isMe'] = false;
    320.       data['messageTime'] = "2022-08-13 11:11:22";
    321.       data['messageType'] = MessageType.text;
    322.  
    323.       tempData.add(data);
    324.       data = {};
    325.       data['messageId'] = const Uuid().v4();
    326.  
    327.       data['message'] = "明天什么时候呢？？？";
    328.       data['isMe'] = true;
    329.       data['messageTime'] = "2022-08-12 10:32:11";
    330.       data['messageType'] = MessageType.text;
    331.  
    332.       tempData.add(data);
    333.       data = {};
    334.       data['messageId'] = const Uuid().v4();
    335.  
    336.       data['message'] = "你明天有空过来吗？？";
    337.       data['isMe'] = false;
    338.       data['messageTime'] = "2022-08-12 10:31:24";
    339.       data['messageType'] = MessageType.text;
    340.  
    341.       tempData.add(data);
    342.       setState(() {
    343.         _messageData = tempData;
    344.       });
    345.     }
    346.   }
    347.  
    348.   // chat widget
    349.   //todo 后期需要根据messageSendType区分
    350.   Widget _chatWidget(Map data) {
    351.     if (data['isMe']) {
    352.       return _myMessageWidget(data);
    353.     }
    354.     return _yourMessageWidget(data);
    355.   }
    356.  
    357.   //your message widget
    358.   Widget _yourMessageWidget(Map data) {
    359.     String messageType = data['messageType'];
    360.     return Padding(
    361.       padding: EdgeInsets.fromLTRB(ScreenAdapter.width(32),
    362.           ScreenAdapter.height(20), 0, ScreenAdapter.height(20)),
    363.       child: Row(
    364.         mainAxisAlignment: MainAxisAlignment.start,
    365.         children: [
    366.           Container(
    367.             constraints: BoxConstraints(
    368.               maxWidth: ScreenAdapter.width(450),
    369.             ),
    370.             padding: EdgeInsets.fromLTRB(
    371.                 ScreenAdapter.width(20),
    372.                 ScreenAdapter.height(24),
    373.                 ScreenAdapter.width(20),
    374.                 ScreenAdapter.height(24)),
    375.             decoration: BoxDecoration(
    376.                 borderRadius: BorderRadius.circular(ScreenAdapter.width(20)),
    377.                 color: const Color.fromRGBO(255, 255, 255, 1),
    378.                 boxShadow: const [
    379.                   BoxShadow(
    380.                       color: Color.fromRGBO(0, 0, 0, 0.07),
    381.                       offset: Offset(0, 4),
    382.                       blurRadius: 8,
    383.                       spreadRadius: 0)
    384.                 ]),
    385.             child: messageType == MessageType.text
    386.                 ? Text(
    387.                     data['message'],
    388.                     style: TextStyle(
    389.                         color: const Color.fromRGBO(51, 51, 51, 1),
    390.                         fontSize: ScreenAdapter.size(28)),
    391.                   )
    392.             //todo 差语音样式
    393.                 : GestureDetector(
    394.                     onTap: () {
    395.                       //如果可播放且没有在播放则播放
    396.                       if (_voicePlayerIsReady && !_voicePlayerIsPlay) {
    397.                         _beginPlayer(data['messageVoice']);
    398.                       }
    399.                       //如果可播放且在播放 则停止播放
    400.                       if (_voicePlayerIsReady && _voicePlayerIsPlay) {
    401.                         _stopPlayer();
    402.                       }
    403.                     },
    404.                     child: Text(
    405.                       "语音消息....",
    406.                       style: TextStyle(
    407.                           color: const Color.fromRGBO(51, 51, 51, 1),
    408.                           fontSize: ScreenAdapter.size(28)),
    409.                     ),
    410.                   ),
    411.           ),
    412.           Padding(
    413.             padding: EdgeInsets.only(left: ScreenAdapter.width(20)),
    414.             child: Text(
    415.               TimeUtils.setMessageTime(data['messageTime']),
    416.               style: TextStyle(
    417.                   color: const Color.fromRGBO(183, 183, 183, 1),
    418.                   fontSize: ScreenAdapter.size(20),
    419.                   fontWeight: FontWeight.w500),
    420.             ),
    421.           )
    422.         ],
    423.       ),
    424.     );
    425.   }
    426.  
    427.   //my message widget
    428.   Widget _myMessageWidget(Map data) {
    429.     String messageType = data['messageType'];
    430.     return Padding(
    431.         padding: EdgeInsets.fromLTRB(0, ScreenAdapter.height(20),
    432.             ScreenAdapter.width(32), ScreenAdapter.height(20)),
    433.         child: Row(
    434.           mainAxisAlignment: MainAxisAlignment.end,
    435.           crossAxisAlignment: CrossAxisAlignment.center,
    436.           children: [
    437.             Padding(
    438.               padding: EdgeInsets.only(right: ScreenAdapter.width(20)),
    439.               child: Text(
    440.                 TimeUtils.setMessageTime(data['messageTime']),
    441.                 style: TextStyle(
    442.                     color: const Color.fromRGBO(183, 183, 183, 1),
    443.                     fontSize: ScreenAdapter.size(20),
    444.                     fontWeight: FontWeight.w500),
    445.               ),
    446.             ),
    447.             Container(
    448.               constraints: BoxConstraints(
    449.                 maxWidth: ScreenAdapter.width(450),
    450.               ),
    451.               //message
    452.               padding: EdgeInsets.fromLTRB(
    453.                   ScreenAdapter.width(20),
    454.                   ScreenAdapter.height(24),
    455.                   ScreenAdapter.width(20),
    456.                   ScreenAdapter.height(24)),
    457.               decoration: BoxDecoration(
    458.                   borderRadius: BorderRadius.circular(ScreenAdapter.width(20)),
    459.                   gradient: const LinearGradient(
    460.                     begin: Alignment.bottomCenter,
    461.                     end: Alignment.topCenter,
    462.                     colors: [
    463.                       Color.fromRGBO(99, 133, 230, 1),
    464.                       Color.fromRGBO(179, 106, 232, 1),
    465.                     ],
    466.                   ),
    467.                   boxShadow: const [
    468.                     BoxShadow(
    469.                         color: Color.fromRGBO(111, 129, 230, 0.2),
    470.                         offset: Offset(0, 4),
    471.                         blurRadius: 8,
    472.                         spreadRadius: 0)
    473.                   ]),
    474.               //todo 后期要使用switch 这里先解决文本和语音
    475.               child: messageType == MessageType.text
    476.                   ? Text(
    477.                       data['message'],
    478.                       style: TextStyle(
    479.                           color: const Color.fromRGBO(255, 255, 255, 1),
    480.                           fontSize: ScreenAdapter.size(28)),
    481.                     )
    482.               //todo 差语音样式
    483.                   : GestureDetector(
    484.                       onTap: () {
    485.                         //如果可播放且没有在播放则播放
    486.                         if (_voicePlayerIsReady && !_voicePlayerIsPlay) {
    487.                           _beginPlayer(data['messageVoice']);
    488.                         }
    489.                         //如果可播放且在播放 则停止播放
    490.                         if (_voicePlayerIsReady && _voicePlayerIsPlay) {
    491.                           _stopPlayer();
    492.                         }
    493.                       },
    494.                       child: Text(
    495.                         "语音消息....",
    496.                         style: TextStyle(
    497.                             color: const Color.fromRGBO(255, 255, 255, 1),
    498.                             fontSize: ScreenAdapter.size(28)),
    499.                       ),
    500.                     ),
    501.             ),
    502.           ],
    503.         ));
    504.   }
    505.  
    506.   @override
    507.   Widget build(BuildContext context) {
    508.     ScreenAdapter.init(context);
    509.     return Scaffold(
    510.       body: Column(
    511.         children: [
    512.           //head
    513.           Container(
    514.             height: ScreenAdapter.height(220),
    515.             width: ScreenAdapter.width(750),
    516.             //padding only top->status bar
    517.             padding: EdgeInsets.only(
    518.                 top: MediaQueryData.fromWindow(window).padding.top),
    519.             //setting LinearGradient
    520.             decoration: const BoxDecoration(
    521.                 boxShadow: [
    522.                   BoxShadow(
    523.                     offset: Offset(0, 8),
    524.                     blurRadius: 28,
    525.                     spreadRadius: 0,
    526.                     color: Color.fromRGBO(60, 70, 74, 0.3),
    527.                   )
    528.                 ],
    529.                 gradient: LinearGradient(
    530.                   begin: Alignment.bottomCenter,
    531.                   end: Alignment.topCenter,
    532.                   colors: [
    533.                     Color.fromRGBO(99, 133, 230, 1),
    534.                     Color.fromRGBO(179, 106, 232, 1),
    535.                   ],
    536.                 )),
    537.             //head widget
    538.             child: Row(
    539.               mainAxisAlignment: MainAxisAlignment.spaceBetween,
    540.               children: [
    541.                 //left row
    542.                 Row(
    543.                   children: [
    544.                     //break menu
    545.                     Container(
    546.                       margin: EdgeInsets.only(left: ScreenAdapter.width(44)),
    547.                       child: InkWell(
    548.                         onTap: () {
    549.                           Navigator.pop(context);
    550.                         },
    551.                         child: Image.asset(R.assetsImgLeftMenu,
    552.                             height: ScreenAdapter.height(42),
    553.                             width: ScreenAdapter.width(25)),
    554.                       ),
    555.                     ),
    556.                     //user portrait
    557.                     Container(
    558.                       margin: EdgeInsets.only(left: ScreenAdapter.width(27)),
    559.                       child: ClipOval(
    560.                         child: Image.network(
    561.                           "https://img2.baidu.com/it/u=2518930323,4285282159&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
    562.                           width: ScreenAdapter.width(80),
    563.                           height: ScreenAdapter.height(80),
    564.                           fit: BoxFit.cover,
    565.                         ),
    566.                       ),
    567.                     )
    568.                   ],
    569.                 ),
    570.                 //center column
    571.                 Column(
    572.                   mainAxisAlignment: MainAxisAlignment.center,
    573.                   crossAxisAlignment: CrossAxisAlignment.start,
    574.                   children: [
    575.                     Text("Shakibul Islam",
    576.                         style: TextStyle(
    577.                             color: const Color.fromRGBO(255, 255, 255, 1),
    578.                             fontSize: ScreenAdapter.size(32))),
    579.                     Text("最近会话 8:00",
    580.                         style: TextStyle(
    581.                             color: const Color.fromRGBO(255, 255, 255, 1),
    582.                             fontSize: ScreenAdapter.size(24))),
    583.                   ],
    584.                 ),
    585.                 //right row
    586.                 Row(
    587.                   children: [
    588.                     Container(
    589.                       margin: EdgeInsets.only(right: ScreenAdapter.width(40)),
    590.                       width: ScreenAdapter.width(38),
    591.                       height: ScreenAdapter.height(24),
    592.                       child: Image.asset(R.assetsImgChatVideo),
    593.                     ),
    594.                     Container(
    595.                       margin: EdgeInsets.only(right: ScreenAdapter.width(40)),
    596.                       child: Image.asset(R.assetsImgChatPhone,
    597.                           width: ScreenAdapter.width(32),
    598.                           height: ScreenAdapter.height(32)),
    599.                     ),
    600.                     Container(
    601.                       margin: EdgeInsets.only(right: ScreenAdapter.width(48)),
    602.                       child: Image.asset(R.assetsImgChatGroup,
    603.                           width: ScreenAdapter.width(8),
    604.                           height: ScreenAdapter.height(36)),
    605.                     )
    606.                   ],
    607.                 )
    608.               ],
    609.             ),
    610.           ),
    611.           //chat listview
    612.           //todo 差消息撤回、删除、多选删除
    613.           Expanded(
    614.             flex: 1,
    615.             child: Container(
    616.                 alignment: Alignment.topCenter,
    617.                 color: const Color.fromRGBO(244, 243, 249, 1),
    618.                 child: MediaQuery.removePadding(
    619.                   removeTop: true,
    620.                   removeBottom: true,
    621.                   context: context,
    622.                   child: ListView.builder(
    623.                       shrinkWrap: true,
    624.                       reverse: true,
    625.                       controller: _scrollController,
    626.                       itemCount: _messageData.length,
    627.                       itemBuilder: (BuildContext context, int index) {
    628.                         return _chatWidget(_messageData[index]);
    629.                       }),
    630.                 )),
    631.           ),
    632.           //bottom TextField
    633.           //set bottom color
    634.           ColoredBox(
    635.             color: const Color.fromRGBO(244, 243, 249, 0.5),
    636.             child: SafeArea(
    637.                 top: false,
    638.                 left: false,
    639.                 right: false,
    640.                 // maintainBottomViewPadding: true,
    641.                 child: Padding(
    642.                   padding: EdgeInsets.fromLTRB(
    643.                       ScreenAdapter.width(32),
    644.                       ScreenAdapter.height(20),
    645.                       ScreenAdapter.width(25),
    646.                       ScreenAdapter.height(20)),
    647.                   child: Row(
    648.                     mainAxisAlignment: MainAxisAlignment.center,
    649.                     children: [
    650.                       //TextField SizedBox
    651.                       SizedBox(
    652.                           width: ScreenAdapter.width(484),
    653.                           //TextField BoxDecoration
    654.                           child: TextField(
    655.                             minLines: 1,
    656.                             maxLines: 3,
    657.                             //发送按钮
    658.                             textInputAction: TextInputAction.send,
    659.                             controller: _textEditingController,
    660.                             //键盘弹起聊天页面滚到底部
    661.                             onTap: () {
    662.                               _scrollController.jumpTo(0);
    663.                             },
    664.                             onSubmitted: (String str) {
    665.                               _textEditingController.clear();
    666.                               if (str.isNotEmpty) {
    667.                                 setState(() {
    668.                                   Map data = {};
    669.                                   data['messageId'] = const Uuid().v4();
    670.                                   data['messageType'] = MessageType.text;
    671.                                   data['message'] = str;
    672.                                   data['messageTime'] =
    673.                                       TimeUtils.getFormatDataString(
    674.                                           DateTime.now(),
    675.                                           "yyyy-MM-dd HH:mm:ss");
    676.                                   data['isMe'] = Random.secure().nextBool();
    677.                                   _messageData.insert(0, data);
    678.                                 });
    679.                               }
    680.                             },
    681.                             //带外边框的样式
    682.                             decoration: InputDecoration(
    683.                                 filled: true,
    684.                                 fillColor: Colors.white,
    685.                                 hintText: "输入信息......",
    686.                                 contentPadding: const EdgeInsets.all(10),
    687.                                 suffixIcon: GestureDetector(
    688.                                   //长摁录音
    689.                                   onLongPress: () {
    690.                                     setState(() {
    691.                                       _keyboardVoiceEnable =
    692.                                           !_keyboardVoiceEnable;
    693.                                     });
    694.                                     //调取录音方法
    695.                                     if (_voicePlayerIsInitialized) {
    696.                                       _voiceFilePrefix = _beginVoice();
    697.                                     }
    698.                                   },
    699.                                   onLongPressUp: () async {
    700.                                     //停止录音并写入消息
    701.                                     if (_voicePlayerIsInitialized) {
    702.                                       _stopVoice(_voiceFilePrefix);
    703.                                     }
    704.                                     setState(() {
    705.                                       _keyboardVoiceEnable =
    706.                                           !_keyboardVoiceEnable;
    707.                                     });
    708.                                     //jumpToBottom
    709.                                     _scrollController.jumpTo(0);
    710.                                   },
    711.                                   child: Icon(
    712.                                     Icons.keyboard_voice,
    713.                                     color: _keyboardVoiceEnable
    714.                                         ? Colors.blue
    715.                                         : Colors.black26,
    716.                                   ),
    717.                                 ),
    718.                                 //获得焦点时的边框样式
    719.                                 focusedBorder: OutlineInputBorder(
    720.                                     borderRadius: BorderRadius.all(
    721.                                         Radius.circular(
    722.                                             ScreenAdapter.width(40))),
    723.                                     borderSide: BorderSide(
    724.                                         color: const Color.fromRGBO(
    725.                                             99, 133, 230, 1),
    726.                                         width: ScreenAdapter.width(4))),
    727.                                 //允许编辑焦点时的边框样式
    728.                                 enabledBorder: OutlineInputBorder(
    729.                                     borderRadius: BorderRadius.all(
    730.                                         Radius.circular(
    731.                                             ScreenAdapter.width(40))),
    732.                                     borderSide: BorderSide(
    733.                                         color: const Color.fromRGBO(
    734.                                             99, 133, 230, 1),
    735.                                         width: ScreenAdapter.width(4)))),
    736.                           )),
    737.                       Expanded(
    738.                           child: Row(
    739.                         mainAxisAlignment: MainAxisAlignment.spaceAround,
    740.                         children: const [
    741.                           //todo 差相机按钮事件
    742.                           Icon(
    743.                             Icons.camera_alt_outlined,
    744.                             color: Color.fromRGBO(164, 175, 207, 1),
    745.                           ),
    746.                           //todo 差相册按钮事件
    747.                           Icon(
    748.                             Icons.photo,
    749.                             color: Color.fromRGBO(164, 175, 207, 1),
    750.                           ),
    751.                           //todo 还没想好
    752.                           Icon(
    753.                             Icons.add_circle,
    754.                             color: Colors.blue,
    755.                           ),
    756.                         ],
    757.                       ))
    758.                     ],
    759.                   ),
    760.                 )),
    761.           )
    762.           //chat widget
    763.           //chat list
    764.         ],
    765.       ),
    766.     );
    767.   }
    768. }

    简单视频演示： 

    Flutter简单聊天界面布局及语音录制播放配套视频

  • 相关阅读:
    传输层_TCP&UDP
    CentOS 7 下 Ruby 环境搭建（编译安装）
    [本人毕业设计] 别踩白块_计算机科学与技术_前端H5游戏毕设
    el-table 列内容溢出 显示省略号 悬浮显示文字
    【重拾C语言】七、指针（三）指针与字符串（字符串与字符串数组；指针与字符串的遍历、拷贝、比较；反转字符串）
    迁移人大金仓问题汇总
    【Python】PySpark 数据计算 ① ( RDD#map 方法 | RDD#map 语法 | 传入普通函数 | 传入 lambda 匿名函数 | 链式调用 )
    Spark入门（一篇就够了）
    .nc格式文件的显示及特殊裁剪方式
    听说你要删库跑路了？这篇Linux脚本请收好
  • 原文地址：https://blog.csdn.net/u013600907/article/details/126505527