flutter_custom_selector 0.0.1

flutter_custom_selector: ^0.0.1 copied to clipboard

Features #

Supports FormField features like validator. Awesome design. BottomSheet, or ChoiceChip style widgets. Contains Single Item selection as well as multi item selection with customized features

How to Use #

import 'package:flutter/material.dart';
import 'package:flutter_custom_selector/flutter_custom_selector.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Custom Selector Demo',
      //enable this line if you want test Dark Mode
      //theme: ThemeData.dark(),
      home: ExampleScreen(),
    );
  }
}


class ExampleScreen extends StatefulWidget {
  const ExampleScreen({Key? key}) : super(key: key);

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

class _ExampleScreenState extends State<ExampleScreen> {

  final _formKey = GlobalKey<FormState>();
  List<String>items = ["Pakistan","Saudi Arabia","UAE", "USA", "Turkey","Brazil", "Tunisia", 'Canada'];
  String ?selectedItem; // for single selection
  List<String> ?selectedItems; // for multi Selection


  @override
  Widget build(BuildContext context) {
    double deviceHeight = MediaQuery.of(context).size.height;
    double deviceWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Container(
        height: deviceHeight,
        width: deviceWidth,
        margin: const EdgeInsets.symmetric(horizontal: 20),
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CustomSingleSelectField<String>(
                items: items,
                title: "Country",
                onSelectionDone: (value){
                  selectedItem = value;
                  setState(() {});
                },
                itemAsString: (item)=>item,
              ),
              const SizedBox(height: 20,),
              CustomMultiSelectField<String>(
                title: "Countries",
                items: items,
                enableAllOptionSelect: true,
                onSelectionDone: _onCountriesSelectionComplete,
                itemAsString: (item) => item,
                validator: _validator,
                initialValue: selectedItems,
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onCountriesSelectionComplete(value){
    selectedItems?.addAll(value);
    setState(() {});
  }
  String? _validator(value){
    if(value.isEmpty){
      return 'Please select at least one country';
    }else{
      return null;
    }
  }
}