[SimplePod] Settings Revisited

I apologize for the small hiatus, finals had been my top priority over the past week.

If you haven’t seen my last post on the project, read it here.


Theming

I have now added the ability to different themes. I currently have: Light, Grey, Dark, Black (AMOLED). You can see them when I demonstrate the settings.

The Restructure of Settings

I made the Setting Widgets work with a “Settings Class“. The class just holds the static values for the rest of the app to get and set, but doesn’t save or load from the phone’s storage. I also had to make a weird almost-stateful-widget to get around the widgets not updating when the theme changed because they were being built in the list of settings, not the widget that renders them to the screen. I might try to get rid of it later, if I can, because this is kinda ridiculous:

class ColorSetting implements SettingWidget {
  final IconData icon;
  final String title;
  final String subtitle;
  final Function getDefaultValue;
  final Function getValue;
  final Function(Color) onChange;

  ColorSetting({ this.icon, this.title, this.subtitle, this.getValue, this.getDefaultValue, this.onChange});

  @override
  Widget build() => ColorSettingWidget(icon: icon, title: title, subtitle: subtitle,
      getValue: getValue, getDefaultValue: getDefaultValue, onChange: onChange);
}

class ColorSettingWidget extends StatefulWidget {

  final IconData icon;
  final String title;
  final String subtitle;
  final Function getDefaultValue;
  final Function getValue;
  final Function(Color) onChange;

  ColorSettingWidget({ this.icon, this.title, this.subtitle, this.getValue, this.getDefaultValue, this.onChange});

  @override
  _ColorSettingWidgetState createState() => _ColorSettingWidgetState(
      icon: icon, title: title, subtitle: subtitle, getValue: getValue, getDefaultValue: getDefaultValue, onChange: onChange);
}

class _ColorSettingWidgetState extends State<ColorSettingWidget> {

  final IconData icon;
  final String title;
  final String subtitle;
  final Function(Color) onChange;
  final Function getDefaultValue;

  Color currentValue;
  Color tempValue;

  _ColorSettingWidgetState({ this.icon, this.title, this.subtitle,
    Function getValue, this.getDefaultValue, this.onChange}) {
    currentValue = getValue();
  }
  // Rest of Class Not Shown
}

SettingWidget is just an abstract class with one method: Widget build();

The Restructure of the List of Settings

So last time I showed screenshots of the setting pages, I showed every setting that I could think of that I wanted, except for the few categories I hadn’t gotten around to. I have now put that into a sepeate file and commented the entire thing and replaced it with only settings that work now. Right now, only one category exists: Display. Within that category, there are 4 settings: Dock MiniPlayer, Theme, Unlistened Badge Color, and Show Note’s Link Color.

Here’s a video showing them in action:

https://youtu.be/C3BMCms0rcM



Soumyajit Pathak picture

UI looks quite smooth in the video.

Special mentions of any third-party widgets (i.e. if you are using any) you found useful while making this.

Deleted.

Soumyajit Pathak picture

I like the dio package for network requests. Might be worth taking a look.