Display Week days in Horizontally Flutter DatePicker

Published July 23, 2022

In this flutter example we will learn how to display dates in week format. Display calender in Horizontal with day wise.
For this we used date_picker library classes and updated them as per our requirement.
Here we are going to design the template like below

Here we are just showing the date as 1 week in a row from the current date
We can also change the number of days in a row

Let get started

Step 1: Create simple flutter project
Step 2: Add below dependencies which are required while using the date_picker library classes

dev_dependencies:
  flutter_test:
    sdk: flutter
  intl: ^0.17.0

Step 3: Now we will add date picker library class into our class. You can download those classes from

Step 4: Our sample application contains below folder structure

Step 5: We are done with adding required classes and libraries

We are going to add DatePicker widget into our application

DatePicker(
  this.startDate, {
  Key? key,
  this.width = 60,
  this.height = 80,
  this.controller,
  this.monthTextStyle = defaultMonthTextStyle,
  this.dayTextStyle = defaultDayTextStyle,
  this.dateTextStyle = defaultDateTextStyle,
  this.selectedTextColor = Colors.white,
  this.selectionColor = AppColors.defaultSelectionColor,
  this.deactivatedColor = AppColors.defaultDeactivatedColor,
  this.initialSelectedDate,
  this.activeDates,
  this.inactiveDates,
  this.daysCount = 500,
  this.onDateChange,
  this.locale = "en_US",
  this.showDay = false,
}) : assert(
          activeDates == null || inactiveDates == null,
          "Can't "
          "provide both activated and deactivated dates List at the same time.");

Now we need to update our main dart file code with below code

import 'package:flutter/material.dart';


import 'date_picker/date_picker_widget.dart';

void main() {
  runApp( MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weekday Scroller Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Weekday Scroller Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _selectedDay = DateTime.now();
  final DatePickerController _controller = DatePickerController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Center(
          child: Column(

            crossAxisAlignment: CrossAxisAlignment.center,

            children: [
              SizedBox(height: 20,),
              Text("Week wise Date Picker "),
              SizedBox(height: 20,),
              Text("Pick Select your day"),
              SizedBox(height: 20,),
              Container(
                width: 400,
                child: DatePicker(
                  DateTime(2022,07,23),//pass here the date which you need to start
                  daysCount: 7,
                  width: 45,
                  height: 70,
                  showDay: true,
                  dateTextStyle:
                  const TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
                  controller: _controller,
                  initialSelectedDate: DateTime.now(),
                  selectionColor: Colors.orange,
                  selectedTextColor: Colors.black,

                  onDateChange: (value) {

                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Step 6: Now run the application and you will see the below output on the screen

Flutter Datepicker with days in horizontally

Douwnload complete source code for Flutter Datepicker with horizontally

Conclusion: In this flutter example we created simple Display Datepicker in horizontally with days in a week.

Article Contributed By :

1070 Views