month_year_dropdown

Description:

month year dropdown

month_year_dropdown #
A Flutter package for creating dropdown menus to select months and years. This package provides a customizable dropdown widget that allows users to choose from a list of months or years, enhancing the user experience in date-related inputs.

Created By Krishn Kumar Krish0034


Features #

Dropdown menus for selecting months and/or years.
Customizable dropdown field widget.
Configurable styles, error messages, and hints.
Compatible with iOS, Android, and web platforms.

Installation 📦 #
1 To use this package, add month_year_dropdown as a dependency in your pubspec.yaml file:
dependencies:
month_year_dropdown: ^1.0.0
copied to clipboard
2 Then, import the package into your Dart code:
import 'package:month_year_dropdown/month_year.dart';
copied to clipboard
Usage #
Here's a simple example that shows how to use the MonthYearDropdown widget:
import 'package:flutter/material.dart';
import 'package:month_year_dropdown/month_year.dart';

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

class MyApp extends StatelessWidget {
final TextEditingController controller1= TextEditingController();
final TextEditingController controller2= TextEditingController();
final TextEditingController controller3= TextEditingController();
final TextEditingController controller4= TextEditingController();

MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Month Year Dropdown Example'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(

children: [
const Text('Month and Year Example'),
const SizedBox(height: 10,),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: MonthYearDropdown(
controller: controller1,
padding: const EdgeInsets.all(8.0),
itemTextStyle: const TextStyle(color: Colors.black, fontSize: 16),
monthsEnable: true,
textStyle: const TextStyle(color: Colors.black, fontSize: 18),
textCapitalization: TextCapitalization.words,
readOnly: true,
textInputType: TextInputType.text,
autoValidateMode: AutovalidateMode.onUserInteraction,
textInputAction: TextInputAction.done,
initialText: 'Select Month/Year',
suffixIconColor: Colors.blue,
contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
errorText: 'Invalid selection',
hintText: 'Tap to select',
hintTextStyle: const TextStyle(color: Colors.grey),
fillColor: Colors.white,
borderColor: Colors.blue,
errorBorderColor: Colors.red,
borderRadius: BorderRadius.circular(8),
innerLabelText: 'Choose Month/Year',
innerLabelTextStyle: const TextStyle(color: Colors.black),
),
),
const SizedBox(width: 20,),
Expanded(
child: MonthYearDropdown(
controller: controller2,
padding: const EdgeInsets.all(8.0),
itemTextStyle: const TextStyle(color: Colors.black, fontSize: 16),
yearsEnable: true,
monthsEnable: false,
textStyle: const TextStyle(color: Colors.black, fontSize: 18),
textCapitalization: TextCapitalization.words,
readOnly: true,
textInputType: TextInputType.text,
autoValidateMode: AutovalidateMode.onUserInteraction,
textInputAction: TextInputAction.done,
initialText: 'Select Month/Year',
suffixIconColor: Colors.blue,
contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
errorText: 'Invalid selection',
hintText: 'Tap to select',
hintTextStyle: const TextStyle(color: Colors.grey),
fillColor: Colors.white,
borderColor: Colors.blue,
errorBorderColor: Colors.red,
borderRadius: BorderRadius.circular(8),
innerLabelText: 'Choose Month/Year',
innerLabelTextStyle: const TextStyle(color: Colors.black),
),
),
],
),
const SizedBox(height: 10,),
const Text('Month Example'),
const SizedBox(height: 10,),
MonthYearDropdown(
controller: controller3,
padding: const EdgeInsets.all(8.0),
itemTextStyle: const TextStyle(color: Colors.black, fontSize: 16),
monthsEnable: true,
textStyle: const TextStyle(color: Colors.black, fontSize: 18),
textCapitalization: TextCapitalization.words,
readOnly: true,
textInputType: TextInputType.text,
autoValidateMode: AutovalidateMode.onUserInteraction,
textInputAction: TextInputAction.done,
initialText: 'Select Month/Year',
suffixIconColor: Colors.blue,
contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
errorText: 'Invalid selection',
hintText: 'Tap to select',
hintTextStyle: const TextStyle(color: Colors.grey),
fillColor: Colors.white,
borderColor: Colors.blue,
errorBorderColor: Colors.red,
borderRadius: BorderRadius.circular(8),
innerLabelText: 'Choose Month/Year',
innerLabelTextStyle: const TextStyle(color: Colors.black),
),
const SizedBox(height: 10,),
const Text('Year Example'),
const SizedBox(height: 10,),
MonthYearDropdown(
controller: controller4,
padding: const EdgeInsets.all(8.0),
itemTextStyle: const TextStyle(color: Colors.black, fontSize: 16),
yearsEnable: true,
monthsEnable: false,
textStyle: const TextStyle(color: Colors.black, fontSize: 18),
textCapitalization: TextCapitalization.words,
readOnly: true,
textInputType: TextInputType.text,
autoValidateMode: AutovalidateMode.onUserInteraction,
textInputAction: TextInputAction.done,
initialText: 'Select Month/Year',
suffixIconColor: Colors.blue,
contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
errorText: 'Invalid selection',
hintText: 'Tap to select',
hintTextStyle: const TextStyle(color: Colors.grey),
fillColor: Colors.white,
borderColor: Colors.blue,
errorBorderColor: Colors.red,
borderRadius: BorderRadius.circular(8),
innerLabelText: 'Choose Month/Year',
innerLabelTextStyle: const TextStyle(color: Colors.black),
),
],
),
),
),
),
);
}
}
copied to clipboard
Properties Usage ⚙️ #
DbUsernameSuggesterField



Property
Type
Description




menuPosition
EdgeInsetsGeometry
Specifies the padding for the dropdown field.


itemTextStyle
TextStyle
Style applied to the text of each item in the dropdown menu.


monthsEnable
bool
Enables month selection if set to true.


yearsEnable
bool
Enables year selection if set to true.


controller
TextEditingController
Controller for the text field to manage the selected value.


textStyle
TextStyle
Style applied to the text in the text field.


readOnly
bool
If true, the text field will be read-only.


decoration
InputDecoration
Decoration for the text field, including label, hint, and error styles.


menuPosition
RelativeRect
Position of the dropdown menu.


innerLabelTextStyle
TextStyle
Style applied to the inner label text.


innerLabelText
String
Label text to display inside the text field.


hintText
String
Hint text to display when the text field is empty.


prefixIcon
Widget
Widget to display as the prefix icon of the text field.


suffixIcon
Widget
Widget to display as the suffix icon of the text field.



Platform Support 🌐 #

Android: Supported on SDK 16 and above.
iOS: Supported on iOS 11.0 and above.
Web: Supported on all modern web browsers.
Linux: Supported on any Linux distribution.
macOS: Supported on macOS 10.14 and above.
Windows: Supported on all Windows versions.

More information #

Pub Package: Provides a direct link to the package page on pub.dev where users can find more detailed information, version history, and installation instructions.
Flutter Documentation: Links to the official Flutter documentation, serving as a resource for general information, guides, and best practices related to Flutter development.