Git Product home page Git Product logo

month-year-picker's Introduction

Material Month/Year Picker

Pub GitHub Workflow Status

The month year picker inspired by the Flutter's date picker design.

Quick Start

  1. Open your pubspec.yaml file and add this entry:

    month_year_picker: ^0.2.0+2

    OR just run flutter pub add month_year_picker using your preferred terminal app.

  2. Then run flutter pub get.

  3. Import this library into your code:

    import 'package:month_year_picker/month_year_picker.dart';

    Additionally, ensure your MaterialApp refers to the following localizationsDelegates:

        GlobalMaterialLocalizations.delegate,
        MonthYearPickerLocalizations.delegate,
    
  4. Usage in code:

    final selected = await showMonthYearPicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2019),
      lastDate: DateTime(2023),
    );

Parameters

Parameter Description
context Must not be null. Will be passed to the internal showDialog function call.
initialDate Must not be null and must fall between the firstDate and lastDate. The initialDate will be truncated to its year and month components. When the month/year picker is first displayed, it will show the month/year of the initialDate, with initialDate selected.
firstDate Must not be null. The firstDate will be truncated to its year and month components. This is the earliest allowable month/year.
lastDate Must not be null. The lastDate will be truncated to its year and month components. This is the latest allowable month/year.
selectableMonthYearPredicate Can be null. The function to provide full control over which month/year can be selected. If provided, only the month/year that the selectableMonthYearPredicate returns true for will be selectable.
locale Can be null. If provided, will be used to set the locale for the month/year picker. Otherwise, it defaults to the ambient locale provided by Localizations.
useRootNavigator Can be null. Will be passed to the internal showDialog function call.
routeSettings Can be null. Will be passed to the internal showDialog function call.
textDirection Can be null. If provided, will be used to set the text direction for the month/year picker. Otherwise, it defaults to the ambient locale provided by Directionality.
builder Can be null. This parameter can be used to wrap the dialog widget with a parent widget.
initialMonthYearPickerMode Must not be null. Can be used to have the year picker initially appear in the MonthYearPickerMode.year mode. It defaults to the MonthYearPickerMode.month mode.

Screenshots

Mode Screenshot
Month picker in portrait mode with default locale.
Year picker in portrait mode with default locale.
Month picker in portrait mode with Malay locale.
Year picker in portrait mode with Malay locale.
Month picker in portrait mode with Arabic locale.
Year picker in portrait mode with Arabic locale.
Month picker in landscape mode with default locale.
Year picker in landscape mode with default locale.
Month picker in landscape mode with Malay locale.
Year picker in landscape mode with Malay locale.
Month picker in landscape mode with Arabic locale.
Year picker in landscape mode with Arabic locale.

Building From Source

Dependencies

  1. Dart SDK version 2.17.0 or newer.
  2. Flutter SDK version 3.0 or newer.

Steps

  1. Clone this git repo into your machine.
  2. Run .\gen_l10n.ps1 to re-generate the localised strings.

Features and Bugs

Please file feature requests and bugs at the issue tracker.

License

This project is licensed under the MIT License - see the LICENSE file for details.

month-year-picker's People

Contributors

zulfahmi93 avatar fabian-balzer avatar sahil-scrobits avatar laminr avatar realpha39 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.