voice note ui added.

design_3.0_demo_module
Sikander Saleem 5 months ago
parent a9ce4eac3d
commit 3b6a0eea3c

@ -8,6 +8,8 @@ import 'package:test_sa/modules/cm_module/views/components/action_button/footer_
import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/default_app_bar.dart'; import 'package:test_sa/new_views/common_widgets/default_app_bar.dart';
enum ChatState { idle, voiceRecordingStarted, voiceRecordingCompleted }
class ChatPage extends StatefulWidget { class ChatPage extends StatefulWidget {
ChatPage({Key? key}) : super(key: key); ChatPage({Key? key}) : super(key: key);
@ -25,13 +27,22 @@ class _ChatPageState extends State<ChatPage> {
final RecorderController recorderController = RecorderController(); final RecorderController recorderController = RecorderController();
PlayerController playerController = PlayerController(); PlayerController playerController = PlayerController();
ChatState chatState = ChatState.idle;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
playerController.addListener(() async {
// if (playerController.playerState == PlayerState.playing && playerController.maxDuration == await playerController.getDuration()) {
// await playerController.stopPlayer();
// setState(() {});
// }
});
} }
@override @override
void dispose() { void dispose() {
playerController.dispose();
recorderController.dispose(); recorderController.dispose();
super.dispose(); super.dispose();
} }
@ -87,47 +98,37 @@ class _ChatPageState extends State<ChatPage> {
constraints: const BoxConstraints(minHeight: 56), constraints: const BoxConstraints(minHeight: 56),
child: Row( child: Row(
children: [ children: [
if (recordedFilePath == null) ...[ if (chatState == ChatState.idle) ...[
isAudioRecording TextFormField(
? AudioWaveforms( cursorColor: AppColor.neutral50,
size: Size(MediaQuery.of(context).size.width, 56.0), style: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
minLines: 1,
// enableGesture: true, maxLines: 3,
textInputAction: TextInputAction.none,
waveStyle: const WaveStyle(waveColor: AppColor.neutral50, extendWaveform: true, showMiddleLine: false), keyboardType: TextInputType.multiline,
padding: const EdgeInsets.only(left: 16), decoration: InputDecoration(
recorderController: recorderController, // Customize how waveforms looks. enabledBorder: InputBorder.none,
).expanded focusedBorder: InputBorder.none,
: TextFormField( border: InputBorder.none,
cursorColor: AppColor.neutral50, errorBorder: InputBorder.none,
style: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50), contentPadding: const EdgeInsets.only(left: 16, top: 8, bottom: 8),
minLines: 1, alignLabelWithHint: true,
maxLines: 3, filled: true,
textInputAction: TextInputAction.none, constraints: const BoxConstraints(),
keyboardType: TextInputType.multiline, suffixIconConstraints: const BoxConstraints(),
decoration: InputDecoration( hintText: "Type your message here...",
enabledBorder: InputBorder.none, hintStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xffCCCCCC)),
focusedBorder: InputBorder.none, // suffixIcon: Row(
border: InputBorder.none, // mainAxisSize: MainAxisSize.min,
errorBorder: InputBorder.none, // crossAxisAlignment: CrossAxisAlignment.end,
contentPadding: const EdgeInsets.only(left: 16, top: 8, bottom: 8), // mainAxisAlignment: MainAxisAlignment.end,
alignLabelWithHint: true, // children: [
filled: true, //
constraints: const BoxConstraints(), // 8.width,
suffixIconConstraints: const BoxConstraints(), // ],
hintText: "Type your message here...", // )
hintStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xffCCCCCC)), ),
// suffixIcon: Row( ).expanded,
// mainAxisSize: MainAxisSize.min,
// crossAxisAlignment: CrossAxisAlignment.end,
// mainAxisAlignment: MainAxisAlignment.end,
// children: [
//
// 8.width,
// ],
// )
),
).expanded,
IconButton( IconButton(
onPressed: () {}, onPressed: () {},
style: const ButtonStyle( style: const ButtonStyle(
@ -136,44 +137,191 @@ class _ChatPageState extends State<ChatPage> {
icon: "chat_attachment".toSvgAsset(width: 24, height: 24), icon: "chat_attachment".toSvgAsset(width: 24, height: 24),
constraints: const BoxConstraints(), constraints: const BoxConstraints(),
), ),
],
if (recordedFilePath == null)
...[]
else ...[
IconButton( IconButton(
onPressed: () async { onPressed: () async {
await playerController.preparePlayer(path: recordedFilePath!); await recorderController.checkPermission();
playerController.startPlayer(); if (recorderController.hasPermission) {
chatState = ChatState.voiceRecordingStarted;
recorderController.record();
setState(() {});
} else {
"Audio permission denied. Please enable from setting".showToast;
}
// if (!isPermissionGranted) {
// "Audio permission denied. Please enable from setting".showToast;
// return;
// }
}, },
style: const ButtonStyle( style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
), ),
icon: const Icon(Icons.play_circle_fill_rounded, size: 20), icon: "chat_mic".toSvgAsset(width: 24, height: 24),
constraints: const BoxConstraints(), constraints: const BoxConstraints(),
), ),
AudioFileWaveforms( ] else if (chatState == ChatState.voiceRecordingStarted) ...[
playerController: playerController, AudioWaveforms(
size: Size(300, 50), size: Size(MediaQuery.of(context).size.width, 56.0),
waveStyle: const WaveStyle(waveColor: AppColor.neutral50, extendWaveform: true, showMiddleLine: false),
padding: const EdgeInsets.only(left: 16),
recorderController: recorderController, // Customize how waveforms looks.
).expanded, ).expanded,
IconButton( IconButton(
onPressed: () async { onPressed: () async {
playerController.pausePlayer(); isAudioRecording = false;
await recorderController.pause();
recordedFilePath = await recorderController.stop();
chatState = ChatState.voiceRecordingCompleted;
setState(() {});
}, },
style: const ButtonStyle( style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
), ),
icon: const Icon(Icons.pause_circle_filled_outlined, size: 20), icon: Icon(Icons.stop_circle_rounded),
constraints: const BoxConstraints(), constraints: const BoxConstraints(),
), )
] else if (chatState == ChatState.voiceRecordingCompleted) ...[
if (playerController.playerState == PlayerState.playing)
IconButton(
onPressed: () async {
await playerController.pausePlayer();
await playerController.stopPlayer();
setState(() {});
},
style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
),
icon: const Icon(Icons.stop_circle_outlined, size: 20),
constraints: const BoxConstraints(),
)
else
IconButton(
onPressed: () async {
await playerController.preparePlayer(path: recordedFilePath!);
await playerController.startPlayer();
setState(() {});
},
style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
),
icon: const Icon(Icons.play_circle_fill_rounded, size: 20),
constraints: const BoxConstraints(),
),
AudioFileWaveforms(
playerController: playerController,
waveformData: recorderController.waveData,
enableSeekGesture: false,
continuousWaveform: false,
waveformType: WaveformType.long,
playerWaveStyle: const PlayerWaveStyle(
fixedWaveColor: AppColor.neutral50,
liveWaveColor: AppColor.primary10,
showSeekLine: true,
),
size: Size(MediaQuery.of(context).size.width, 56.0),
).expanded,
IconButton( IconButton(
onPressed: () {}, onPressed: () async {
await playerController.stopPlayer();
recorderController.reset();
recordedFilePath = null;
chatState = ChatState.idle;
setState(() {});
},
style: const ButtonStyle( style: const ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
), ),
icon: "delete".toSvgAsset(width: 24, height: 24), icon: "delete_icon".toSvgAsset(width: 24, height: 24),
constraints: const BoxConstraints(), constraints: const BoxConstraints(),
), ),
], ],
// if (recordedFilePath == null) ...[
// isAudioRecording
// ? AudioWaveforms(
// size: Size(MediaQuery.of(context).size.width, 56.0),
//
// // enableGesture: true,
//
// waveStyle: const WaveStyle(waveColor: AppColor.neutral50, extendWaveform: true, showMiddleLine: false),
// padding: const EdgeInsets.only(left: 16),
// recorderController: recorderController, // Customize how waveforms looks.
// ).expanded
// : TextFormField(
// cursorColor: AppColor.neutral50,
// style: AppTextStyles.bodyText.copyWith(color: AppColor.neutral50),
// minLines: 1,
// maxLines: 3,
// textInputAction: TextInputAction.none,
// keyboardType: TextInputType.multiline,
// decoration: InputDecoration(
// enabledBorder: InputBorder.none,
// focusedBorder: InputBorder.none,
// border: InputBorder.none,
// errorBorder: InputBorder.none,
// contentPadding: const EdgeInsets.only(left: 16, top: 8, bottom: 8),
// alignLabelWithHint: true,
// filled: true,
// constraints: const BoxConstraints(),
// suffixIconConstraints: const BoxConstraints(),
// hintText: "Type your message here...",
// hintStyle: AppTextStyles.bodyText.copyWith(color: const Color(0xffCCCCCC)),
// // suffixIcon: Row(
// // mainAxisSize: MainAxisSize.min,
// // crossAxisAlignment: CrossAxisAlignment.end,
// // mainAxisAlignment: MainAxisAlignment.end,
// // children: [
// //
// // 8.width,
// // ],
// // )
// ),
// ).expanded,
// IconButton(
// onPressed: () {},
// style: const ButtonStyle(
// tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
// ),
// icon: "chat_attachment".toSvgAsset(width: 24, height: 24),
// constraints: const BoxConstraints(),
// ),
// ],
// if (recordedFilePath == null)
// ...[]
// else ...[
// IconButton(
// onPressed: () async {
// await playerController.preparePlayer(path: recordedFilePath!);
// playerController.startPlayer();
// },
// style: const ButtonStyle(
// tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
// ),
// icon: const Icon(Icons.play_circle_fill_rounded, size: 20),
// constraints: const BoxConstraints(),
// ),
// AudioFileWaveforms(
// playerController: playerController,
// size: Size(300, 50),
// ).expanded,
// IconButton(
// onPressed: () async {
// playerController.pausePlayer();
// },
// style: const ButtonStyle(
// tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
// ),
// icon: const Icon(Icons.pause_circle_filled_outlined, size: 20),
// constraints: const BoxConstraints(),
// ),
// IconButton(
// onPressed: () {},
// style: const ButtonStyle(
// tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
// ),
// icon: "delete".toSvgAsset(width: 24, height: 24),
// constraints: const BoxConstraints(),
// ),
// ],
// if (isAudioRecording && recorderController.isRecording) // if (isAudioRecording && recorderController.isRecording)
// IconButton( // IconButton(
// onPressed: () {}, // onPressed: () {},
@ -183,45 +331,44 @@ class _ChatPageState extends State<ChatPage> {
// icon: "chat_msg_send".toSvgAsset(width: 24, height: 24), // icon: "chat_msg_send".toSvgAsset(width: 24, height: 24),
// constraints: const BoxConstraints(), // constraints: const BoxConstraints(),
// ), // ),
if (isAudioRecording) // if (isAudioRecording)
IconButton( // IconButton(
onPressed: () async { // onPressed: () async {
isAudioRecording = false; // isAudioRecording = false;
await recorderController.pause(); // await recorderController.pause();
recordedFilePath = await recorderController.stop(); // recordedFilePath = await recorderController.stop();
setState(() {}); // chatState = ChatState.voiceRecordingCompleted;
}, // setState(() {});
style: const ButtonStyle( // },
tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded // style: const ButtonStyle(
), // tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
icon: Icon(Icons.stop_circle_rounded), // ),
constraints: const BoxConstraints(), // icon: Icon(Icons.stop_circle_rounded),
) // constraints: const BoxConstraints(),
else // )
IconButton( // else
onPressed: () async { // IconButton(
await recorderController.checkPermission(); // onPressed: () async {
if (recorderController.hasPermission) { // await recorderController.checkPermission();
setState(() { // if (recorderController.hasPermission) {
isAudioRecording = true; // setState(() {
}); // isAudioRecording = true;
recorderController.record(); // });
} else { // recorderController.record();
"Audio permission denied. Please enable from setting".showToast; // } else {
} // "Audio permission denied. Please enable from setting".showToast;
// if (!isPermissionGranted) { // }
// "Audio permission denied. Please enable from setting".showToast; // // if (!isPermissionGranted) {
// return; // // "Audio permission denied. Please enable from setting".showToast;
// } // // return;
}, // // }
style: const ButtonStyle( // },
tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded // style: const ButtonStyle(
), // tapTargetSize: MaterialTapTargetSize.shrinkWrap, // or .padded
icon: "chat_mic".toSvgAsset(width: 24, height: 24), // ),
constraints: const BoxConstraints(), // icon: "chat_mic".toSvgAsset(width: 24, height: 24),
), // constraints: const BoxConstraints(),
// ),
IconButton( IconButton(
onPressed: () {}, onPressed: () {},

Loading…
Cancel
Save