flutter_combo_box

Description:

flutter combo box

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


Usage #
Example link
To use this plugin, add flutter_combo_box as a dependency in your pubspec.yaml file.
Hou to use this package #
dependencies:
flutter:
sdk: flutter
flutter_combo_box: ^0.0.2+5 # 👈🏼 add this line
copied to clipboard

Import the package to your main file

import 'package:flutter_combo_box/flutter_combo_box.dart';
copied to clipboard
Combobox Tile Types #

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

Title #
TileTitle({String title, Color accent = Colors.blue})
copied to clipboard
Title and subtitle #
TileTitleSubTitle({String title, String description, Color accent = Colors.purple})
copied to clipboard
Icon and title #
TileIconTitle({IconData icon, String title, Color background = Colors.indigo})
copied to clipboard
Example #
import 'package:flutter/material.dart';
import 'package:flutter_combo_box/components/combo_box.dart';
import 'package:flutter_combo_box/flutter_combo_box.dart';

class ExampleComboBoxPage extends StatefulWidget {

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

class Gender{
final String? title;
final String? subtitle;

Gender({this.title, this.subtitle});
}

class _ExampleComboBoxPageState extends State<ExampleComboBoxPage> {

var genders = ['Male', 'Female', 'Undefined'];
var genderTitleSubTitles = [
Gender(title: 'Male' , subtitle: 'The male gender'),
Gender(title: 'Female' , subtitle: 'The female gender'),
Gender(title: 'Undefined', subtitle: 'The undefined gender')
];

late Future<List<dynamic>> datas;

String selectedGender = '';
var selectedGenderTitleSubTitle = Gender();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
padding: EdgeInsets.symmetric(horizontal: 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: ComboBoxFuture(
label: 'Custom label',
hint: 'Custom hint',
datas: datas,
onChanged: (item){},
)
),
SizedBox(height: 16),
Container(
child: Center(
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
labelText: 'Gender',
hintText: 'Please select the gender here',
hintStyle: TextStyle(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: TileTitle(title: item, accent: Colors.red),
value: item,
);
}).toList(),
onChanged: (value) => setState(() => selectedGender = value ?? 'N/A'),
value: selectedGender,
),
),
),
SizedBox(height: 16),
Container(
child: Center(
child: DropdownButtonFormField<Gender>(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
labelText: 'Gender with Subtitle',
hintText: 'Please select the gender here',
hintStyle: TextStyle(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: genderTitleSubTitles.map((item) {
return DropdownMenuItem(
child: TileTitleSubTitle(title: item.title, subtitle: item.subtitle, accent: Colors.red),
value: item,
);
}).toList(),
onChanged: (value) => setState(() => selectedGenderTitleSubTitle = value ?? Gender()),
value: selectedGenderTitleSubTitle,
),
),
),
],
),
),
);
}
}
copied to clipboard
Screenshots #
Global view

Expanded view

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