Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0

Sharpen your coding skills—try JavaScript challenges on TOOLX now!

advertisement

The DatePicker and TimePicker Widget in Flutter

Profile Image

Zia

2 Followers

Aug 26, 2024
-
7 sec read
346
0
0
0

datepicker and timepicker in flutter❌

This is a Material widget in a Flutter that allows the user to pick a date and time. If there is no widget available to create a date and time picker, the showDatePicker() and showTimePicker() functions can be utilized to achieve the same. These two functions display the Material Design date and time selection in a dialog by calling the built-in Flutter functions showDatePicker() and showTimePicker() respectively. Additionally, it is important to note that the date-picker constructor has three major values.

Following are some examples of values or options that can be given in an application while using DatePicker:

  • firstDate: The first date from which the user can choose. They cannot choose a date before the specified starting date.

  • initialDate: The initial date that will be selected when the dialog is first opened.

  • lastDate: The last date beyond which the user cannot select.



Time selector constructor

The time selector constructor has an initial time parameter. DatePicker cannot be used without initialTime. Additionally, the start time has a Time0fDay type that describes the time in the beginning when the user opens the dialog box.

It is important to note that initialTime can also display the current time The current time represents time as of today and will be highlighted in the time grid. If no value is specified, the Time0f Day.now() which denotes the present time and date will be used.


The use of the DatePicker Widget in FLutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Customized DatePicker'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedDate = 'No date chosen';
  void _pickDate() async {
    DateTime? date = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
      builder: (BuildContext context, Widget? child) {
        return Theme(
          data: ThemeData.light().copyWith(
            colorScheme: ColorScheme.light(
              primary: Colors.deepPurple,
              onPrimary: Colors.white,
              onSurface: Colors.black,
            ),
            dialogBackgroundColor: Colors.white,
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                foregroundColor: Colors.deepPurple,
              ),
            ),
          ),
          child: child!,
        );
      },
    );
    if (date != null) {
      setState(() {
        _selectedDate = date.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            _selectedDate,
            style: TextStyle(fontSize: 24),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _pickDate,
            child: Text('Select Date'),
            style: ElevatedButton.styleFrom(
              primary: Colors.deepPurple,
              onPrimary: Colors.white,
              padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
            ),
          ),
        ],
      ),
    );
  }
}


Date Picker Widget in Flutter - Complete Guide - Flutter Tutorial



The use of the TimePicker Widget in FLutter:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Styled TimePicker'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedTime = 'No time chosen';
  void _pickTime() async {
    TimeOfDay? time = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
      builder: (BuildContext context, Widget? child) {
        return Theme(
          data: ThemeData.light().copyWith(
            colorScheme: ColorScheme.light(
              primary: Colors.blue,
              onPrimary: Colors.white,
              onSurface: Colors.black,
            ),
            textButtonTheme: TextButtonThemeData(
              style: TextButton.styleFrom(
                foregroundColor: Colors.blue, // button text color
              ),
            ),
          ),
          child: child!,
        );
      },
    );
    if (time != null) {
      setState(() {
        _selectedTime = time.format(context);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(_selectedTime),
          SizedBox(height: 10.0,),
          ElevatedButton(
            onPressed: _pickTime,
            child: Text('Select Time'),
          ),
        ],
      ),
    );
  }
}

Time Picker in Flutter - Complete Guide - Flutter tutorial



Flutter Widgets DatePicker Widget Date picker widget in flutter Date picker in flutter TimePicker Widget Time Picker widget in flutter Time Picker in Flutter

advertisement

Profile Image

Published by: 

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.

More From: 
Zia
collections in dart
Collections in Dart Programming and...

Collections are used to store, retrieve, and communicate mass data. They represent ...
Profile Image
Zia
Jun 9, 2024
629
0
0
0
Machine Learning
What is Machine Learning: A...

Machine learning has emerged as a groundbreaking technology transforming theway we engage ...
Profile Image
Zia
Feb 20, 2024
473
0
0
0
null-coalescing operator in c#
The Null-Coalescing (??) Operator in...

C provides nullable types to identify and handle valuetype fields with null ...
Profile Image
Zia
May 4, 2024
605
0
0
0
Looping statement in dart
Looping Statement in Dart Programming

In Dart, looping statements are used to execute a block of code ...
Profile Image
Zia
Jun 6, 2024
480
0
0
0
Recomended
the blind horse and the thief
The Blind Horse And The...

A villager came to a town on horseback. He tied the horse ...
Profile Image
Story Link
Aug 24, 2024
397
0
0
0
Approaches to Git
Remote Branches in Git -...

Here are a few common approaches As Git is a distributed version ...
Profile Image
Zia
Feb 24, 2024
360
0
0
0
How to Leverage Digital Tools...

Challenges to Watch For 1.Data Security Risks Financial apps store sensitive data. ...
Profile Image
tullfinancial
Feb 21, 2025
67
0
0
0
widgets in flutter
Introduction to Widgets in Flutter...

In Flutter, everything is a widget. If the user wants to add ...
Profile Image
Zia
Jun 12, 2024
542
0
0
0