Was ist der richtige Weg, um die Datumsauswahl in der Flatter-App hinzuzufügen?

In meiner App erstelle ich eine Anmeldeseite, auf der ich DOB hinzufügen muss. Ich möchte eine Datumsauswahl hinzufügen, aber ich bekomme nicht den richtigen Weg, dies zu tun.

Eine einfache App, die ihre Verwendung zeigt:

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:

https://dartpad.dev/e5a99a851ae747e517b75ac221b73529

Flutter bietet showDatePicker Funktion, um dies zu erreichen. Es ist Teil der Flattermaterialbibliothek.

Die vollständige Dokumentation finden Sie unter showDatePicker.

Ein implementiertes Beispiel finden Sie auch hier: Datums- und Zeitauswahl

Einfacher Weg ist die Verwendung CupertinoDatePicker Klasse:

Importieren Sie zunächst sein Paket, das in Flattern aufbaut:

import 'package:flutter/cupertino.dart';

Dann fügen Sie 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 wird wie dieses Bild sein:

Sie können den Modus auch in (dateAndTime,time) ändern … zum Beispiel dies 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 wird wie dieses Bild sein:

für Zeitnehmer-

Deklarieren Sie diese Variable auf Klassenebene

TimeOfDay selectedTime = TimeOfDay.now();

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;
      });
  }

Zunächst müssen Sie eine Variable erstellen. In dieser Variable 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 was chosen!'
            : 'Picked Date: ${DateFormat.yMMMd().format(_selectedDate)}'),
      ],
    );
  }
}

Zweite Option:
Eine andere Option könnte verwendet werden, indem verwendet wird https://pub.dev/packages/date_time_picker diese Bibliothek. Sie können diese Bibliothek in Ihrem Widget-Baum verwenden und ausgewähltes Datum oder Uhrzeit in einer Variablen als String speichern:

Fügen Sie zuerst das Paket in pubspec.yaml hinzu und klicken Sie dann auf Pakete abrufen. Unten wird nur eine Demo zur Datumsauswahl gegeben, und eine detaillierte Implementierung kann in der angegebenen Paket-URL gefunden werden.

import 'package:flutter/material.dart';

import 'package:date_time_picker/date_time_picker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Date Time'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: DateTimePicker(
                initialValue: '', // initialValue or controller.text can be null, empty or a DateTime string otherwise it will throw an error.
                type: DateTimePickerType.date,
                dateLabelText: 'Select Date',
                firstDate: DateTime(1995),
                lastDate: DateTime.now()
                    .add(Duration(days: 365)), // This will add one year from current date
                validator: (value) {
                  return null;
                },
                onChanged: (value) {
                  if (value.isNotEmpty) {
                    setState(() {
                    _selectedDate = value;
                    });
                  }
                },
                // We can also use onSaved
                onSaved: (value) {
                  if (value.isNotEmpty) {
                    _selectedDate = value;
                  }
                },
              ),
            ),
            SizedBox(height: 16),
            Text(
              'Your Selected Date: $_selectedDate',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

Dies ist die moderne und trendige Datumsauswahl für Android und iOS.

   DateTime _chosenDateTime;

   // Show the modal that contains the CupertinoDatePicker
     void _showDatePicker(ctx) {
     // showCupertinoModalPopup is a built-in function of the cupertino library
    showCupertinoModalPopup(
    context: ctx,
    builder: (_) => Container(
      height: 500,
      color: Color.fromARGB(255, 255, 255, 255),
      child: Column(
        children: [
          Container(
            height: 400,
            child: CupertinoDatePicker(
                initialDateTime: DateTime.now(),
                onDateTimeChanged: (val) {
                  setState(() {
                    _chosenDateTime = val;
                  });
                }),
          ),

          // Close the modal
          CupertinoButton(
            child: Text('OK'),
            onPressed: () => Navigator.of(ctx).pop(),
          )
        ],
      ),
    ));
 [More details][2]

    DateTime _chosenDateTime;

   // Show the modal that contains the CupertinoDatePicker
    void _showDatePicker(context) {
    // showCupertinoModalPopup is a built-in function of the cupertino library
   showCupertinoModalPopup(
   context: context,
   builder: (_) => Container(
  height: 500,
  color: Color.fromARGB(255, 255, 255, 255),
  child: Column(
    children: [
      Container(
        height: 400,
        child: CupertinoDatePicker(
            initialDateTime: DateTime.now(),
            onDateTimeChanged: (val) {
              setState(() {
                _chosenDateTime = val;
              });
            }),
        ),
       ],
     ),
  ));