In meiner App erstelle ich eine Anmeldeseite, auf der ich DOB hinzufügen muss. Ich möchte eine Datumsauswahl hinzufügen, aber ich bekomme keine korrekte Methode, um dies zu tun.
77
Eine einfache App, die ihre Verwendung demonstriert:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
DateTime selectedDate = DateTime.now();
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;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("${selectedDate.toLocal()}".split(' ')[0]),
SizedBox(height: 20.0,),
RaisedButton(
onPressed: () => _selectDate(context),
child: Text('Select date'),
),
],
),
),
);
}
}
Und ein Dartpad dazu:
Text("${selectedDate.toLocal()}".split(' ')[0]),
Das Flattern bietet eine
showDatePicker
Funktion, um dies zu erreichen. Es ist Teil der Flattermaterialbibliothek.Eine vollständige Dokumentation finden Sie unter showDatePicker .
Ein implementiertes Beispiel finden Sie auch hier: Datums- und Zeitauswahl
quelle
für Zeitwähler-
Deklarieren Sie diese Variable auf Klassenebene
und rufen Sie diese Methode auf: -
Future<Null> _selectTime(BuildContext context) async { final TimeOfDay picked_s = await showTimePicker( context: context, initialTime: selectedTime, builder: (BuildContext context, Widget child) { return MediaQuery( data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false), child: child, );}); if (picked_s != null && picked_s != selectedTime ) setState(() { selectedTime = picked_s; }); }
quelle
Ein einfacher Weg ist die Verwendung der CupertinoDatePicker- Klasse:
Importieren Sie zuerst das Paket, welches Gebäude flattert:
import 'package:flutter/cupertino.dart';
Fügen Sie dann einfach dieses Widget in Ihr Formular ein:
Container( height: 200, child: CupertinoDatePicker( mode: CupertinoDatePickerMode.date, initialDateTime: DateTime(1969, 1, 1), onDateTimeChanged: (DateTime newDateTime) { // Do something }, ), ),
Das Ergebnis ist wie folgt:
Sie können den Modus auch in (dateAndTime, time) ändern ... zum Beispiel für den dateAndTime-Modus:
Container( height: 200, child: CupertinoDatePicker( mode: CupertinoDatePickerMode.dateAndTime, initialDateTime: DateTime(1969, 1, 1, 11, 33), onDateTimeChanged: (DateTime newDateTime) { //Do Some thing }, use24hFormat: false, minuteInterval: 1, ), ),
Das Ergebnis ist wie folgt:
quelle
Zunächst müssen Sie eine Variable erstellen. In dieser Variablen können Sie das ausgewählte Datum wie folgt speichern:
import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; //this is an external package for formatting date and time class DatePicker extends StatefulWidget { @override _DatePickerState createState() => _DatePickerState(); } class _DatePickerState extends State<DatePicker> { DateTime _selectedDate; //Method for showing the date picker void _pickDateDialog() { showDatePicker( context: context, initialDate: DateTime.now(), //which date will display when user open the picker firstDate: DateTime(1950), //what will be the previous supported year in picker lastDate: DateTime .now()) //what will be the up to supported date in picker .then((pickedDate) { //then usually do the future job if (pickedDate == null) { //if user tap cancel then this function will stop return; } setState(() { //for rebuilding the ui _selectedDate = pickedDate; }); }); } @override Widget build(BuildContext context) { return Column( children: <Widget>[ RaisedButton(child: Text('Add Date'), onPressed: _pickDateDialog), SizedBox(height: 20), Text(_selectedDate == null //ternary expression to check if date is null ? 'No date chosen!' : 'Picked Date: ${DateFormat.yMMMd().format(_selectedDate)}'), ], ); } }
quelle
Dies ist auch ein sehr guter Weg:
import 'package:flutter/material.dart'; import 'dart:async'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Date Picker Example'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { var finaldate; void callDatePicker() async { var order = await getDate(); setState(() { finaldate = order; }); } Future<DateTime> getDate() { // Imagine that this function is // more complex and slow. return showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(2018), lastDate: DateTime(2030), builder: (BuildContext context, Widget child) { return Theme( data: ThemeData.light(), child: child, ); }, ); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( decoration: BoxDecoration(color: Colors.grey[200]), padding: EdgeInsets.symmetric(horizontal: 30.0), child: finaldate == null ? Text( "Use below button to Select a Date", textScaleFactor: 2.0, ) : Text( "$finaldate", textScaleFactor: 2.0, ), ), new RaisedButton( onPressed: callDatePicker, color: Colors.blueAccent, child: new Text('Click here', style: TextStyle(color: Colors.white)), ), ], ), ), ); } }
Dies ist von https://fluttercentral.com/Articles/Post/1199/Flutter_DatePicker_Example
quelle