diff --git a/lib/widgets/album/sections.dart b/lib/widgets/album/sections.dart index a14ffb227..24b7940b1 100644 --- a/lib/widgets/album/sections.dart +++ b/lib/widgets/album/sections.dart @@ -54,36 +54,38 @@ class TitleSectionHeader extends StatelessWidget { const TitleSectionHeader({Key key, this.leading, this.title}) : super(key: key); + static const leadingDimension = 32.0; + static const leadingPadding = EdgeInsets.only(right: 8, bottom: 4); + static const textStyle = TextStyle( + color: Color(0xFFEEEEEE), + fontSize: 20, + fontFamily: 'Concourse Caps', + shadows: [ + Shadow( + offset: Offset(0, 2), + blurRadius: 3, + color: Color(0xFF212121), + ), + ], + ); + @override Widget build(BuildContext context) { - final text = OutlinedText( - title, - style: TextStyle( - color: Colors.grey[200], - fontSize: 20, - fontFamily: 'Concourse Caps', - shadows: [ - Shadow( - offset: const Offset(0, 2), - blurRadius: 3, - color: Colors.grey[900], - ), - ], - ), - outlineColor: Colors.black87, - outlineWidth: 2, - ); - return Container( + return Padding( padding: const EdgeInsets.all(16), - child: leading != null - ? Row( - children: [ - leading, - const SizedBox(width: 8), - text, - ], - ) - : text, + child: OutlinedText( + leadingBuilder: leading != null + ? (context, isShadow) => Container( + padding: leadingPadding, + width: leadingDimension, + height: leadingDimension, + child: isShadow ? null : leading, + ) + : null, + text: title, + style: textStyle, + outlineWidth: 2, + ), ); } } diff --git a/lib/widgets/common/fx/outlined_text.dart b/lib/widgets/common/fx/outlined_text.dart index de3719a63..c03e36bd9 100644 --- a/lib/widgets/common/fx/outlined_text.dart +++ b/lib/widgets/common/fx/outlined_text.dart @@ -1,35 +1,65 @@ import 'package:flutter/material.dart'; +typedef OutlinedWidgetBuilder = Widget Function(BuildContext context, bool isShadow); + class OutlinedText extends StatelessWidget { - final String data; + final OutlinedWidgetBuilder leadingBuilder; + final String text; final TextStyle style; final double outlineWidth; final Color outlineColor; - const OutlinedText( - this.data, { + static const leadingAlignment = PlaceholderAlignment.middle; + + const OutlinedText({ Key key, - this.style, - @required this.outlineWidth, - @required this.outlineColor, - }) : super(key: key); + this.leadingBuilder, + @required this.text, + @required this.style, + double outlineWidth, + Color outlineColor, + }) : outlineWidth = outlineWidth ?? 1, + outlineColor = outlineColor ?? Colors.black, + super(key: key); @override Widget build(BuildContext context) { return Stack( children: [ - Text( - data, - style: style.copyWith( - foreground: Paint() - ..style = PaintingStyle.stroke - ..strokeWidth = outlineWidth - ..color = outlineColor, + RichText( + text: TextSpan( + children: [ + if (leadingBuilder != null) + WidgetSpan( + alignment: leadingAlignment, + child: leadingBuilder(context, true), + ), + TextSpan( + text: text, + style: style.copyWith( + foreground: Paint() + ..style = PaintingStyle.stroke + ..strokeWidth = outlineWidth + ..color = outlineColor, + ), + ), + ], ), ), - Text( - data, - style: style, + RichText( + text: TextSpan( + children: [ + if (leadingBuilder != null) + WidgetSpan( + alignment: leadingAlignment, + child: leadingBuilder(context, false), + ), + TextSpan( + text: text, + style: style, + ), + ], + ), ), ], );