add outline with inverted color to date text

Co-authored-by: waitingwittykitty <[email protected]>
KyleKun · Dec 19, 2022 · 12cf0f6 · 12cf0f6
1 parent da3476d
commit 12cf0f6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/lib/pages/save_video/save_video_page.dart b/lib/pages/save_video/save_video_page.dart
@@ -32,6 +32,8 @@ class _SaveVideoPageState extends State<SaveVideoPage> {
  Color pickerColor = const Color(0xff000000);
  Color currentColor = const Color(0xff000000);
 
+ final double textOutlineStrokeWidth = 2;
+
  String _dateFormatValue =
  DateFormatUtils.getToday(isDayFirst: DateFormatUtils.isDayFirstPattern());
 
@@ -194,6 +196,14 @@ class _SaveVideoPageState extends State<SaveVideoPage> {
  Get.offNamed(Routes.RECORDING);
  }
 
+ Color invert(Color color) {
+ final r = 255 - color.red;
+ final g = 255 - color.green;
+ final b = 255 - color.blue;
+
+ return Color.fromARGB((color.opacity * 255).round(), r, g, b);
+ }
+
  Widget _dailyVideoPlayer() {
  return GestureDetector(
  onTap: () => videoPlay(),
@@ -226,12 +236,26 @@ class _SaveVideoPageState extends State<SaveVideoPage> {
  alignment: isTextDate ? Alignment.bottomLeft : Alignment.topRight,
  child: Padding(
  padding: const EdgeInsets.all(10.0),
- child: Text(
- _dateFormatValue,
- style: TextStyle(
- color: currentColor,
- fontSize: MediaQuery.of(context).size.width * 0.03,
- ),
+ child: Stack(
+ children: [
+ Text(
+ _dateFormatValue,
+ style: TextStyle(
+ fontSize: MediaQuery.of(context).size.width * 0.03,
+ foreground: Paint()
+ ..style = PaintingStyle.stroke
+ ..strokeWidth = textOutlineStrokeWidth
+ ..color = invert(currentColor),
+ ),
+ ),
+ Text(
+ _dateFormatValue,
+ style: TextStyle(
+ fontSize: MediaQuery.of(context).size.width * 0.03,
+ color: currentColor,
+ ),
+ ),
+ ],
  ),
  ),
  ),
@@ -301,6 +325,8 @@ class _SaveVideoPageState extends State<SaveVideoPage> {
  ? _currentAddress ?? ''
  : customLocationTextController.text,
  isGeotaggingEnabled: isGeotaggingEnabled,
+ textOutlineColor: invert(currentColor),
+ textOutlineWidth: textOutlineStrokeWidth,
  ),
  const Spacer(),
  ],

diff --git a/lib/pages/save_video/widgets/save_button.dart b/lib/pages/save_video/widgets/save_button.dart
@@ -26,6 +26,8 @@ class SaveButton extends StatefulWidget {
  required this.isTextDate,
  required this.userLocation,
  required this.isGeotaggingEnabled,
+ required this.textOutlineColor,
+ required this.textOutlineWidth,
  });
 
  // Finding controllers
@@ -36,6 +38,8 @@ class SaveButton extends StatefulWidget {
  final bool isTextDate;
  final String? userLocation;
  final bool isGeotaggingEnabled;
+ final Color textOutlineColor;
+ final double textOutlineWidth;
 
  @override
  _SaveButtonState createState() => _SaveButtonState();
@@ -151,6 +155,8 @@ class _SaveButtonState extends State<SaveButton> {
  // Parses the color code to a hex code format which can be read by ffmpeg
  final String parsedDateColor =
  '0x${widget.dateColor.value.toRadixString(16).substring(2)}';
+ final String parsedTextOutlineColor =
+ '0x${widget.textOutlineColor.value.toRadixString(16).substring(2)}';
 
  // Path to save the final video
  final String finalPath =
@@ -171,15 +177,15 @@ class _SaveButtonState extends State<SaveButton> {
  // If geotagging is enabled, we can allow the command to render the location text into the video
  if (isGeotaggingEnabled) {
  locOutput =
- ', drawtext=$fontPath:text=\'${widget.userLocation}\':fontsize=$locTextSize:fontcolor=\'$parsedDateColor\':x=$locPosX:y=$locPosY';
+ ', drawtext=$fontPath:text=\'${widget.userLocation}\':fontsize=$locTextSize:fontcolor=\'$parsedDateColor\':borderw=${widget.textOutlineWidth}:bordercolor=$parsedTextOutlineColor:x=$locPosX:y=$locPosY';
  }
 
  // Caches the default font to save texts in ffmpeg.
  // The edit may fail unexpectedly in some devices if this is not done.
  await FFmpegKitConfig.setFontDirectory(fontPath);
 
  await executeFFmpeg(
- '-i $videoPath -vf [in]drawtext="$fontPath:text=\'${widget.dateFormat}\':fontsize=$dateTextSize:fontcolor=\'$parsedDateColor\':x=$datePosX:y=$datePosY$locOutput[out]" -codec:v libx264 -pix_fmt yuv420p $finalPath -y',
+ '-i $videoPath -vf [in]drawtext="$fontPath:text=\'${widget.dateFormat}\':fontsize=$dateTextSize:fontcolor=\'$parsedDateColor\':borderw=${widget.textOutlineWidth}:bordercolor=$parsedTextOutlineColor:x=$datePosX:y=$datePosY$locOutput[out]" -codec:v libx264 -pix_fmt yuv420p $finalPath -y',
  ).then((session) async {
  print(session.getCommand().toString());
  final returnCode = await session.getReturnCode();