Может кто-нибудь сказать мне, как я могу реализовать этот дизайн выбора даты во флаттере?

Dob Design

-1
Siddharth Chandra 3 Сен 2020 в 02:52

2 ответа

Лучший ответ

Вы можете скопировать и вставить полный код ниже
Вы можете использовать пакет 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,
      ),
    )

Рабочая демо

enter image description here

Полный код

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,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
1
chunhunghan 3 Сен 2020 в 00:58

Вы можете использовать 3 Cupertino Picker для создания Custom Date Picker, связанных друг с другом. Измените значение magnification, чтобы оно находилось в центре экрана.

     CupertinoPicker(
      magnification: 1.5,
      itemExtent: 50,
      looping: true,
      }
0
Amon Chowdhury 3 Сен 2020 в 00:15