flutter_combo_box 0.0.2+5 icon indicating copy to clipboard operation
flutter_combo_box: ^0.0.2+5 copied to clipboard

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.

Build Status Release Status

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
  • Import the package to your main file
import 'package:flutter_combo_box/flutter_combo_box.dart';

Combobox Tile Types #

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

Title #

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

Title and subtitle #

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

Icon and title #

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

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,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots #

Global view alt text Expanded view alt text

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

7
likes
110
pub points
69%
popularity

Publisher

unverified uploader

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

Homepage

Documentation

API reference

License

Icon for licenses.unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_combo_box