tesseract
Reputation: 150
How do i customise a date picker interface in flutter?
I have a design i am trying o replicate in flutter which a user can be able to select date from a dropdown
The design is not a problem, however what is the problem is the logic.
How do i Implement this?
I tried looking for flutter packages to help and i found one closest to my need which is datepicker_dropdown.
But the only issue with this package is that it doesn't have an option for margin as all the boxes are two close to each other which then alters the desired design
I also tried using some other date picker packages but then the problem is...
How do i get to automatically fill in the dropdown fields of my the design to be filled when a date is picked using any date picker?
Any idea of how to implement this design would be helpful. Thanks!
This is an update to the current situation ( code and output screen added )
class StartAJobView extends GetView<AuthController> {
@override
Widget build(BuildContext context) {
final controller = Get.put(EServiceFormController());
return WillPopScope(
onWillPop: Helper().onWillPop,
child: Scaffold(
appBar: AppBar(
title: Text("Start a job".tr,
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xff151515))),
centerTitle: false,
leadingWidth: 15,
backgroundColor: Colors.white10,
automaticallyImplyLeading: false,
elevation: 0,
leading: new IconButton(
icon: new Icon(Icons.arrow_back_ios,
size: 20, color: Color(0xff3498DB)),
onPressed: () => Navigator.pop(context),
),
),
body: StartAJobForm(),
),
);
}
}
class StartAJobForm extends StatelessWidget {
const StartAJobForm({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Form(
//key: controller.registerStepTwoFormKey,
child: ListView(
primary: true,
children: [
Stack(
alignment: AlignmentDirectional.bottomCenter,
children: [
Container(
width: double.infinity,
child: Column(
children: [
Column(
children: [
Divider(
color: Color(0xff34495E).withOpacity(0.1),
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 22, top: 20),
child: Text(
'Enter job details to begin',
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xff151515)),
),
),
),
SizedBox(
height: 10,
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(
top: 5, left: 22, right: 22),
child: Text(
'Enter the details of your agreement with a customer to start a job',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w400,
color: Color(0xff596780),
),
),
),
),
SizedBox(
height: 24,
),
],
),
],
),
),
],
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(
left: 22.0,
right: 22.0,
),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF8F8F8),
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.black.withOpacity(0.13),
),
),
child: TextFormField(
cursorColor: Color(0xff3498DB),
//initialValue: controller.currentUser?.value?.name,
// onSaved: (input) =>
// controller.currentUser.value.name = input,
validator: (input) => input.length < 3
? "Should be more than 3 characters".tr
: null,
decoration: InputDecoration(
floatingLabelStyle: TextStyle(color: Color(0xff3498DB)),
hintText: 'Asoebi Gown ',
label: Text('Job Title'),
border: InputBorder.none,
contentPadding: EdgeInsets.only(left: 20, right: 20),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff3498DB), width: 1.0),
borderRadius: BorderRadius.circular(8),
),
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.only(left: 22.0, right: 22.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF8F8F8),
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.black.withOpacity(0.13),
),
),
child: TextFormField(
cursorColor: Color(0xff3498DB),
//initialValue: controller.currentUser?.value?.name,
// onSaved: (input) =>
// controller.currentUser.value.name = input,
validator: (input) => input.length < 3
? "Should be more than 3 characters".tr
: null,
decoration: InputDecoration(
floatingLabelStyle: TextStyle(color: Color(0xff3498DB)),
hintText: '2',
label: Text('Quantiy of items '),
border: InputBorder.none,
contentPadding: EdgeInsets.only(left: 20, right: 20),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff3498DB), width: 1.0),
borderRadius: BorderRadius.circular(8),
),
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.only(left: 22.0, right: 22.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF8F8F8),
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.black.withOpacity(0.13),
),
),
child: TextFormField(
keyboardType: TextInputType.multiline,
maxLines: null,
cursorColor: Color(0xff3498DB),
//initialValue: controller.currentUser?.value?.name,
// onSaved: (input) =>
// controller.currentUser.value.name = input,
validator: (input) => input.length < 3
? "Should be more than 3 characters".tr
: null,
decoration: InputDecoration(
floatingLabelStyle: TextStyle(color: Color(0xff3498DB)),
hintStyle: TextStyle(
color: Color(0xff596780),
fontSize: 12,
fontWeight: FontWeight.w400),
hintText:
' She wants to sew \n 1. An off shoulder asoebi gown (purple) with \n front slit, corset and stoning. \n 2. dinner gown, V neck, long with slit (black)',
hintMaxLines: 5,
label: Text('Job description'),
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: 20, right: 20, top: 10, bottom: 10),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff3498DB), width: 1.0),
borderRadius: BorderRadius.circular(8),
),
),
),
),
),
SizedBox(
height: 16,
),
Padding(
padding: const EdgeInsets.only(left: 22.0, right: 22.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF8F8F8),
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.black.withOpacity(0.13),
),
),
child: TextFormField(
cursorColor: Color(0xff3498DB),
//initialValue: controller.currentUser?.value?.name,
// onSaved: (input) =>
// controller.currentUser.value.name = input,
validator: (input) => input.length < 3
? "Should be more than 3 characters".tr
: null,
decoration: InputDecoration(
floatingLabelStyle: TextStyle(color: Color(0xff3498DB)),
hintText: 'Ajoke Sanusi Fafunwa',
label: Text('Customer Name'),
border: InputBorder.none,
contentPadding: EdgeInsets.only(left: 20, right: 20),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff3498DB), width: 1.0),
borderRadius: BorderRadius.circular(8),
),
),
),
),
),
FadeInDown(
child: Padding(
padding: const EdgeInsets.all(22.0),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF8F8F8),
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.black.withOpacity(0.13),
),
),
child: InternationalPhoneNumberInput(
validator: (input) =>
!input.contains('1,2,3,4,5,6,7,8,9,0')
? "Should be a valid phone number".tr
: null,
onInputChanged: (Value) {},
// onSaved: (input) => controller.currentUser.value
// .phoneNumber = input as String,
formatInput: false,
selectorConfig: SelectorConfig(
selectorType: PhoneInputSelectorType.DROPDOWN,
useEmoji: true,
),
cursorColor: Color(0xff3498DB),
inputDecoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 15, left: 0),
border: InputBorder.none,
hintText: 'Customer phone number',
hintStyle: TextStyle(fontSize: 12, color: Colors.black),
),
),
),
),
),
SizedBox(
height: 25,
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(bottom: 8, left: 22),
child: Text(
'When should this be completed',
style: GoogleFonts.poppins(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xff151515),
),
),
),
),
Padding(
padding: const EdgeInsets.all(22.0),
child: DropdownDatePicker(
inputDecoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 1.0),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
isDropdownHideUnderline: true,
isFormValidator: true,
startYear: 1900,
endYear: 2020,
width: 10,
selectedMonth: 10,
selectedYear: 1993,
onChangedDay: (value) => print('onChangedDay: $value'),
onChangedMonth: (value) => print('onChangedMonth: $value'),
onChangedYear: (value) => print('onChangedYear: $value'),
),
),
FadeInDown(
child: Padding(
padding: const EdgeInsets.only(left: 22.0, right: 22),
child: Container(
decoration: BoxDecoration(
color: Color(0xffF8F8F8),
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.black.withOpacity(0.13),
),
),
child: TextFormField(
cursorColor: Color(0xff3498DB),
// initialValue:
// controller.currentUser?.value?.email,
// onSaved: (input) =>
// controller.currentUser.value.email = input,
validator: (input) => input.length < 10
? "Should be more than 10 characters".tr
: null,
decoration: InputDecoration(
prefixIcon: new Padding(
padding: const EdgeInsets.only(
top: 15, left: 5, right: 0, bottom: 15),
child: new SizedBox(
height: 4,
child: Image.asset('assets/icon/geolocation.png'),
),
),
hintText: 'Business Address ',
label: Text('Business Address'),
border: InputBorder.none,
contentPadding: EdgeInsets.only(left: 20, right: 20),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Color(0xff3498DB), width: 1.0),
borderRadius: BorderRadius.circular(8),
),
),
),
),
),
),
SizedBox(
height: 10,
),
FadeInDown(
child: Padding(
padding: const EdgeInsets.only(left: 22.0, right: 22),
child: Container(
// decoration: BoxDecoration(
// color: Color(0xffF8F8F8),
// boxShadow: [
// BoxShadow(
// color: Color(0xffeeeeee),
// blurRadius: 10,
// offset: Offset(0, 2),
// ),
// ],
// borderRadius: BorderRadius.circular(8),
// border: Border.all(
// color: Colors.black.withOpacity(0.13),
// ),
// ),
child: CSCPicker(
onCountryChanged: (country) {},
onStateChanged: (state) {},
onCityChanged: (city) {},
countryDropdownLabel: 'Select Country',
stateDropdownLabel: 'Select State',
cityDropdownLabel: 'Select Town',
citySearchPlaceholder: 'Search Town',
dropdownDialogRadius: 20,
searchBarRadius: 20,
dropdownDecoration: BoxDecoration(
color: Color(0xffF8F8F8),
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Colors.black.withOpacity(0.13),
),
),
selectedItemStyle: TextStyle(
color: Color(0xff212121),
fontSize: 12,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w200,
),
),
),
),
),
SizedBox(
height: 30,
),
Padding(
padding: const EdgeInsets.all(14.0),
child: FadeInDown(
child: MaterialButton(
onPressed: () {
//Get.toNamed(Routes.PHONE_VERIFICATION);
},
color: Color(0xff34495E),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.18),
),
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
minWidth: double.infinity,
child: Text(
'Next',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w600),
),
),
),
),
SizedBox(
height: 25,
),
],
),
],
),
);
}
}This is my output with error :
Upvotes: 1
Views: 537
Answers (1)
Ravindra S. Patil
Reputation: 14775
Try below code
Add datepicker_dropdown: ^0.0.7+3 in your pubspec.yaml file
import below library in your code file:
import 'package:datepicker_dropdown/datepicker_dropdown.dart';
Your Widget:
Padding(
padding: const EdgeInsets.all(22.0),
child: DropdownDatePicker(
inputDecoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 1.0),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
),
isDropdownHideUnderline: true,
isFormValidator: true,
startYear: 1900,
endYear: 2020,
width: 10,
dayFlex: 1,
monthFlex: 1,
yearFlex: 1,
isExpanded: true,
selectedMonth: 10,
selectedYear: 1993,
onChangedDay: (value) => print('onChangedDay: $value'),
onChangedMonth: (value) => print('onChangedMonth: $value'),
onChangedYear: (value) => print('onChangedYear: $value'),
),
),
Result Screen-> 
Upvotes: 1
Related Questions
- Link that scrolls to position
- Use browser same page jump link functionality with offset
- HTML anchor link with no scroll or jump
- Href scroll to page with offset
- Change href url once browser scrolls down
- Can you make same page anchor jump to a scroll position rather than an actual anchor?
- Webpages with jump links
- How to scroll to an anchor with an offset?
- How to jump to certain position of scrolled element without scrolling the main screen?
- navigating to specific anchor tag from separate page w/ scroll & offset