VooSectionList #

A comprehensive Flutter package for creating settings-style section lists with multiple visual styles, custom builders, and full theming support.

Features #

• 4 Visual Styles - Card, Flat, Inset Grouped (iOS), and Plain
• Custom Trailing Builders - Flexible trailing widgets for any item type
• Full Theming Support - Customize colors, typography, spacing via theme
• Collapsible Sections - Animated expand/collapse for sections
• Multiple Item Types - Navigation, toggle, value, checkbox, radio, and custom
• Clean Architecture - Following atomic design principles
• Integration Ready - Works with voo_ui_core, voo_tokens, voo_responsive

Installation #

Add to your pubspec.yaml:

dependencies:
  voo_section_list: ^0.1.0

Quick Start #

Basic Usage #

import 'package:voo_section_list/voo_section_list.dart';

VooSectionList<void>(
  config: VooSectionConfig.card,
  sections: [
    VooSection(
      id: 'account',
      title: 'Account',
      items: [
        VooSectionItem(
          id: 'profile',
          title: 'Edit Profile',
          leading: Icon(Icons.person),
          type: VooSectionItemType.navigation,
          onTap: () => Navigator.pushNamed(context, '/profile'),
        ),
        VooSectionItem(
          id: 'notifications',
          title: 'Notifications',
          leading: Icon(Icons.notifications),
          type: VooSectionItemType.toggle,
          toggleValue: true,
          onToggleChanged: (value) => print('Notifications: $value'),
        ),
      ],
    ),
  ],
)

Visual Styles #

Four built-in preset configurations:

// Card-based (elevated cards)
VooSectionList(config: VooSectionConfig.card, sections: [...])

// iOS-style inset grouped
VooSectionList(config: VooSectionConfig.ios, sections: [...])

// Material/Android flat style
VooSectionList(config: VooSectionConfig.material, sections: [...])

// Plain/minimal style
VooSectionList(config: VooSectionConfig.plain, sections: [...])

// Or use named constructors
VooSectionList.card(sections: [...])
VooSectionList.ios(sections: [...])
VooSectionList.flat(sections: [...])
VooSectionList.plain(sections: [...])

Custom Trailing Widgets #

Use trailingBuilder for custom trailing content:

VooSectionList<void>(
  trailingBuilder: (context, item) {
    switch (item.type) {
      case VooSectionItemType.toggle:
        return Switch(
          value: item.toggleValue ?? false,
          onChanged: item.onToggleChanged,
        );
      case VooSectionItemType.value:
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(item.displayValue ?? ''),
            SizedBox(width: 4),
            Icon(Icons.chevron_right),
          ],
        );
      default:
        return Icon(Icons.chevron_right);
    }
  },
  sections: [...],
)

Theming #

Customize appearance with VooSectionListTheme:

VooSectionListTheme(
  data: VooSectionThemeData(
    headerTextStyle: TextStyle(
      fontSize: 13,
      fontWeight: FontWeight.w600,
      letterSpacing: 0.5,
    ),
    itemPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 14),
    dividerColor: Colors.grey.shade200,
    activeColor: Colors.blue,
  ),
  child: VooSectionList(...),
)

Item Types #

Section Configuration #

VooSection(
  id: 'preferences',
  title: 'Preferences',           // Section header title
  subtitle: 'App settings',       // Optional subtitle
  headerLeading: Icon(Icons.settings), // Optional header icon
  footerText: 'Changes saved automatically', // Footer text
  showDividers: true,             // Show dividers between items
  isCollapsible: true,            // Allow collapse/expand
  isExpanded: true,               // Initial expanded state
  items: [...],
)

API Reference #

VooSectionList #

Main widget for displaying sections.

VooSectionConfig #

VooSectionItem #

Example #

See the example folder for a complete sample application.

License #

MIT License - see LICENSE for details.

Built by VooStack #

Need help with Flutter development or custom UI solutions?

Contact Us

VooStack builds enterprise Flutter applications and developer tools.