Skip to main content

CwSliderTile Documentation

Overview​

The CwSliderTile is a versatile container component that wraps a slider with additional UI elements such as title, prefix, suffix, and bottom widgets. It provides a structured layout for slider components with customizable styling options including padding, colors, gradients, and borders.

Class Definition​

CwSliderTile​

Creates a container that organizes slider components with supporting UI elements.

Parameters​

  • slider: The main slider widget to be displayed
  • prefix: Widget positioned before the slider
  • suffix: Widget positioned after the slider
  • title: Widget displayed above the slider
  • bottom: Widget displayed below the slider
  • tilePadding: Padding around the tile content (default: EdgeInsets.all(PaddingConst.pad_12))
  • tileColor: Background color of the tile
  • tileGradient: Gradient background for the tile
  • tileBorder: Border styling for the tile
  • tileBorderRadius: Border radius of the tile
  • key: Widget key for identification

Implementation Details​

The widget organizes its components in a structured layout:

  • A container with customizable decoration
  • A column layout for vertical arrangement
  • Row layout for the slider and its horizontal companions (prefix and suffix)
  • Conditional rendering of optional components (title, prefix, suffix, bottom)

Layout Structure​

  • Title: Positioned at the top of the tile (optional)
  • Slider Row:
    • Prefix widget on the left (optional)
    • Slider in the center (expanded to fill available space)
    • Suffix widget on the right (optional)
  • Bottom: Positioned at the bottom of the tile (optional)

Usage Example​

CwSliderTile(
  slider: Slider(
    value: _currentValue,
    onChanged: (value) => setState(() => _currentValue = value),
    min: 0,
    max: 100,
  ),
  prefix: Icon(Icons.volume_down),
  suffix: Icon(Icons.volume_up),
  title: Text('Volume Control'),
  bottom: Text('${_currentValue.round()}%'),
  tileColor: Colors.grey.shade200,
  tileBorderRadius: BorderRadius.circular(12),
)

Customization​

The component offers extensive customization through:

  • Custom widgets for all positions (slider, prefix, suffix, title, bottom)
  • Styling options for the container (padding, color, gradient, border, border radius)
  • Flexible layout that adapts to the presence or absence of optional components

Source Code Repository​

Find the full source code in the cw_sliders.dart file: GitHub Repository