Skip to content

Commit

Permalink
chore: update docs for 0.0.5
Browse files Browse the repository at this point in the history
  • Loading branch information
andyhorn committed Dec 5, 2023
1 parent e09d984 commit a876284
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 31 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 0.0.5

Add a `showSimpleDatePickerDialog` function for selecting a single date in a dialog.

## 0.0.4

Add behavior customization API.
Expand Down
56 changes: 25 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ A simple, stylish `DateTimeRange` picker component for Flutter.

## Features

* In-line widget for selecting a range of dates (`DateTimeRange`) or a single date (`DateTime`)
* `showSimpleDateRangePickerDialog` method to easily display the picker in a dialog
* In-line widgets and dialogs for selecting a range of dates (`DateTimeRange`) or a single date (`DateTime`)
* Highly customizable colors, borders, and TextStyles

![Date range picker with a date range selected](https://github.com/andyhorn/simple_date_range_picker/raw/main/documentation/images/date_range_picker_selected.png)
Expand All @@ -18,19 +17,25 @@ Install the package by adding it to your `pubspec.yaml` file.

```yaml
dependencies:
simple_date_range_picker: ^0.0.4
simple_date_range_picker: ^0.0.5
```
## Usage
### Import
Import the package into your project:
```dart
import 'package:simple_date_range_picker/simple_date_range_picker.dart';
```

### Picker Widget

Use the `SimpleDateRangePicker` widget to display the picker as an in-line widget:

Use the `config` property to control the behavior of the widget. To select a `DateTimeRange`, use the `SimpleDateRangePickerRange` config class:

```dart
SimpleDateRangePicker(
config: SimpleDateRangePickerRange(
Expand All @@ -40,51 +45,40 @@ SimpleDateRangePicker(
),
```

Or, use `showSimpleDateRangePickerDialog` to display the picker as a modal dialog:
To select a single `DateTime` value, use the `SimpleDateRangePickerSingle` config class:

```dart
final dateRange = await showSimpleDateRangePickerDialog(context);
SimpleDateRangePicker(
config: SimpleDateRangePickerSingle(
initialDate: null,
onChanged: (date) => setState(() => selectedDate = date),
),
),
```

### Customization

#### Behavior

The behavior of the picker is configurable using one of two config classes:
### Picker Dialog

##### Date range
Or, you can show the picker in a dialog.

To select a date range, use the `SimpleDateRangePickerRange` config class.
To select a DateTimeRange, use `showSimpleDateRangePickerDialog`:

```dart
SimpleDateRangePicker(
config: SimpleDateRangePickerRange(
initialDateRange: null,
onChanged: (dateRange) => setState(() => selectedDates = dateRange),
),
),
final dateRange = await showSimpleDateRangePickerDialog(context);
```

In this example, the `onChanged` method will return a `DateTimeRange?` value.

##### Single date

To select a single date, use the `SimpleDateRangePickerSingle` config class.
To select a single DateTime, use `showSimpleDatePickerDialog`:

```dart
SimpleDateRangePicker(
config: SimpleDateRangePickerSingle(
initialDate: null,
onChanged: (date) => setState(() => selectedDate = date),
),
),
final date = await showSimpleDatePickerDialog(context);
```

In this example, the `onChanged` method will return a `DateTime?` value.
### Customization

#### Styles

The `SimpleDateRangePicker` exposes a styling API that uses the `SimpleDateRangePickerStyle` and the `SimpleDateRangePickerColors` classes.
Aside from a config class for changing the picker's behavior, most of the styles, labels, colors, etc are customizable.

The `SimpleDateRangePicker` widget exposes a styling API that uses the `SimpleDateRangePickerStyle` and the `SimpleDateRangePickerColors` classes.

```dart
class SimpleDateRangePickerColors {
Expand Down

0 comments on commit a876284

Please sign in to comment.