flutter_combo_box 0.0.2+1

This package help to use custom spinner with title, title with subtitle, title with icon.

flutter_combo_box

This package help to use custom spinner with title, title with subtitle, title with icon.

Usage

Example link

Hou to use this package

• Add the dependency to your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  flutter_combo_box: ^0.0.2+1 # 👈🏼 add this line

• Import the package to your main file

import 'package:flutter_combo_box/flutter_combo_box.dart';

Combobox types

• Combobox with Title
• ComboBox with Title and subtitle
• ComboBox with Icon and title

Title

ComboBoxTitle({String title, Color accent = Colors.blue})

Title and subtitle

ComboBoxTitleSubTitle({String title, String description, Color accent = Colors.purple})

Icon and title

ComboBoxIconTitle({IconData icon, String title, Color background = Colors.indigo})

Example

Container(
  child: Center(
    child: DropdownButtonFormField<String>(
      decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
        labelText: 'Gender',
        hintText: 'Please select the gender here',
        hintStyle: GoogleFonts.quicksand(color: Colors.grey, fontSize: 16, fontWeight: FontWeight.w800),
        alignLabelWithHint: true,
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: Colors.black26),
          gapPadding: 16,
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: Colors.black26),
          gapPadding: 16,
        ),
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
          borderSide: BorderSide(color: Colors.black26),
          gapPadding: 16,
        ),
      ),
      items: genders.map((item) {
        return DropdownMenuItem(
          child: ComboBoxTitle(title: item, accent: Colors.red),
          value: item,
        );
      }).toList(),
      onChanged: (value) => setState(() => selectedGender = value),
      value: selectedGender,
    ),
  ),
),

Screenshots

Global view Expanded view

For help getting started with Combobox package, view our Gith repository