customizable_multiselect_field 1.0.1
customizable_multiselect_field: ^1.0.1 copied to clipboard

A Flutter package that provides a highly customizable multiselect field.

example/lib/main.dart

import 'package:customizable_multiselect_field/customizable_multiselect_flutter.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Customizable MultiselectField'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final beefListValue = [1, 2, 3];
  final List<int> sectorWithoutFoodListValue = [];
  final vegetablesListValue = ['Broccoli'];
  final noTitleListValue = ['No title'];
  List<List<dynamic>?>? valueList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CustomizableMultiselectField(
                  decoration: InputDecoration(
                    labelText: 'Multiselect Sample teste',
                  ),
                  customizableMultiselectWidgetOptions: CustomizableMultiselectWidgetOptions(
                    hintText: Text('Please Select a value', style: TextStyle(color: Colors.grey)),
                    chipShape: RoundedRectangleBorder(
                      side: BorderSide(color: Colors.red, width: 1),
                      borderRadius: BorderRadius.circular(40.0),
                    ),
                  ),
                  customizableMultiselectDialogOptions: CustomizableMultiselectDialogOptions(),
                  dataSourceList: [
                    DataSource<String>(
                      dataList: [
                        {
                          'label': 'Lime',
                          'value': 'test1',
                        },
                        {
                          'label': 'Apple',
                          'value': 'test2',
                        },
                      ],
                      valueList: ['test1', 'test2'],
                      options: DataSourceOptions(valueKey: 'value', labelKey: 'label', title: Text('Fruits', style: TextStyle(color: Colors.red), textAlign: TextAlign.start,)),
                    ),
                    DataSource(
                      dataList: [
                        {
                          'number': 'Chuck',
                          'value': 1,
                        },
                        {
                          'number': 'Rump Steak',
                          'value': 2,
                        },
                        {
                          'number': 'Neck Steak',
                          'value': 3,
                        },
                      ],
                      valueList: beefListValue,
                      options: DataSourceOptions(valueKey: 'value', labelKey: 'number', title: Text('Beef', style: TextStyle(color: Colors.grey), textAlign: TextAlign.start,)),
                    ),
                    DataSource<int>(
                      dataList: [
                        {
                          'number': 1,
                          'value': 1,
                        },
                        {
                          'number': 2,
                          'value': 2,
                        },
                        {
                          'number': 3,
                          'value': 3,
                        },
                      ],
                      valueList: sectorWithoutFoodListValue,
                      options: DataSourceOptions(valueKey: 'value', labelKey: 'number', title: Text('Sectors Without Food', style: TextStyle(color: Colors.brown), textAlign: TextAlign.start,)),
                    ),
                    DataSource<String>(
                      dataList: [
                        {
                          'key': 'Broccoli',
                        },
                        {
                          'key': 'Cucumber',
                        },
                        {
                          'key': 'Cauliflower',
                        },
                      ],
                      options: DataSourceOptions(valueKey: 'key', labelKey: 'key', title: Text('Vegetables', style: TextStyle(color: Colors.green), textAlign: TextAlign.start)),
                      valueList: vegetablesListValue,
                    ),
                    DataSource<String>(
                      dataList: [
                        {
                          'key': 'No title',
                        },
                      ],
                      options: DataSourceOptions(valueKey: 'key', labelKey: 'key',),
                      valueList: noTitleListValue,
                    ),
                  ],
                  onChanged: ((List<List<dynamic>?> value) => print(value)),
                  onSaved: ((List<List<dynamic>?>? newValueList) {
                    setState(() {
                      valueList = newValueList;
                    });
                  }),
                  validator: ((List<List<dynamic>?>? value) {
                    if(value!.every((element) => element!.isEmpty))
                      return 'Please Select a value!';
                    return null;

                  })
                ),
              ),
              SizedBox(height: 16,),
              TextButton(
                onPressed: () {
                  if(_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                  }
                },
                child: Text('Save'),
              ),
              SizedBox(height: 16),
              Text(valueList.toString()),
            ],
          ),
        ),
      ),
    );
  }
}
9
likes
130
pub points
63%
popularity

Publisher

Unknown

A Flutter package that provides a highly customizable multiselect field.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD (LICENSE)

Dependencies

collection, flutter

More

Packages that depend on customizable_multiselect_field