[英]Flutter Datepicker - close on select date, not by OK confirm button?
Is it possible for a flutter datepicker to close as soon as a date is pressed?是否有可能在按下日期后立即关闭颤动日期选择器? something like a jquery datepicker ...
类似于 jquery datepicker 的东西...
Future<void> _selectDate(BuildContext context) async {
final DateTime? picked = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(2015, 8),
lastDate: DateTime(2101)
);
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
selectedDateF = "${selectedDate.toLocal()}".split(' ')[0];
});
}
You can use the CalendarDatePicker
widget.您可以使用
CalendarDatePicker
小部件。 Here's a complete example:这是一个完整的例子:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Date Picker',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage> {
DateTime _selectedDate = DateTime.now();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Custom Date Picker'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
_selectedDate.toString().split(' ').first,
style: Theme.of(context).textTheme.headline4,
),
ElevatedButton(
onPressed: () async {
final result = (await Navigator.push(
context,
MaterialPageRoute<DateTime>(builder: (context) => DatePicker(initialDate: _selectedDate)),
))!;
setState(() {
_selectedDate = result;
});
},
child: const Text("Pick Date"),
),
],
),
),
);
}
}
class DatePicker extends StatelessWidget {
final DateTime initialDate;
const DatePicker({required this.initialDate, Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Pick Date"),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => Navigator.pop<DateTime>(context, initialDate),
),
),
body: Center(
child: Container(
color: Colors.blue[50],
margin: const EdgeInsets.all(10.0),
padding: const EdgeInsets.all(10.0),
child: CalendarDatePicker(
initialDate: initialDate,
firstDate: DateTime(2021),
lastDate: DateTime(2025),
onDateChanged: (DateTime selectedDate) {
Navigator.pop<DateTime>(context, selectedDate);
},
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.