Flutter DateTimePicker 尺寸太小 |调整 Flutter DateTimePicker 大小

Question

根据用户反馈，我正在尝试最大化 DatePicker 大小（在其他设备上太小）。我尝试过添加构建器，但没有任何区别。

以下是我当前的代码：

_datePicker() {
return showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(DateTime.now().year),
  lastDate: DateTime.now(),
  initialDatePickerMode: DatePickerMode.day,
  builder: (context, child) {
    return Container(
      height: 555,
      width: 500,
      child: child,
    );
  },
);

}

我想避免使用库并尽可能坚持使用库存小部件。

如果我错过了什么，请告诉我。 TIA

Answer 1

您可以通过 Container()、SizedBox() 等在构建器中使用它来调整日期选择器对话框的大小，增加 sizebox 的高度和宽度

这是工作示例，

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.date_range),
          onPressed: () async {
            await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(DateTime.now().year),
                lastDate: DateTime.now(),
                initialDatePickerMode: DatePickerMode.day,
                builder: (BuildContext context, Widget child) {
                  return Center(
                      child: SizedBox(
                    width: 500.0,
                    height: 500.0,
                    child: child,
                  ));
                });


          },
        ));
  }
}

这是另一个例子

 await showDatePicker(
               context: context,
               initialDate: DateTime.now(),
               firstDate: DateTime.now(),
               lastDate: DateTime.now().add(Duration(days: 356)),
               builder: (context, child) {
                 return SingleChildScrollView(
                  child: Column(
                     children: <Widget>[
                       Padding(
                         padding: const EdgeInsets.only(top: 10.0),
                         child: Container(
                           height: 700,
                           width: 700,
                           child: child,
                         ),
                       ),
                     ],
                   ),
                 );
               },
             );

Answer 2

showDatePicker“显示包含 Material Design 日期选择器的对话框。”根据文档。

我最初的解决方案来自这个问题，但它似乎不起作用。

由于时间限制，我现在将使用SfDateRangePicker，它解决了我遇到的宽度问题，并且将来会尝试寻找其他方法。

Answer 3

我不是专家，但我以相反的方式面对这个问题，日期太大，最后发现在文本主题下，bodyLarge影响日期，labelLarge影响确定和取消按钮。

但是我无法在本地为特定页面设置文本主题，或者在使用主题按钮调用日期选择器之前，我必须在 MaterialApp 主题上设置它：

MaterialApp.router(
      title: 'App Name',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light().copyWith(
          textTheme: const TextTheme(
              labelLarge: TextStyle(
                  fontFamily: 'Proxima_Nova',
                  color: Color(0xff0A0A0A),
                  fontSize: 14.0,
              ),
              bodyLarge: TextStyle(
                  fontFamily: 'Proxima_Nova',
                  color: Color(0xff0A0A0A),
                  fontSize: 14.0,
              ),
          ),
    ),
    routerConfig: router.config(),
); 

希望这对某人有帮助。