For example on how to use the component repo.
- Seperate Date picker Component.
- Seperate Time picker Component.
- CustomShape for Selected Item.
- CustomGradient for Submit Button.
- CustomItemColor for Selected Item.
 |  |  |
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.
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'); }, ), ), ], ), ), ); } }Please see the Changelog page to know what's recently changed.
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.