flutter_date_picker
Cupertino styled date and time picker component which works on both ios and android.
Example
For example on how to use the component repo.
Features
- Seperate Date picker Component.
- Seperate Time picker Component.
- CustomShape for Selected Item.
- CustomGradient for Submit Button.
- CustomItemColor for Selected Item.
|
|
|
Getting started
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
...
flutter_date_picker: "^0.1.8"In your library add the following import:
import 'package:flutter_date_picker/flutter_date_picker.dart';
import 'package:flutter_date_picker/flutter_time_picker.dart';For help getting started with Flutter, view the online documentation.
Usage
Let's demo the basic usage with CustomItemColor, CustomShape and CustomGradient
import 'package:flutter/material.dart';
import 'package:flutter_date_picker/flutter_date_picker.dart';
import 'package:flutter_date_picker/flutter_time_picker.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
VoidCallback _showBottomSheetCallback;
bool showDatePicker = false;
@override
void initState() {
super.initState();
_showBottomSheetCallback = _showBottomSheet;
}
void _snackBar(String text) {
_scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(text)));
}
_showBottomSheet(String picker) {
setState(() {
// disable the button
_showBottomSheetCallback = null;
});
_scaffoldKey.currentState
.showBottomSheet<Null>(
(BuildContext context) {
switch (picker) {
case 'DatePicker':
return DatePicker(
key: dobKey,
setDate: _setDate,
customShape: StadiumBorder(
side: BorderSide(
color: Color(0xFFF991A0),
)),
);
case 'TimePicker':
return TimePicker(
key: tobKey,
setTime: _setTime,
customShape: BeveledRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15.0),
topRight: Radius.circular(15.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(15.0),
),
),
);
}
},
)
.closed
.whenComplete(() {
if (mounted) {
setState(() {
// re-enable the button
_showBottomSheetCallback = _showBottomSheet;
});
}
});
}
void _setDate() {
Navigator.of(context).pop();
_snackBar(dobKey.currentState.dobStrMonth +
' ${dobKey.currentState.dobDate}' +
' ${dobKey.currentState.dobYear}');
}
void _setTime() {
Navigator.of(context).pop();
var hour = tobKey.currentState.hour;
var min = tobKey.currentState.minute;
var sec = tobKey.currentState.seconds;
_snackBar("$hour:$min:$sec ${tobKey.currentState.sunOrMoon}");
}
@override
Widget build(BuildContext context) {
return SafeArea(
bottom: false,
child: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
backgroundColor: Color(0xFFF98495),
title: Text('Date Picker'),
),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
alignment: Alignment.topCenter,
child: RaisedButton(
color: Color(0xFFF98495),
child: Text('Date Picker'),
onPressed: () {
_showBottomSheet('DatePicker');
},
),
),
Container(
padding: EdgeInsets.all(10.0),
alignment: Alignment.topCenter,
child: RaisedButton(
color: Color(0xFFF98495),
child: Text('Time Picker'),
onPressed: () {
_showBottomSheet('TimePicker');
},
),
),
],
),
),
);
}
}Changelog
Please see the Changelog page to know what's recently changed.
License
Copyright 2018 Rajesh Kumar
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.