Create an option select in Flutter with Dart

In this example, I’m going to show you how to create a select dropdown in Flutter using the Dart programming language.

To do this, we’ll create a component that we’ll call CustomSelect. This element or component will have its properties and events to handle option selection, allowing us to use it in any view or widget.

import 'package:flutter/material.dart';

class CustomSelect extends StatefulWidget {
  final List<String> options;
  final String? selectedOption;
  final ValueChanged<String>? onChanged;

  const CustomSelect({
    Key? key,
    required this.options,
    this.selectedOption,
    this.onChanged,
  }) : super(key: key);

  @override
  _CustomSelectState createState() => _CustomSelectState();
}

class _CustomSelectState extends State<CustomSelect> {
  late String _selectedOption;

  @override
  void initState() {
    super.initState();
    _selectedOption = widget.selectedOption ?? widget.options.first;
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: _selectedOption,
      onChanged: (String? newValue) {
        if (newValue != null) {
          setState(() {
            _selectedOption = newValue;
          });
          widget.onChanged?.call(newValue);
        }
      },
      items: widget.options.map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

Now, in the MyApp view, we’ll use this CustomSelect component we just created as shown below.

import 'package:flutter/material.dart';
import 'package:your_package_name/custom_select.dart'; // Import the component

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SelectExample(), // Use the SelectExample view
    );
  }
}

class SelectExample extends StatefulWidget {
  @override
  _SelectExampleState createState() => _SelectExampleState();
}

class _SelectExampleState extends State<SelectExample> {
  final List<String> _options = ['Option 1', 'Option 2', 'Option 3'];
  late String _selectedOption;

  @override
  void initState() {
    super.initState();
    _selectedOption = _options.first;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Select Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomSelect(
              options: _options,
              selectedOption: _selectedOption,
              onChanged: (String newValue) {
                setState(() {
                  _selectedOption = newValue;
                });
              },
            ),
            SizedBox(height: 20),
            Text(
              'Selected option: $_selectedOption',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

DevCodeLight