Select

In ProgressDark modeRTL

A single-select dropdown picker.

7:21

Framework

Select a framework...

Framework

Select a framework...

Language

English

Country

Choose a country...

Disabled

Not available

Installation

Copy the component into your project using the CLI:

$ronakcn add select

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart

import 'package:flutter/material.dart';
import '../components/select/select.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnSelect Example')),
      body: Center(
        child: RcnSelect(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Select ships with the following variants:

default

A plain dropdown selector.

7:21

Framework

Select a framework...

with-label

Select with a label above.

7:21

Framework

Select a framework...

Language

English

with-placeholder

Shows placeholder text when empty.

7:21

Country

Choose a country...

disabled

A non-interactive disabled select.

7:21

Disabled

Not available

Props

Prop	Type	Default	Description
`value`	`String?`	`null`	Currently selected value.
`onChanged`*	`ValueChanged<String?>`	—	Called when selection changes.
`items`*	`List<DropdownMenuItem<String>>`	—	List of selectable items.
`placeholder`	`String?`	`null`	Placeholder shown when empty.
`label`	`String?`	`null`	Label above the select.
`enabled`	`bool`	`true`	Whether the select is enabled.

Source files

lib/components/ui/select.dart

import 'package:flutter/material.dart';

class RcnSelect<T> extends StatelessWidget {
  const RcnSelect({
    super.key,
    this.value,
    required this.onChanged,
    required this.items,
    this.placeholder,
    this.label,
    this.enabled = true,
  });

  final T? value;
  final ValueChanged<T?> onChanged;
  final List<DropdownMenuItem<T>> items;
  final String? placeholder;
  final String? label;
  final bool enabled;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (label != null) ...[
          Text(label!, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onSurface)),
          const SizedBox(height: 6),
        ],
        DropdownButtonFormField<T>(
          value: value,
          onChanged: enabled ? onChanged : null,
          items: items,
          hint: placeholder != null ? Text(placeholder!, style: TextStyle(color: colors.onSurface.withOpacity(0.4))) : null,
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(color: colors.outline),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(color: colors.primary, width: 2),
            ),
          ),
        ),
      ],
    );
  }
}

Version 0.1.0 · input category