flutter_combo_box 0.0.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.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

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

Title and subtitle

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

Icon and title

ComboBox.iconTitle({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: ComboBox.title(title: item, accent: Colors.red),
            value: item,
          );
        }).toList(),
        onChanged: (value) => setState(() => gender = value),
        value: gender,
      ),
    ),
),

Screenshots

Global view Expanded view

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