Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a cupertino equivelent of SwitchListTile?

Tags:

flutter

I need to create a settings page for my iOS app. On my Android side, I have SwitchListTile to layout the switches nicely.

Is there a Flutter widget that would help me or do I have to write one myself?

like image 569
Charles Shiller Avatar asked Apr 29 '18 21:04

Charles Shiller


People also ask

How do I turn off SwitchListTile?

To show the SwitchListTile as disabled, pass null as the onChanged callback. This widget shows a switch that, when toggled, changes the state of a bool member field called _lights .

How do you change Cupertino switch size in flutter?

A workaround for that is just to wrap it with a container and give it a desired width and height. Note: After scaling your Switch , in order to not apply the transformation when performing hit tests, set transformHitTests to false . That way you can more easily control the area where you can tap or click.


2 Answers

You have to write one yourself, however you can crib from the SwitchListTile source pretty easily:

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new SafeArea(
          child: new Material(
              child: new ListView(
                children: <Widget>[
                  new CupertinoSwitchListTile(
                    value: _isSelected,
                    onChanged: (value) {
                      print("Value changed to $value");
                      setState(() => _isSelected = value);
                    },
                    activeColor: CupertinoColors.activeGreen
                  )
                ],
              ))),
    );
  }

}

class CupertinoSwitchListTile extends StatelessWidget {
  /// This has been shamelessly copied from Material/SwitchListTile.
  /// The applicable license applies.
  const CupertinoSwitchListTile({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
    this.title,
    this.subtitle,
    this.isThreeLine: false,
    this.dense,
    this.secondary,
    this.selected: false,
  })  : assert(value != null),
        assert(isThreeLine != null),
        assert(!isThreeLine || subtitle != null),
        assert(selected != null),
        super(key: key);

  /// Whether this switch is checked.
  ///
  /// This property must not be null.
  final bool value;

  /// Called when the user toggles the switch on or off.
  ///
  /// The switch passes the new value to the callback but does not actually
  /// change state until the parent widget rebuilds the switch tile with the
  /// new value.
  ///
  /// If null, the switch will be displayed as disabled.
  ///
  /// The callback provided to [onChanged] should update the state of the parent
  /// [StatefulWidget] using the [State.setState] method, so that the parent
  /// gets rebuilt; for example:
  ///
  /// ```dart
  /// new SwitchListTile(
  ///   value: _lights,
  ///   onChanged: (bool newValue) {
  ///     setState(() {
  ///       _lights = newValue;
  ///     });
  ///   },
  ///   title: new Text('Lights'),
  /// )
  /// ```
  final ValueChanged<bool> onChanged;

  /// The color to use when this switch is on.
  ///
  /// Defaults to accent color of the current [Theme].
  final Color activeColor;

  /// The primary content of the list tile.
  ///
  /// Typically a [Text] widget.
  final Widget title;

  /// Additional content displayed below the title.
  ///
  /// Typically a [Text] widget.
  final Widget subtitle;

  /// A widget to display on the opposite side of the tile from the switch.
  ///
  /// Typically an [Icon] widget.
  final Widget secondary;

  /// Whether this list tile is intended to display three lines of text.
  ///
  /// If false, the list tile is treated as having one line if the subtitle is
  /// null and treated as having two lines if the subtitle is non-null.
  final bool isThreeLine;

  /// Whether this list tile is part of a vertically dense list.
  ///
  /// If this property is null then its value is based on [ListTileTheme.dense].
  final bool dense;

  /// Whether to render icons and text in the [activeColor].
  ///
  /// No effort is made to automatically coordinate the [selected] state and the
  /// [value] state. To have the list tile appear selected when the switch is
  /// on, pass the same value to both.
  ///
  /// Normally, this property is left to its default value, false.
  final bool selected;

  @override
  Widget build(BuildContext context) {
    var color =  activeColor ?? Theme.of(context).accentColor;
    print("Active color: ${color.red} ${color.green} ${color.blue}");
    final Widget control = new CupertinoSwitch(
      value: value,
      onChanged: onChanged,
      activeColor: activeColor ?? CupertinoColors.activeGreen,
    );
    return new MergeSemantics(
      child: ListTileTheme.merge(
        selectedColor: activeColor ?? CupertinoColors.activeGreen,
        child: new ListTile(
          leading: secondary,
          title: title,
          subtitle: subtitle,
          trailing: control,
          isThreeLine: isThreeLine,
          dense: dense,
          enabled: onChanged != null,
          onTap: onChanged != null
              ? () {
                  onChanged(!value);
                }
              : null,
          selected: selected,
        ),
      ),
    );
  }
}

As I noted in the source, because it's copied from the flutter source the license at time of copying from the source applies.

like image 149
rmtmckenzie Avatar answered Sep 27 '22 21:09

rmtmckenzie


Use SwitchListTile.adaptive widget instead of SwitchListTile widget

like image 21
Badi3 Avatar answered Sep 27 '22 21:09

Badi3