如何在页面 W/O 上多点击一个按钮来显示日期选择器？

Question

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

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

Date picker on the page without clicking a tab

Answer 1

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

显示 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) {},
      ),
    );
  }
}

对于 material 小部件：

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

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

如何在页面 W/O 上多点击一个按钮来显示日期选择器？

How To Display Date Picker on The Page W/O tapping one more button?

datepicker

flutter