颤抖微调设计的日期选择器

Question

有人可以告诉我如何在颤振中实现这种日期选择器设计吗？

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用软件包https://pub.dev/packages/flutter_holo_date_picker
代码段

DatePickerWidget(
      looping: false, // default is not looping
      firstDate: DateTime(1990, 01, 01),
      lastDate: DateTime(2030, 1, 1),
      initialDate: DateTime(1991, 10, 12),
      dateFormat: "dd-MMM-yyyy",
      locale: DatePicker.localeFromString('en'),
      onChange: (DateTime newDate, _) => _selectedDate = newDate,
      pickerTheme: DateTimePickerTheme(
        itemTextStyle: TextStyle(color: Colors.black, fontSize: 19),
        dividerColor: Colors.blue,
      ),
    )

工作演示

完整代码

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

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

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

class WidgetPage extends StatefulWidget {
  @override
  _WidgetPageState createState() => _WidgetPageState();
}

class _WidgetPageState extends State<WidgetPage> {
  DateTime _selectedDate;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 25),
            child: DatePickerWidget(
              looping: false, // default is not looping
              firstDate: DateTime(1990, 01, 01),
              lastDate: DateTime(2030, 1, 1),
              initialDate: DateTime(1991, 10, 12),
              dateFormat: "dd-MMM-yyyy",
              locale: DatePicker.localeFromString('en'),
              onChange: (DateTime newDate, _) => _selectedDate = newDate,
              pickerTheme: DateTimePickerTheme(
                itemTextStyle: TextStyle(color: Colors.black, fontSize: 19),
                dividerColor: Colors.blue,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

您可以使用3 Cupertino Picker创建彼此连接的Custom Date Picker。更改magnification值以使其位于屏幕中心。

     CupertinoPicker(
      magnification: 1.5,
      itemExtent: 50,
      looping: true,
      }