Time Picker

Widżet showTimePicker() działa zarówno na platformie Android, jak i iOS i służy do ręcznego wybierania czasu. Użytkownik może ręcznie wybrać czas w formacie 12-godzinnym, w tym również w formacie AM i PM. Widżet selektora czasu pokazuje nam aktualny czas równy czasowi naszego urządzenia. Możemy go zmodyfikować według własnego wyboru. Gdy użytkownik wybierze czas i kliknie przycisk OK, zwróci nam wybrany czas. Jeśli użytkownik kliknie przycisk ANULUJ, zwróci nam null, czyli cofnie do poprzedniego czasu.

---

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ć godzinę, ja wybrałam aktualną godzinę i nazwałam to selectedTime:

TimeOfDay selectedTime = TimeOfDay.now();

Aby czas nie był wyświetlany niepoprawnie, czyli 12:3 zamiast 12:30, należy dodać dwie zmienne:

 final hours = selectedTime.hour.toString().padLeft(2, '0');
 final minutes = selectedTime.minute.toString().padLeft(2, '0');

Żeby wyświetlić wewnątrz widżetu tekstowego po pierwsze godziny, a po drugie minuty należy użyć takiego zapisu:

Text ('$hours:$minutes'),

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

ElevatedButton(
              child: const Text('Wybierz godzinę'),
              onPressed: () {
                _selectTime(context);
              },
            ),

I zostało tylko utworzyć metodę, którą nazwałam _selectTime, aby po kliknięciu w przycisk wywołać selektor czasu:

 _selectTime(BuildContext context) async {
    final TimeOfDay? timeOfDay = await showTimePicker(
      context: context,
      initialTime: selectedTime,
      initialEntryMode: TimePickerEntryMode.dial,
    );
    if (timeOfDay != null && timeOfDay != selectedTime) {
      setState(() {
        selectedTime = timeOfDay;
      });
    }
  }

---

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(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}



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

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

class _HomePageState extends State<HomePage> {
  TimeOfDay selectedTime = TimeOfDay.now();

  @override
  Widget build(BuildContext context) {
    final hours = selectedTime.hour.toString().padLeft(2, '0');
    final minutes = selectedTime.minute.toString().padLeft(2, '0');

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '$hours:$minutes',
              style: const TextStyle(fontSize: 60),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              child: const Text('Wybierz godzinę'),
              onPressed: () {
                _selectTime(context);
              },
            ),
          ],
        ),
      ),
    );
  }

  _selectTime(BuildContext context) async {
    final TimeOfDay? timeOfDay = await showTimePicker(
      context: context,
      initialTime: selectedTime,
      initialEntryMode: TimePickerEntryMode.dial,
    );
    if (timeOfDay != null && timeOfDay != selectedTime) {
      setState(() {
        selectedTime = timeOfDay;
      });
    }
  }
}

---

TimePicker-motywy

W tej sekcji dostosujemy wygląd i działanie selektora czasu (kolory, styl tekstu, kształty, style pól wprowadzania itp.) za pomocą TimePickerThemeData.

Aby nasz selektor czasu był bardziej kolorowy, należy zmodyfikować kod w klasie MaterialApp w ThemeData w następujący sposób:

theme: ThemeData(
        timePickerTheme: TimePickerThemeData(
          backgroundColor: Colors.yellow,
          hourMinuteTextColor: Colors.white,
          hourMinuteColor: Colors.teal,
          dialHandColor: Colors.orange,
          dialBackgroundColor: Colors.indigo,
          dialTextColor: Colors.lime,
          entryModeIconColor: Colors.red,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30),
          ),
          hourMinuteShape: const CircleBorder(),
          hourMinuteTextStyle: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 60,
          ),
          dayPeriodTextStyle: const TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 30,
          ),
          helpTextStyle: const TextStyle(
            fontSize: 20,
          ),
        ),
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.green,
        ),
      ),

---

PODSUMOWANIE:

W tym artykule omówiono najważniejsze aspekty korzystania z selektora czasu, którego będziesz bardzo potrzebować podczas tworzenia aplikacji za pomocą Fluttera. Znajomość i opanowanie ich sprawi, że Twój przepływ pracy będzie znacznie przyjemniejszy.