FSwitch

An interesting and practical switch component.

Supports setting tips, slider decorations, shadows, and good interaction.

Author:Newton(coorchice.cb@alibaba-inc.com)

English | 简体中文

Like it? Please cast your Star 🥰 !

✨ Features

  • Support opening and closing tips

  • Support setting decoration for Slider

  • Support flexible configuration available state

  • More sense of space Shadow

  • Good switch interactive experience

🛠 Guide

⚙️ Parameters

ParamTypeNecessaryDefaultdesc
openboolfalsefalseWhether it is open. The default is false.
onChangedValueChangedtruenullThis function will be called back when the switch state changes.
widthdoublefalse59.23width. Default 59.23, in line with aesthetics 😃
heightdoublefalsenullheight. By default, it will be calculated according to width, which is in line with aesthetics 😃
offsetdoublefalsenullDistance between slider and edge
openChildWidgetfalsenullPrompt style of open state
closeChildWidgetfalsenullPrompt style of closed state
childOffsetdoublefalsenullTip to edge distance
colorColorfalsenullBackground color when off
openColorColorfalsenullBackground color when open
sliderColorColorfalsenullSlider color
enableboolfalsetrueit's usable or not
sliderChildWidgetfalsenullThe component in the slider. Beyond the range will be cropped.
shadowColorColorfalsenullSet component shadow color
shadowOffsetOffsetfalsenullSet component shadow offset
shadowBlurdoublefalse0.0Set the standard deviation of the component Gaussian and shadow shape convolution

📺 Demo

🔩 Basic Demo

FSwitch(
  onChanged: (v) {},
)

FSwitch needs to always set onChanged in order to respond to the switch status.

Available status & shadow

FSwitch(
  onChanged: (bool value) {
    value_1 = value;
  },
  open: value_1,
  enable: enable_1,
  shadowColor: Colors.black.withOpacity(0.5),
  shadowBlur: 3.0,
),

You can change the available status of FSwitch through enable. Once FSwitch becomes available, the switch state cannot be changed.

In addition, FSwitch provides flexible and convenient shadow configuration support.

🌝 Prompt


/// #1
FSwitch(
  width: 65.0,
  height: 35.538,
  onChanged: (v) {},
  closeChild: Text(
    "Off",
    style: TextStyle(
        color: Colors.white, fontSize: 11),
  ),
  openChild: Text(
    "On",
    style: TextStyle(
        color: Colors.white, fontSize: 11),
  ),
),

/// #2
FSwitch(
  open: true,
  onChanged: (v) {},
  closeChild: Icon(
    Icons.close,
    size: 16,
    color: Colors.white,
  ),
  openChild: Icon(
    Icons.check,
    size: 16,
    color: Colors.white,
  ),
),

/// #3
FSwitch(
  width: 65.0,
  height: 35.538,
  onChanged: (v) {},
  closeChild: Text(
    "😒",
    style: TextStyle(fontSize: 20),
  ),
  openChild: Text(
    "😃",
    style: TextStyle(fontSize: 20),
  ),
  childOffset: 3.0,
),

The open and closed status indicators can be set for FSwitch through openChild andcloseChild, respectively.

👀 Slider decoration

FSwitch(
  width: 300,
  height: 38,
  onChanged: (bool value) {},
  sliderChild: Text(
    "😃",
    style: TextStyle(fontSize: 20),
  ),
)

sliderChild will allow developers to setchild decorations for Slider.

It's interesting!

😃 How to use?

Add dependencies in the project pubspec.yaml file:

🌐 pub dependency

dependencies:
  fswitch: ^<version number>

⚠️ Attention,please go to pub to get the latest version number of FSwitch

🖥 git dependencies

dependencies:
  fswitch:
    git:
      url: 'git@github.com:Fliggy-Android-Team/fswitch.git'
      ref: '<Branch number or tag number>'

⚠️ Attention,please refer to FSwitch official project for branch number or tag.

💡 License

Copyright 2020-present Fliggy Android Team <alitrip_android@list.alibaba-inc.com>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Like it? Please cast your Star 🥰 !

Libraries

fswitch