代码之家 › 专栏 › 技术社区 › Kent

Flutter DateTimePicker大小太小|调整Flutter DateTime Picker大小

dart-null-safety android-datepicker flutter-layout dart flutter

Kent · 技术社区 · 3 年前

由于用户反馈,我正在尝试最大化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

0 回复 | 直到 3 年前

Abhijith 3 年前

您可以通过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,
                         ),
                       ),
                     ],
                   ),
                 );
               },
             );

Kent 3 年前

showDatePicker“显示一个包含材料设计日期选择器的对话框。”根据 documentation .

我最初的解决方案来自 this question 但它似乎不起作用。

由于时间限制,我将使用 SfDateRangePicker 目前,这解决了我的宽度问题,并将在未来尝试找到另一种方法。