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
 |
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 :
|
|
|
|
|
761 Views |
|