web-dev-qa-db-fra.com

Quelle est la bonne façon d'ajouter un sélecteur de date dans l'application Flutter?

Dans mon application, je crée une page d'inscription sur laquelle je dois ajouter une date de naissance. Je veux ajouter le sélecteur de date à cela, mais je ne parviens pas à faire la bonne chose.

androidiosflutterflutter-layoutdart-2
26
Code Hunter

Une application simple montrant son utilisation:

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<Null> _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()}"),
            SizedBox(height: 20.0,),
            RaisedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}
59
chemamolins

Flutter fournit la fonction showDatePicker pour y parvenir. Il fait partie de la bibliothèque de matériaux Flutter.

Vous pouvez trouver la documentation complète à l'adresse showDatePicker .

Vous pouvez également trouver un exemple implémenté ici: sélecteur de date et heure

3
Piyush Maurya