Implemented custom and automatic styling

lib/src/setting_checkbox_item.dart

@@ -4,17 +4,28 @@ import 'setting_styles.dart';
 
 class SettingCheckboxItem extends StatelessWidget {
   final String title;
+  ///Custom [TextStyle] to use for the title
+  ///
+  /// Setting this property disables title coloring based on the [priority] parameter
+  final TextStyle titleStyle;
   final String description;
+  ///Custom [TextStyle] to use for the title
+  ///
+  /// Setting this property disables description coloring based on the [priority] parameter
+  final TextStyle descriptionStyle;
   final ItemPriority priority;
 
   final bool value;
   final ValueChanged<bool> onChanged;
 
+  /// @this.titleStyle The
   const SettingCheckboxItem({
     Key key,
     @required this.title,
     @required this.value,
     @required this.onChanged,
+    this.titleStyle,
+    this.descriptionStyle,
     this.priority = ItemPriority.normal,
     this.description,
   }) : super(key: key);
@@ -23,9 +34,9 @@ class SettingCheckboxItem extends StatelessWidget {
   Widget build(BuildContext context) {
     return CheckboxListTile(
       contentPadding: const EdgeInsets.symmetric(horizontal: 15.0),
-      title: Text(title, style: kItemTitle[priority]),
+      title: Text(title, style: titleStyle ?? kGetDefaultTitleStyle(context, priority)),
       subtitle: description != null
-          ? Text(description, style: kItemSubTitle[priority])
+          ? Text(description, style: descriptionStyle ?? kGetDefaultSubTitleStyle(context, priority))
           : null,
       value: value,
       onChanged: priority == ItemPriority.disabled ? null : onChanged,

lib/src/setting_confirm_item.dart

@@ -4,6 +4,10 @@ import 'setting_styles.dart';
 
 class SettingConfirmItem extends StatelessWidget {
   final String title;
+  ///Custom [TextStyle] to use for the widget title
+  ///
+  /// Setting this property disables title coloring based on the [priority] parameter
+  final TextStyle titleStyle;
   final String displayValue;
   final String alertMessage;
   final String alertTitle;
@@ -16,6 +20,7 @@ class SettingConfirmItem extends StatelessWidget {
   const SettingConfirmItem({
     Key key,
     @required this.title,
+    this.titleStyle,
     this.alertMessage,
     @required this.onConfirm,
     this.alertTitle,
@@ -32,9 +37,9 @@ class SettingConfirmItem extends StatelessWidget {
       dense: true,
       visualDensity: VisualDensity.comfortable,
       contentPadding: const EdgeInsets.symmetric(horizontal: 15.0),
-      title: Text(title, style: kItemTitle[priority]),
+      title: Text(title, style: titleStyle ?? kGetDefaultTitleStyle(context, priority)),
       subtitle: displayValue != null
-          ? Text(displayValue, style: kItemSubTitle[priority])
+          ? Text(displayValue, style: kGetDefaultSubTitleStyle(context, priority))
           : null,
     );
     return priority == ItemPriority.disabled

lib/src/setting_datetime_item.dart

@@ -5,7 +5,9 @@ import 'setting_styles.dart';
 
 class SettingDateTimeItem<T> extends StatelessWidget {
   final String title;
+  final TextStyle titleStyle;
   final String displayValue;
+  final TextStyle displayValueStyle;
   final DateTime initialDate;
 
   final ValueChanged<T> onChanged;
@@ -20,6 +22,8 @@ class SettingDateTimeItem<T> extends StatelessWidget {
       @required this.displayValue,
       this.initialDate,
       this.datePicker = true,
+      this.titleStyle,
+      this.displayValueStyle,
       this.timePicker = true,
       this.priority = ItemPriority.normal})
       : super(key: key) {
@@ -33,7 +37,9 @@ class SettingDateTimeItem<T> extends StatelessWidget {
     return SettingItem(
         priority: priority,
         title: title,
+        titleStyle: titleStyle,
         displayValue: displayValue,
+        displayValueStyle: displayValueStyle,
         onTap: () async {
           DateTime datePicked;
           if (datePicker) {

lib/src/setting_item.dart

@@ -4,14 +4,18 @@ import 'setting_styles.dart';
 
 class SettingItem extends StatelessWidget {
   final String title;
+  final TextStyle titleStyle;
   final String displayValue;
+  final TextStyle displayValueStyle;
   final GestureTapCallback onTap;
   final ItemPriority priority;
 
   const SettingItem({
     Key key,
     @required this.title,
+    this.titleStyle,
     this.displayValue,
+    this.displayValueStyle,
     @required this.onTap,
     this.priority = ItemPriority.normal,
   }) : super(key: key);
@@ -22,9 +26,9 @@ class SettingItem extends StatelessWidget {
       dense: true,
       visualDensity: VisualDensity.comfortable,
       contentPadding: const EdgeInsets.symmetric(horizontal: 15.0),
-      title: Text(title, style: kItemTitle[priority]),
+      title: Text(title, style: titleStyle ?? kGetDefaultTitleStyle(context, priority)),
       subtitle: displayValue != null
-          ? Text(displayValue, style: kItemSubTitle[priority])
+          ? Text(displayValue, style: displayValueStyle ?? kGetDefaultSubTitleStyle(context, priority))
           : null,
     );
     return priority == ItemPriority.disabled

lib/src/setting_radio_item.dart

@@ -11,7 +11,9 @@ class SettingRadioValue<T> {
 
 class SettingRadioItem<T> extends StatelessWidget {
   final String title;
+  final TextStyle titleStyle;
   final String displayValue;
+  final TextStyle displayValueStyle;
   final T selectedValue;
 
   final List<SettingRadioValue<T>> items;
@@ -22,9 +24,11 @@ class SettingRadioItem<T> extends StatelessWidget {
   const SettingRadioItem({
     Key key,
     @required this.title,
+    this.titleStyle,
     @required this.items,
     @required this.onChanged,
     this.displayValue,
+    this.displayValueStyle,
     this.selectedValue,
     this.cancelText,
     this.priority = ItemPriority.normal,
@@ -35,7 +39,9 @@ class SettingRadioItem<T> extends StatelessWidget {
     return SettingItem(
       priority: priority,
       title: title,
+      titleStyle: titleStyle,
       displayValue: displayValue,
+      displayValueStyle: displayValueStyle,
       onTap: () async {
         var changedValue = await showDialog(
           context: context,

lib/src/setting_section.dart

@@ -4,9 +4,10 @@ import 'setting_styles.dart';
 
 class SettingSection extends StatelessWidget {
   final String title;
+  final TextStyle titleStyle;
   final List<Widget> items;
 
-  const SettingSection({Key key, @required this.items, this.title})
+  const SettingSection({Key key, @required this.items, this.title, this.titleStyle})
       : super(key: key);
 
   @override
@@ -16,7 +17,7 @@ class SettingSection extends StatelessWidget {
       children: [
         if (title != null)
           ListTile(
-              title: Text(title, style: kSectionTitle),
+              title: Text(title, style: titleStyle ?? kGetDefaultSectionTitleStyle(context)),
               contentPadding:
                   const EdgeInsets.symmetric(horizontal: 15.0, vertical: 0.0),
               dense: true,
@@ -26,7 +27,7 @@ class SettingSection extends StatelessWidget {
           shrinkWrap: true,
           itemCount: items.length,
           separatorBuilder: (BuildContext context, int index) =>
-              Divider(height: 2.0, color: kSeparator),
+              Divider(height: 2.0, color: Theme.of(context).dividerColor),
           itemBuilder: (BuildContext context, int index) => items[index],
         ),
       ],

lib/src/setting_styles.dart

@@ -1,19 +1,39 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 
 enum ItemPriority { normal, high, low, disabled }
 
-const kSectionTitle = TextStyle(fontSize: 13.0, color: Color(0xff1b73e8));
-const kSeparator = Color(0xffe0e0e0);
-const kItemTitle = {
-  ItemPriority.normal: TextStyle(fontSize: 14.0, color: Color(0xff5f6369)),
-  ItemPriority.high: TextStyle(fontSize: 14.0, color: Color(0xffd95b58)),
-  ItemPriority.low: TextStyle(fontSize: 14.0, color: Color(0xff3e7e0b)),
-  ItemPriority.disabled: TextStyle(fontSize: 14.0, color: Color(0xff9a9fa7)),
-};
-const kItemSubTitle = {
-  ItemPriority.normal: TextStyle(fontSize: 12.0, color: Color(0xff757575)),
-  ItemPriority.high: TextStyle(fontSize: 12.0, color: Color(0xffd95b58)),
-  ItemPriority.low: TextStyle(fontSize: 12.0, color: Color(0xff3e7e0b)),
-  ItemPriority.disabled: TextStyle(fontSize: 12.0, color: Color(0xffbdbdbd)),
-};
+TextStyle kGetDefaultSectionTitleStyle(BuildContext context){
+  return TextStyle(fontSize: 13, color: Theme.of(context).accentColor);
+}
+
+TextStyle kGetDefaultTitleStyle(BuildContext context, ItemPriority priority){
+  switch(priority){
+    case ItemPriority.high:
+      return const TextStyle(fontSize: 14, color: const Color(0xffd95b58));
+    case ItemPriority.low:
+      return const TextStyle(fontSize: 14, color: Color(0xff3e7e0b));
+    case ItemPriority.normal:
+      return TextStyle(fontSize: 14, color: Theme.of(context).textTheme.bodyText1.color);
+    case ItemPriority.disabled:
+      return TextStyle(fontSize: 14, color: Theme.of(context).disabledColor);
+  }
+}
+
+TextStyle kGetDefaultSubTitleStyle(BuildContext context, ItemPriority priority){
+  switch(priority){
+    case ItemPriority.high:
+      return const TextStyle(fontSize: 12.0, color: Color(0xffd95b58));
+    case ItemPriority.low:
+      return const TextStyle(fontSize: 12, color: Color(0xff3e7e0b));
+    case ItemPriority.normal:
+      return TextStyle(fontSize: 12, color: Theme.of(context).textTheme.caption.color);
+    case ItemPriority.disabled:
+      return TextStyle(fontSize: 12, color: Theme.of(context).disabledColor);
+  }
+}
+
+Color kGetSeperatorColor(BuildContext context){
+  return Theme.of(context).dividerColor;
+}
+
 const kWheelPickerItem = TextStyle(fontSize: 13.0, color: Color(0xff5f6369));

lib/src/setting_switch_item.dart

@@ -4,7 +4,9 @@ import 'setting_styles.dart';
 
 class SettingSwitchItem extends StatelessWidget {
   final String title;
+  final TextStyle titleStyle;
   final String description;
+  final TextStyle descriptionStyle;
   final ItemPriority priority;
 
   final bool value;
@@ -13,19 +15,21 @@ class SettingSwitchItem extends StatelessWidget {
   const SettingSwitchItem({
     Key key,
     @required this.title,
+    this.titleStyle,
     @required this.value,
     @required this.onChanged,
     this.priority = ItemPriority.normal,
     this.description,
+    this.descriptionStyle,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return SwitchListTile(
       contentPadding: const EdgeInsets.symmetric(horizontal: 15.0),
-      title: Text(title, style: kItemTitle[priority]),
+      title: Text(title, style: titleStyle ?? kGetDefaultTitleStyle(context, priority)),
       subtitle: description != null
-          ? Text(description, style: kItemSubTitle[priority])
+          ? Text(description, style: descriptionStyle ?? kGetDefaultSubTitleStyle(context, priority))
           : null,
       value: value,
       onChanged: priority == ItemPriority.disabled ? null : onChanged,

lib/src/setting_text_item.dart

@@ -5,7 +5,9 @@ import 'setting_styles.dart';
 
 class SettingTextItem extends StatelessWidget {
   final String title;
+  final TextStyle titleStyle;
   final String displayValue;
+  final TextStyle displayValueStyle;
   final String hintText;
   final String initialValue;
 
@@ -15,8 +17,10 @@ class SettingTextItem extends StatelessWidget {
   const SettingTextItem({
     Key key,
     @required this.title,
+    this.titleStyle,
     @required this.onChanged,
     @required this.displayValue,
+    this.displayValueStyle,
     this.initialValue,
     this.hintText,
     this.priority = ItemPriority.normal,
@@ -27,7 +31,9 @@ class SettingTextItem extends StatelessWidget {
     return SettingItem(
       priority: priority,
       title: title,
+      titleStyle: titleStyle,
       displayValue: displayValue,
+      displayValueStyle: displayValueStyle,
       onTap: () async {
         var changedValue = await showDialog(
           context: context,

lib/src/setting_wheel_picker_item.dart

@@ -6,7 +6,9 @@ import 'setting_styles.dart';
 
 class SettingWheelPickerItem<T> extends StatelessWidget {
   final String title;
+  final TextStyle titleStyle;
   final String displayValue;
+  final TextStyle displayValueStyle;
   final String hintText;
   final String pickerSuffix;
   final List<T> items;
@@ -18,8 +20,10 @@ class SettingWheelPickerItem<T> extends StatelessWidget {
   const SettingWheelPickerItem({
     Key key,
     @required this.title,
+    this.titleStyle,
     @required this.onChanged,
     @required this.displayValue,
+    this.displayValueStyle,
     @required this.items,
     this.initialValueIndex = 0,
     this.hintText,
@@ -32,7 +36,9 @@ class SettingWheelPickerItem<T> extends StatelessWidget {
     return SettingItem(
       priority: priority,
       title: title,
+      titleStyle: titleStyle,
       displayValue: displayValue,
+      displayValueStyle: displayValueStyle,
       onTap: () async {
         var changedValueIndex = await showDialog(
           context: context,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: clean_settings
 description: Settings UI generator with sane defaults. Removes the need for boilerplate code and provides a rich set of highly opinionated widgets.
-version: 0.1.5
+version: 0.1.7
 homepage: https://github.com/grouped/clean_settings
 
 environment: