flutter - 如何在页面上显示日期选择器而无需再点击一个按钮？

Question

到目前为止，所有示例都在点击选项卡后将日期选择器显示为弹出窗口。

有没有办法显示如下所示的日期选择器？谢谢！

页面上的日期选择器，无需单击选项卡

标签： flutterdatepicker

Answer 1

您始终可以将选择器视为小部件，这就是为什么不需要通过单击按钮来调用它们的原因。检查下面的完整示例或在此处在线运行。

显示 Cupertino 日期选择器的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CupertinoDatePicker(
        mode: CupertinoDatePickerMode.date,
        initialDateTime: DateTime.now(),
        onDateTimeChanged: (DateTime value) {},
      ),
    );
  }
}

对于材料小部件：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CalendarDatePicker(
        onDateChanged: (DateTime value) {},
        lastDate: DateTime.now().add(Duration(days: 30)),
        firstDate: DateTime.now(),
        initialDate: DateTime.now(),
      ),
    );
  }
}

如果您对此有任何进一步的疑问，请告诉我。