custom_single_select 1.0.0

A flexible and customizable single-select package for Flutter. You have 2 options, one with search capability if your list is long enough and the second for a short list without search. Offer a perfec [...]

example/example.md

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Custom Single Select Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(title: 'Custom Single Select Example'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> dataString = ["Ivory-Coast", "Cameron", "Senegal", "Togo"];
  String? initialValue;
  String? searchInitialValue;

  @override
  Widget build(BuildContext context) {
    double deviceHeight = MediaQuery.of(context).size.height;
    double deviceWidth = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SizedBox(
          height: deviceHeight,
          width: deviceWidth,
          child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.only(left: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                        color: Colors.grey,
                        width: 1,
                      ),
                    ),
                    child: Center(
                        child: CustomSingleSelect<String>(
                      		isBarrierDismissible: true,
                      		onSelect: (value) {
								setState(() {
								  initialValue = value;
								});
                      		},
							items: dataString,
							cancelText: "Fermer",
							cancelBackgroundColor: Colors.green,
							itemBackgroundColor: Colors.white,
							titleBackgroundColor: Colors.orange,
							separatorColor: Colors.blueGrey,
							separatorHeight: 3,
							cancelTextStyle: const TextStyle(
								color: Colors.white,
								fontSize: 20,
							),
							itemTextStyle: const TextStyle(
								color: Colors.deepPurple,
								fontWeight: FontWeight.bold,
								fontSize: 20,
							),
							title: "Country",
							titleTextStyle: const TextStyle(
								fontSize: 25,
								fontWeight: FontWeight.bold,
								color: Colors.white
							),
							selectedItemTextStyle: const TextStyle(
								fontSize: 20, fontWeight: FontWeight.bold
							),
							decoration: const InputDecoration(
								suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
								border: InputBorder.none,
								hintText: "Without search",
								hintStyle: TextStyle(
									fontSize: 20,
									color: Colors.black,
								)
							),
							initialValue: initialValue,
                    	)
					),
                  ),
                  const SizedBox(height: 20),
                  Container(
                    padding: const EdgeInsets.only(left: 10),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(
                        color: Colors.grey,
                        width: 1,
                      ),
                    ),
                    child: Center(
                        child: CustomSingleSearchSelect<String>(
							isBarrierDismissible: true,
							items: dataString,
							cancelText: "Fermer",
							cancelBackgroundColor: Colors.green,
							itemBackgroundColor: Colors.white,
							titleBackgroundColor: Colors.orange,
							separatorColor: Colors.blueGrey,
							separatorHeight: 3,
							cancelTextStyle: const TextStyle(
								color: Colors.white,
								fontSize: 20,
							),
							itemTextStyle: const TextStyle(
								color: Colors.deepPurple,
								fontWeight: FontWeight.bold,
								fontSize: 20,
							),
							title: "Country",
							titleTextStyle: const TextStyle(
								fontSize: 25,
								fontWeight: FontWeight.bold,
								color: Colors.black,
							),
							selectedItemTextStyle: const TextStyle(
								fontSize: 20, fontWeight: FontWeight.bold
							),
							decoration: const InputDecoration(
								suffixIcon: Icon(Icons.arrow_drop_down, size: 25),
								border: InputBorder.none,
								hintText: "With search",
								hintStyle: TextStyle(
									fontSize: 20,
									color: Colors.black,
								)
							),
							searchStyle: const TextStyle(
								fontSize: 20,
								color: Colors.black,
							),
							searchDecoration: const InputDecoration(
								border: InputBorder.none,
								hintText: "Search country",
								hintStyle: TextStyle(
									fontSize: 20,
									color: Colors.black,
								)
							),
							onSelect: (value) {
								setState(() {
									searchInitialValue = value;
								});
							},
                            valueSelected: searchInitialValue,
                    	)
					),
                  ),
                ],
              )
			)
		),
    );
  }
}