diff --git a/packages/golden_toolkit/lib/src/device_builder.dart b/packages/golden_toolkit/lib/src/device_builder.dart index f025413..680e09b 100644 --- a/packages/golden_toolkit/lib/src/device_builder.dart +++ b/packages/golden_toolkit/lib/src/device_builder.dart @@ -43,6 +43,8 @@ class DeviceBuilder { DeviceBuilder({ this.wrap, this.bgColor, + this.nameTextColor, + this.lineColor, }); /// Can be used to wrap all scenario widgets. Useful if you wish to @@ -52,6 +54,12 @@ class DeviceBuilder { /// background [bgColor] color of output .png file final Color? bgColor; + /// [textNameColor] color of device name + final Color? nameTextColor; + + /// [lineColor] color line around device + final Color? lineColor; + /// list of created DeviceScenarios for each device type final List scenarios = []; @@ -92,6 +100,8 @@ class DeviceBuilder { widget: widget, wrap: wrap, name: scenarioName, + nameTextColor: nameTextColor, + lineColor: lineColor, ), ), ); @@ -160,12 +170,16 @@ class DeviceScenarioWidget extends StatelessWidget { required this.widget, this.wrap, this.name, + this.nameTextColor, + this.lineColor, }) : super(key: key); final WidgetWrapper? wrap; final Device device; final Widget widget; final String? name; + final Color? nameTextColor; + final Color? lineColor; static const double _horizontalScenarioPadding = 8.0; static const double _borderWidth = 1.0; @@ -208,7 +222,7 @@ class DeviceScenarioWidget extends StatelessWidget { decoration: BoxDecoration( border: Border.all( width: 1, - color: Colors.lightBlue, + color: lineColor ?? Colors.lightBlue, )), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -221,8 +235,9 @@ class DeviceScenarioWidget extends StatelessWidget { name ?? device.name, maxLines: 1, overflow: TextOverflow.ellipsis, - style: const TextStyle( - fontSize: 18, + style: TextStyle( + fontSize: 16, + color: nameTextColor, ), ), ), diff --git a/packages/golden_toolkit/lib/src/golden_builder.dart b/packages/golden_toolkit/lib/src/golden_builder.dart index db76f8f..1cc2e53 100644 --- a/packages/golden_toolkit/lib/src/golden_builder.dart +++ b/packages/golden_toolkit/lib/src/golden_builder.dart @@ -28,12 +28,14 @@ class GoldenBuilder { required double widthToHeightRatio, WidgetWrapper? wrap, Color? bgColor, + Color? nameTextColor, }) { return GoldenBuilder._( columns: columns, widthToHeightRatio: widthToHeightRatio, wrap: wrap, bgColor: bgColor, + nameTextColor: nameTextColor, ); } @@ -45,11 +47,13 @@ class GoldenBuilder { /// factory GoldenBuilder.column({ Color? bgColor, + Color? nameTextColor, WidgetWrapper? wrap, }) { return GoldenBuilder._( wrap: wrap, bgColor: bgColor, + nameTextColor: nameTextColor, ); } @@ -58,6 +62,7 @@ class GoldenBuilder { this.widthToHeightRatio = 1.0, this.wrap, this.bgColor, + this.nameTextColor, }); /// Can be used to wrap all scenario widgets. Useful if you wish to @@ -70,6 +75,9 @@ class GoldenBuilder { /// background [bgColor] color of output .png file final Color? bgColor; + /// [textNameColor] color of device name + final Color? nameTextColor; + /// [widthToHeightRatio] grid layout final double widthToHeightRatio; @@ -96,6 +104,7 @@ class GoldenBuilder { name: name, widget: widget, wrap: wrap, + nameTextColor: nameTextColor, )); } @@ -149,12 +158,16 @@ class _Scenario extends StatelessWidget { required this.name, required this.widget, this.wrap, + this.nameTextColor, }) : super(key: key); final WidgetWrapper? wrap; final String name; final Widget widget; + /// [textNameColor] color of device name + final Color? nameTextColor; + @override Widget build(BuildContext context) { return Padding( @@ -163,7 +176,7 @@ class _Scenario extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ - Text(name, style: const TextStyle(fontSize: 18)), + Text(name, style: TextStyle(fontSize: 18, color: nameTextColor)), const SizedBox(height: 4), wrap?.call(widget) ?? widget, ],