My dropdown list has a multi-select feature. I have shown the list and selected Items are saved in an array called selectedClassList. Basically, it's a normal checkbox procedure.
But in the scenario of clicking a value called "any", I need to unselect all other items and need to mark "Any" as selected. The same is for other items, when a user clicks any of the other items, then item "any" should get unselected.
My code is like
DropdownButtonFormField2<dynamic>(
itemHeight: 40,
dropdownOverButton: false,
buttonWidth: double.infinity,
selectedItemHighlightColor: Colors.grey.shade300,
isExpanded: true,
value: widget.value,
dropdownElevation: 0,
itemPadding: const EdgeInsets.only(left: 15),
buttonDecoration: BoxDecoration(
border: Border.all(color: Colors.black87, width: 1),
borderRadius: BorderRadius.circular(5),
),
decoration: const InputDecoration.collapsed(
hintText: '',
border: InputBorder.none,
),
isDense: true,
offset: const Offset(0, -2),
iconSize: 20,
buttonHeight: 50,
buttonPadding: const EdgeInsets.only(left: 15, right: 10),
focusColor: const Color(0xffFFFFFF),
hint: const Text('Select One',
style: TextStyle(
fontSize: 14,
fontFamily: 'Poppins, Regular',
color: Color(0xffAAAAAA))),
style: const TextStyle(
fontSize: 14,
fontFamily: 'Poppins, Regular',
overflow: TextOverflow.ellipsis,
color: Color(0xff121212)),
iconOnClick: AnimatedRotation(
turns: 0.5,
duration: const Duration(milliseconds: 300),
child: Icon(Icons.arrow_down),
),
icon: AnimatedRotation(
turns: 1,
duration: const Duration(milliseconds: 300),
child: Icon(Icons.arrow_up),
),
dropdownDecoration: BoxDecoration(
border: Border.all(
color: Colors.black45,
width: 1,
),
borderRadius: const BorderRadius.all(Radius.circular(5)),
shape: BoxShape.rectangle),
dropdownMaxHeight: 200,
items: getClassDetails.data?.map((item) {
return DropdownMenuItem<dynamic>(
value: item,
enabled: false,
child: StatefulBuilder(
builder: (context, menuSetState) {
var _isSelected = selectedClass!
.where((element) =>
element.settingName == item.settingName)
.toList()
.isNotEmpty;
return InkWell(
onTap: () {
if (item.settingName == "Any") {
selectedClass!.clear();
}
if (_isSelected == true) {
selectedClass!.remove(item);
} else {
selectedClass!.add(item);
}
setState(() {});
menuSetState(() {});
},
child: Row(
children: [
_isSelected
? const Icon(Icons.check_box_outlined)
: const Icon(Icons.check_box_outline_blank),
const SizedBox(width: 16),
Text(
item.settingName.toString(),
style: const TextStyle(
fontSize: 14,
fontFamily: 'Poppins, Regular',
color: Color(0xff121212)),
),
],
),
);
},
),
);
}).toList(),
)
I am not good at explaining things. Kindly let me know if I made any mistake.
i met a error on val... It says ,
A value of type 'String?' can't be assigned to a variable of type
'String'. Try changing the type of the variable, or casting the
right-hand type to 'String'.
got error on this ,
this code is in below full code
onChanged: (val) => setState(
() => _applyleavevalueChanged = val),
validator: (val) {
setState(
() => _applyleavevalueToValidate = val);
return null;
},
onSaved: (val) => setState(
() => _applyleavevalueSaved = val),
i met a error on val... It says ,
A value of type 'String?' can't be assigned to a variable of type
'String'. Try changing the type of the variable, or casting the
right-hand type to 'String'.
this is my full source code.....
File : leaveapply.dart
import 'package:date_time_picker/date_time_picker.dart';
import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import './LeaveApply/BouncingButton.dart';
import './LeaveApply/leave_history.dart';
import 'LeaveApply/LeaveHistoryCard.dart';
import 'LeaveApply/datepicker.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: LeaveApply(),
title: 'Leave Apply',
));
}
class LeaveApply extends StatefulWidget {
#override
_LeaveApplyState createState() => _LeaveApplyState();
}
class _LeaveApplyState extends State<LeaveApply>
with SingleTickerProviderStateMixin {
late Animation animation, delayedAnimation, muchDelayedAnimation, LeftCurve;
late AnimationController animationController;
final searchFieldController = TextEditingController();
late TextEditingController _applyleavecontroller;
String _applyleavevalueChanged = '';
String _applyleavevalueToValidate = '';
String _applyleavevalueSaved = '';
late TextEditingController _fromcontroller;
String _fromvalueChanged = '';
String _fromvalueToValidate = '';
String _fromvalueSaved = '';
late TextEditingController _tocontroller;
String _tovalueChanged = '';
String _tovalueToValidate = '';
String _tovalueSaved = '';
#override
void initState() {
// ignore: todo
// TODO: implement initState
super.initState();
//SystemChrome.setEnabledSystemUIOverlays([]);
_applyleavecontroller =
TextEditingController(text: DateTime.now().toString());
_fromcontroller = TextEditingController(text: DateTime.now().toString());
_tocontroller = TextEditingController(text: DateTime.now().toString());
animationController =
AnimationController(duration: Duration(seconds: 3), vsync: this);
animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
parent: animationController, curve: Curves.fastOutSlowIn));
delayedAnimation = Tween(begin: 1.0, end: 0.0).animate(CurvedAnimation(
parent: animationController,
curve: Interval(0.2, 0.5, curve: Curves.fastOutSlowIn)));
muchDelayedAnimation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
parent: animationController,
curve: Interval(0.3, 0.5, curve: Curves.fastOutSlowIn)));
}
#override
void dispose() {
// ignore: todo
// TODO: implement dispose
animationController.dispose();
super.dispose();
}
final GlobalKey<FormState> _formkey = new GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
animationController.forward();
final double width = MediaQuery.of(context).size.width;
final double height = MediaQuery.of(context).size.height;
final GlobalKey<ScaffoldState> _scaffoldKey =
new GlobalKey<ScaffoldState>();
return AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, Widget? child) {
final GlobalKey<ScaffoldState> _scaffoldKey =
new GlobalKey<ScaffoldState>();
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
'Apply Leave',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
leading: new IconButton(
icon: new Icon(
Icons.arrow_back_ios,
color: Colors.black87,
size: 18.0,
),
onPressed: () => Navigator.of(context).pop(),
),
centerTitle: true,
elevation: 1.0,
),
body: Form(
key: _formkey,
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 15.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Divider(
color: Colors.black.withOpacity(0.5),
height: 1,
),
SizedBox(
height: height * 0.05,
),
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Text(
"Apply Leave Date",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
),
Padding(
padding: EdgeInsets.only(
top: 13,
),
child: Container(
// height: height * 0.06,
padding: EdgeInsets.only(
left: 10,
),
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(5),
),
child: Row(
children: [
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Container(
width: width * 0.75,
child: DateTimePicker(
type: DateTimePickerType.date,
dateMask: 'dd/MM/yyyy',
controller: _applyleavecontroller,
//initialValue: _initialValue,
firstDate: DateTime(2000),
lastDate: DateTime(2100),
calendarTitle: "Leave Date",
confirmText: "Confirm",
enableSuggestions: true,
//locale: Locale('en', 'US'),
onChanged: (val) => setState(
() => _applyleavevalueChanged = val),
validator: (val) {
setState(
() => _applyleavevalueToValidate = val);
return null;
},
onSaved: (val) => setState(
() => _applyleavevalueSaved = val),
),
),
),
Transform(
transform: Matrix4.translationValues(
delayedAnimation.value * width, 0, 0),
child: Icon(
Icons.calendar_today,
color: Colors.black,
),
),
],
),
),
),
SizedBox(
height: height * 0.03,
),
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Text(
"Choose Leave Type",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 14,
),
),
),
SizedBox(
height: height * 0.02,
),
Transform(
transform: Matrix4.translationValues(
delayedAnimation.value * width, 0, 0),
child: DropdownSearch<String>(
validator: (v) => v == null ? "required field" : null,
hint: "Please Select Leave type",
mode: Mode.MENU,
showSelectedItems: true,
items: [
"Medical",
"Family",
"Sick",
'Function',
'Others'
],
showClearButton: true,
onChanged: print,
),
),
SizedBox(
height: height * 0.05,
),
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Text(
"Leave Date",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
),
Padding(
padding: EdgeInsets.only(
top: 13,
),
child: Container(
// height: height * 0.06,
padding: EdgeInsets.only(
left: 10,
),
width: double.infinity,
decoration: BoxDecoration(
color: Colors.white38,
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
color: Colors.black12,
)
]),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Icon(
Icons.calendar_today,
color: Colors.black,
),
),
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Container(
padding: const EdgeInsets.only(left: 4.0),
width: width * 0.28,
decoration: BoxDecoration(
color: Colors.white38,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 2,
color: Colors.black26,
)
]),
child: CustomDatePicker(
controller: _fromcontroller,
title: "From",
onchanged: (val) =>
setState(() => _fromvalueChanged = val),
validator: (val) {
setState(
() => _fromvalueToValidate = val);
return null;
},
saved: (val) =>
setState(() => _fromvalueSaved = val),
),
),
),
),
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Icon(
Icons.arrow_forward,
color: Colors.black,
),
),
Transform(
transform: Matrix4.translationValues(
delayedAnimation.value * width, 0, 0),
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Container(
padding: const EdgeInsets.only(left: 4.0),
width: width * 0.28,
decoration: BoxDecoration(
color: Colors.white38,
boxShadow: [
BoxShadow(
offset: Offset(0, 1),
blurRadius: 2,
color: Colors.black26,
)
],
),
child: CustomDatePicker(
controller: _tocontroller,
title: "To",
onchanged: (val) => setState(() {
_tovalueChanged = val;
print(val);
}),
validator: (val) {
setState(() => _tovalueToValidate = val);
return null;
},
saved: (val) =>
setState(() => _tovalueSaved = val),
),
),
),
),
],
),
),
),
SizedBox(
height: height * 0.05,
),
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Text(
"Apply Leave Date",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
),
Transform(
transform: Matrix4.translationValues(
delayedAnimation.value * width, 0, 0),
child: Padding(
padding: EdgeInsets.only(
top: 13,
),
child: Container(
// height: height * 0.06,
height: height * 0.25,
width: double.infinity,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(5),
),
child: TextFormField(
//autofocus: true,
minLines: 1,
maxLines: 10,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
suffixIcon: searchFieldController.text.isNotEmpty
? IconButton(
icon: Icon(Icons.clear),
onPressed: () => WidgetsBinding.instance
?.addPostFrameCallback((_) =>
searchFieldController.clear()))
: null,
border: InputBorder.none,
contentPadding: EdgeInsets.all(7),
),
),
),
),
),
SizedBox(
height: height * 0.05,
),
Transform(
transform: Matrix4.translationValues(
muchDelayedAnimation.value * width, 0, 0),
child: Text(
"Attach Document",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
),
Transform(
transform: Matrix4.translationValues(
delayedAnimation.value * width, 0, 0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: () async {},
child: Text(
"Click 📑 to Upload Documents",
style: TextStyle(
color: Color(0xff2876bd),
),
),
),
),
),
SizedBox(
height: 15,
),
Transform(
transform: Matrix4.translationValues(
delayedAnimation.value * width, 0, 0),
child: Bouncing(
onPress: () {},
child: Container(
//height: 20,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Color(0xff2876bd),
),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Request Leave",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
),
),
),
),
SizedBox(
height: 50,
),
Column(
children: [
InkWell(
child: Text(
'LeaveHistory',
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => LeaveHistory(
// leavetype: '',
// description: '',
// status: '',
// requesteddate: '',
// verifieddate: '',
)),
);
},
)
],
),
SizedBox(
height: 50,
)
],
),
),
),
),
);
},
);
}
}
The value type of _applyleavevalueChanged is String and
the value type of val is String?
if val can be null
_applyleavevalueChanged = val ?? ''; // '' is the default value in case val is null
or
if (val != null) {
_applyleavevalueChanged = val!; // ! mark that the val is definitely not null
}
The error you get came from null-safety, the type String? means that it could be either a String, or null, but your variable only accepts a String, and no null.
For this, you can "force" the use of 'non-null' variable by adding a ! at the end of your variable, but be careful when doing this.
_applyleavevalueToValidate = val!
You can learn more about null-safety syntax and principles on the official documentation: https://flutter.dev/docs/null-safety.
https://api.flutter.dev/flutter/material/DropdownButton-class.html.
You can simply set default value like this. For example,
String? a;
String x = a ?? "default value";
How can I get the "00" off my count down when the time is up?
Widget _buildTimer() {
return CircularCountDownTimer(
fillColor: Colors.red,
color: Colors.white,
backgroundColor: null,
duration: _data[_currentIndex].duration,
controller: _controller,
width: MediaQuery.of(context).size.width / 4,
height: MediaQuery.of(context).size.height / 4,
strokeWidth: 10.0,
strokeCap: StrokeCap.round,
textStyle: TextStyle(
fontSize: 33.0, color: Colors.black, fontWeight: FontWeight.bold),
textFormat: CountdownTextFormat.SS,
isReverse: true,
isReverseAnimation: true,
isTimerTextShown: true,
autoStart: true,
);
}
When the time runs out it looks like this
enter image description here
Can anyone in help?
I assume you are using this https://pub.dev/packages/circular_countdown_timer
In that case, you need to have a variable controlling the state of the text visibility. Then you can change this in the onComplete callback.
bool isTimerShown = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: CircularCountDownTimer(
fillColor: Colors.red,
backgroundColor: null,
duration: 3,
controller: CountDownController(),
width: MediaQuery
.of(context)
.size
.width / 4,
height: MediaQuery
.of(context)
.size
.height / 4,
strokeWidth: 10.0,
strokeCap: StrokeCap.round,
textStyle: TextStyle(
fontSize: 33.0,
color: Colors.black,
fontWeight: FontWeight.bold,
),
textFormat: CountdownTextFormat.SS,
isReverse: true,
isReverseAnimation: true,
isTimerTextShown: isTimerShown,
autoStart: true,
ringColor: Colors.white,
onComplete: () =>
setState(() {
isTimerShown = false;
}),
),
);
}
i get this error when i want to show the qrcode generated by this method.
I have to generate this qrcode and then show it on the screen, but I find a compilation error. I come from Swift and it is not clear to me all about how to build a view
Future<Widget> buildQrCode() async {
Map<String,dynamic> myData = {
'type': 1,
'content': name,
'mac' : await Utilities.getDeviceMac(),
};
String encodedJson = jsonEncode(myData);
QrCodeEncrypter.encrypt(password, myData);
return QrImage(
data: encodedJson,
size: 320,
gapless: false,
);
}
here is where I call the method to show the image on the screen:
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
_buttonHeight = size.height * .05;
double splitPoint = size.height / 7;
return FutureBuilder<UserData>(
future: contentManager.getUserData(),
builder: (context, AsyncSnapshot<UserData> snapUserData) {
if (snapUserData.hasError)
return Container(
child: Center(
child: Text("There was some error"),
),
);
if (snapUserData.connectionState != ConnectionState.done)
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
return Stack(
alignment: AlignmentDirectional.center,
children: [
// SFONDO
Positioned(
bottom: 0,
child: Container(
height: size.height,
width: size.width,
color: appColors.primaryColor,
),
),
// TITOLO
Positioned(
top: size.height * .05,
child: Text(
localization.showQR,
style: Theme.of(context).primaryTextTheme.headline5.copyWith(
color: appColors.green,
fontWeight: FontWeight.bold,
),
),
),
buildQrCode(),
Positioned(
bottom: size.height * .18,
width: size.width * .8,
child: AutoSizeText(
localization.home_subLabel,
textAlign: TextAlign.center,
maxLines: 1,
style: Theme.of(context).primaryTextTheme.headline5.copyWith(
color: appColors.green,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
bottom: size.height * .08,
width: size.width * .7,
height: size.height * .05,
child: TextField(
inputFormatters: [
new LengthLimitingTextInputFormatter(11),
],
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0,
//height: 2.0,
color: Colors.black,
),
),
),
],
);
});
}
}
Do it like (Suggesting a simple edit)
///Define A state Variable
bool isQrImgReady = false;
Future<Widget> buildQrCode() async {
Map<String,dynamic> myData = {
'type': 1,
'content': name,
'mac' : await Utilities.getDeviceMac(),
};
String encodedJson = jsonEncode(myData);
QrCodeEncrypter.encrypt(password, myData);
///Change state variable to True when its ready
setState((){
isQrImgReady = true;
});
return QrImage(
data: encodedJson,
size: 320,
gapless: false,
);
Then
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
_buttonHeight = size.height * .05;
double splitPoint = size.height / 7;
return FutureBuilder<UserData>(
future: contentManager.getUserData(),
builder: (context, AsyncSnapshot<UserData> snapUserData) {
if (snapUserData.hasError)
return Container(
child: Center(
child: Text("There was some error"),
),
);
if (snapUserData.connectionState != ConnectionState.done)
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
return Stack(
alignment: AlignmentDirectional.center,
children: [
// SFONDO
Positioned(
bottom: 0,
child: Container(
height: size.height,
width: size.width,
color: appColors.primaryColor,
),
),
// TITOLO
Positioned(
top: size.height * .05,
child: Text(
localization.showQR,
style: Theme.of(context).primaryTextTheme.headline5.copyWith(
color: appColors.green,
fontWeight: FontWeight.bold,
),
),
),
///Check if Widget is ready or not
this.isQrImgReady
? buildQrCode()
: SizedBox(),
Positioned(
bottom: size.height * .18,
width: size.width * .8,
child: AutoSizeText(
localization.home_subLabel,
textAlign: TextAlign.center,
maxLines: 1,
style: Theme.of(context).primaryTextTheme.headline5.copyWith(
color: appColors.green,
fontWeight: FontWeight.bold,
),
),
),
Positioned(
bottom: size.height * .08,
width: size.width * .7,
height: size.height * .05,
child: TextField(
inputFormatters: [
new LengthLimitingTextInputFormatter(11),
],
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18.0,
//height: 2.0,
color: Colors.black,
),
),
),
],
);
});
}
}
The issue here is that you are not calling buildQrCode asynchronously as you are not using the await keyword, and you cannot make the builder function async.
So a proper way to do that is to declare a widget variable in your StatefulWidget that will hold the buildQrCode initially using the initState then put that widget in your stack. As follows :
Widget qrCodeHolder ;
void initState() {
super.initState() ;
setQrCodeHolder();
}
setQrCodeHolder() async {
var tmp = await buildQrCode() ;
setState (() {
qrCodeHolder = tmp ;
});
}
and then in your stack you swap your builQrCode with qrCodeHolder.