Date Picker

DatePicker to widżet we Flutterze, który pozwala użytkownikowi wybrać datę. Ponieważ nie ma dostępnego widżetu do tworzenia selektora dat, użyję funkcji showDatePicker().

Selektor dat jest przydatnym dodatkiem do interfejsu użytkownika, który ułatwia użytkownikom aplikacji wybieranie dat z kalendarza. Niezależnie od tego, czy dodajesz pole daty urodzenia do formularza rejestracyjnego, czy oferujesz użytkownikom przedziały czasowe na umówienie się na spotkanie, możesz skorzystać z biblioteki selektorów dat, aby uprościć ten proces.

---

W pierwszej kolejności należy wyekstrahować widżet Scaffold, klikając Scaffold, żółtą lampeczkę i wybierając Extract Widget. Ja nazwałam nową klasę HomePage. Należy również zmienić StatelessWidget na StatefullWidget. Następnie należy zdefiniować datę, ja wybrałam aktualną datę i nazwałam to _dateTime:

DateTime _dateTime = DateTime(2022, 8, 24);

Żeby wyświetlić wewnątrz widżetu tekstowego datę, należy użyć takiego zapisu:

Text('${_dateTime.day}-${_dateTime.month}-${_dateTime.year}',),

Należy jeszcze utworzyć przycisk do wyboru daty za pomocą zapisu:

            ElevatedButton(
              child: const Text('Wybierz datę'),
              onPressed: () async {
                DateTime? newDate = await showDatePicker(
                  context: context,
                  initialDate: _dateTime,
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2030),
                );
                if (newDate != null) {
                  setState(
                    () {
                      _dateTime = newDate;
                    },
                  );
                }
              },
            ),

W parametrze firstDate wybieramy rok początkowy, czyli od którego będziemy mogli wybierać datę.

W parametrze lastDate wybieramy rok końcowy, czyli do którego roku będziemy mogli wybierać datę -ostatnia data możliwa do wyboru w kalendarzu.

Musimy też utworzyć warunek z if, jeśli nowa data, czyli newDate nie jest pusta to wtedy możemy ustawić datę i godzinę i będzie to równe nowej dacie.

 if (newDate != null) {
                  setState(
                    () {
                      _dateTime = newDate;
                    },
                  );
                }

---

Całość kodu wygląda następująco:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const HomePage(),
    );
  }
}



class HomePage extends StatefulWidget {
  const HomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  
  DateTime _dateTime = DateTime(2022, 8, 24);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '${_dateTime.day}-${_dateTime.month}-${_dateTime.year}',
              style: const TextStyle(fontSize: 60),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              child: const Text('Wybierz datę'),
              onPressed: () async {
                DateTime? newDate = await showDatePicker(
                  context: context,
                  initialDate: _dateTime,
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2030),
                );
                if (newDate != null) {
                  setState(
                    () {
                      _dateTime = newDate;
                    },
                  );
                }
              },
            ),
          ],
        ),
      ),
    );
  }
}

---

DatePicker - motywy

Aby nasz selektor daty mógł mieć inne kolory lub inne nazwy przycisków, należy w funkcji showDatePicker dodać poniższy kod:

                 showDatePicker(
                  confirmText: 'Wybierz',
                  cancelText: 'Cofnij',
                  helpText: 'Wybierz datę',
                  builder: (context, child) {
                    return Theme(
                      data: Theme.of(context).copyWith(
                        colorScheme: const ColorScheme.light(
                          primary: Colors.amber,
                          onPrimary: Colors.red,
                          onSurface: Colors.green,
                        ),
                        textButtonTheme: TextButtonThemeData(
                          style: TextButton.styleFrom(
                            primary: Colors.brown,
                          ),
                        ),
                      ),
                      child: child!,
                    );
                  },
                );

Dzięki parametrowi cancelText możemy zmienić nazwę przycisku, domyślnie jest to nazwa CANCEL.

Dzięki parametrowi confirmText możemy zmienić nazwę drugiego przycisku, domyślnie jest to nazwa OK.

Dzięki parametrowi helpText możemy zmienić górną nazwę w kalendarzu, domyślnie jest to nazwa SELECT DATE.

---

PODSUMOWANIE:

W tym artykule dowiedzieliśmy się jak dodać selektor daty oraz jak zmienić jego kolory. Mam nadzieję, że ten blog pomoże Ci poznać DatePicker we Flutterze i będziesz mógł go wdrożyć do swoich projektów.