diff --git a/lib/pages/save_video/save_video_page.dart b/lib/pages/save_video/save_video_page.dart index d7cbf2e..e94a3d5 100644 --- 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 { 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 { 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 { 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 { ? _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 index ed67467..cbf521b 100644 --- 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 { // 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,7 +177,7 @@ class _SaveButtonState extends State { // 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. @@ -179,7 +185,7 @@ class _SaveButtonState extends State { 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();