Skip to content

Commit

Permalink
fix(record_sheet): fix wave form width anomalies
Browse files Browse the repository at this point in the history
  • Loading branch information
@ZhuJHua
ZhuJHua committed Aug 26, 2024
1 parent 2635ad7 commit 68d7dcc
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 102 deletions.
8 changes: 5 additions & 3 deletions lib/components/record_sheet/record_sheet_logic.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ class RecordSheetLogic extends GetxController with GetSingleTickerProviderStateM
final AudioRecorder audioRecorder = AudioRecorder();
late AnimationController animationController =
AnimationController(vsync: this, duration: const Duration(milliseconds: 100), lowerBound: 0, upperBound: 1.0);
final size = MediaQuery.sizeOf(Get.context!);

late final editLogic = Bind.find<EditLogic>();

Expand All @@ -40,6 +39,10 @@ class RecordSheetLogic extends GetxController with GetSingleTickerProviderStateM
super.onClose();
}

void initMaxWidth(value) {
state.maxWidth = value;
}

Future<void> startRecorder() async {
if (await Utils().permissionUtil.checkPermission(Permission.microphone)) {
await animationController.forward();
Expand All @@ -56,7 +59,6 @@ class RecordSheetLogic extends GetxController with GetSingleTickerProviderStateM
void listenAmplitude() {
final amplitudeStream = audioRecorder.onAmplitudeChanged(const Duration(milliseconds: 100));
amplitudeStream.listen((amplitude) {
Utils().logUtil.printInfo(amplitude.current);
if (amplitude.current.isInfinite) {
maxLengthAdd(.0);
} else if (amplitude.current != amplitude.max) {
Expand All @@ -72,7 +74,7 @@ class RecordSheetLogic extends GetxController with GetSingleTickerProviderStateM
}

void maxLengthAdd(value) {
if (state.amplitudes.length > size.width ~/ 6.0) {
if (state.amplitudes.length > state.maxWidth ~/ 6.0) {
state.amplitudes.removeAt(0);
}
state.amplitudes.add(value);
Expand Down
1 change: 1 addition & 0 deletions lib/components/record_sheet/record_sheet_state.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ class RecordSheetState {
late String fileName;
late RxDouble height;

late double maxWidth;
late bool isStop;

RecordSheetState() {
Expand Down
195 changes: 100 additions & 95 deletions lib/components/record_sheet/record_sheet_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,102 +12,107 @@ class RecordSheetComponent extends StatelessWidget {
final logic = Get.put(RecordSheetLogic());
final state = Bind.find<RecordSheetLogic>().state;
final colorScheme = Theme.of(context).colorScheme;
return GetBuilder<RecordSheetLogic>(
init: logic,
assignId: true,
builder: (logic) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Obx(() {
return AnimatedSwitcher(
duration: const Duration(milliseconds: 100),
child: state.isStarted.value
? SizedBox(
height: 100,
key: const ValueKey('wave'),
child: Obx(() {
return WaveFormComponent(
amplitudes: state.amplitudes.value,
height: 100,
);
}),
)
: SizedBox(
height: 100,
key: const ValueKey('start'),
child: Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: colorScheme.outline, width: 4.0), shape: BoxShape.circle),
child: IconButton(
onPressed: () {
logic.startRecorder();
},
padding: EdgeInsets.zero,
icon: const Icon(
Icons.circle,
size: 48,
color: Colors.redAccent,
)),
)),
),
);
}),
Obx(() {
return AnimatedContainer(
duration: const Duration(milliseconds: 100),
height: state.height.value,
child: OverflowBox(
minHeight: 0,
maxHeight: state.height.value,
alignment: Alignment.center,
return LayoutBuilder(builder: (context, constrains) {
return GetBuilder<RecordSheetLogic>(
init: logic,
assignId: true,
initState: (_) {
logic.initMaxWidth(constrains.maxWidth);
},
builder: (logic) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Obx(() {
return AnimatedSwitcher(
duration: const Duration(milliseconds: 100),
child: state.isStarted.value
? Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
key: const ValueKey('playButton'),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Obx(() {
return Text(state.durationTime.value.toString().split('.')[0]);
}),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
logic.cancelRecorder();
},
child: const Text('取消')),
FilledButton(
onPressed: () {
state.isRecording.value ? logic.pauseRecorder() : logic.resumeRecorder();
},
child: AnimatedIcon(
icon: AnimatedIcons.play_pause,
progress: logic.animationController,
)),
TextButton(
onPressed: () {
logic.stopRecorder();
},
child: const Text('保存')),
],
)
],
? SizedBox(
height: 100,
key: const ValueKey('wave'),
child: Obx(() {
return WaveFormComponent(
amplitudes: state.amplitudes.value,
height: 100,
);
}),
)
: null,
),
);
}),
],
);
},
);
: SizedBox(
height: 100,
key: const ValueKey('start'),
child: Center(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: colorScheme.outline, width: 4.0), shape: BoxShape.circle),
child: IconButton(
onPressed: () {
logic.startRecorder();
},
padding: EdgeInsets.zero,
icon: const Icon(
Icons.circle,
size: 48,
color: Colors.redAccent,
)),
)),
),
);
}),
Obx(() {
return AnimatedContainer(
duration: const Duration(milliseconds: 100),
height: state.height.value,
child: OverflowBox(
minHeight: 0,
maxHeight: state.height.value,
alignment: Alignment.center,
child: state.isStarted.value
? Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
key: const ValueKey('playButton'),
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Obx(() {
return Text(state.durationTime.value.toString().split('.')[0]);
}),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () {
logic.cancelRecorder();
},
child: const Text('取消')),
FilledButton(
onPressed: () {
state.isRecording.value ? logic.pauseRecorder() : logic.resumeRecorder();
},
child: AnimatedIcon(
icon: AnimatedIcons.play_pause,
progress: logic.animationController,
)),
TextButton(
onPressed: () {
logic.stopRecorder();
},
child: const Text('保存')),
],
)
],
)
: null,
),
);
}),
],
);
},
);
});
}
}
4 changes: 0 additions & 4 deletions lib/components/wave_form/wave_form_view.dart
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mood_diary/components/record_sheet/record_sheet_logic.dart';

class WaveFormPainter extends CustomPainter {
final double barWidth;
final double spaceWidth;
final Color color;
final List<double> amplitudes;

final recordLogic = Bind.find<RecordSheetLogic>();

WaveFormPainter(
this.amplitudes, {
required this.barWidth,
Expand Down
1 change: 1 addition & 0 deletions lib/pages/edit/edit_view.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ class EditPage extends StatelessWidget {
context: context,
showDragHandle: true,
useSafeArea: true,
isScrollControlled: true,
builder: (context) {
return const RecordSheetComponent();
});
Expand Down

0 comments on commit 68d7dcc

Please sign in to comment.