Related
There is two files that have similar code, it is add and update area feature, that I decide to make it only one, with using condition.
You can see that two features have similar widgets, only different in texts.
Add Area Feature
Update Area Feature
In my case, when user want to adding area, the UI will display add area feature. When user want to updating area, the UI will display update area feature, but it only from one codebase.
Is it possible to make that kind of condition?
Here I copy paste the whole codes of add area feature. I don't have to copy paste update area because it has the similar codes.
class AddAreaItem extends StatefulWidget {
const AddAreaItem({super.key, this.isUpdate = false});
final bool isUpdate;
#override
State<AddAreaItem> createState() => _AddAreaItemState();
}
class _AddAreaItemState extends State<AddAreaItem> {
//--------- selectedCategory_1 variable
String selectedCategoryArea = '';
#override
Widget build(BuildContext context) {
return Container(
height: 366,
width: 514,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
SizedBox(
height: 25,
),
SizedBox(
width: 434,
height: 42,
child: Wrap(
alignment: WrapAlignment.spaceBetween,
children: [
Text(
widget.isUpdate ? 'Add Area' : 'Update Area',
style: heading2(
color: ColorName.blackPrimary,
),
),
Padding(
padding: const EdgeInsets.only(top: 10),
child: InkWell(
child: SvgPicture.asset(
Assets.icons.closeIcon.path,
width: 16,
height: 16,
),
onTap: () => {
Navigator.pop(context),
},
),
)
],
),
),
//----------- TextField Code Area dan Category
SizedBox(
width: 435,
child: Wrap(
alignment: WrapAlignment.spaceAround,
children: [
Wrap(
direction: Axis.vertical,
children: [
Text(
'Area Code',
style: body1(
color: ColorName.blackPrimary,
),
),
SizedBox(
height: 10,
),
SizedBox(
width: 126,
height: 60,
child: TextField(
style: body1(color: ColorName.blackPrimary),
cursorColor: ColorName.blackPrimary,
decoration: InputDecoration(
hintText: 'Area Code',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
borderSide: BorderSide(
color: ColorName.grey,
),
),
),
),
),
],
),
Wrap(
direction: Axis.vertical,
children: [
Text(
'Category Area',
style: body1(
color: ColorName.blackPrimary,
),
),
const SizedBox(
height: 10,
),
Container(
width: 288,
height: 56,
decoration: ShapeDecoration(
shape: RoundedRectangleBorder(
side: BorderSide(
style: BorderStyle.solid, color: ColorName.grey),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
),
child: DropdownButton<String>(
icon: Padding(
padding: const EdgeInsets.only(right: 10, top: 8),
child: SvgPicture.asset(
Assets.icons.dropdownIcon.path,
fit: BoxFit.scaleDown,
),
),
style: body1(color: ColorName.blackPrimary),
items: <String>[
'Block',
'Fining Line',
].map((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
hint: Padding(
padding: const EdgeInsets.only(top: 8, left: 10),
child: Text(
style: body1(color: ColorName.grey),
selectedCategoryArea.isEmpty
? 'Category Area'
: selectedCategoryArea),
),
borderRadius: BorderRadius.circular(10),
underline: const SizedBox(),
isExpanded: true,
onChanged: (value) {
if (value != null) {
setState(() {
selectedCategoryArea = value;
});
}
},
),
),
],
),
],
),
),
//----------- Tombol Add Area dan Cancel
SizedBox(
width: 425,
child: Wrap(
alignment: WrapAlignment.spaceBetween,
children: [
SizedBox(
width: 183,
height: 60,
child: OutlinedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
side: MaterialStateProperty.all(
const BorderSide(
color: ColorName.darkBlue,
),
),
),
child: Text(
'Cancel',
style: subtitle1(
color: ColorName.darkBlue,
),
),
onPressed: () {
Navigator.pop(context);
},
),
),
//------------- Tombol add area
SizedBox(
width: 183,
height: 60,
child: OutlinedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
ColorName.darkBlue,
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
side: MaterialStateProperty.all(
const BorderSide(
color: ColorName.darkBlue,
),
),
),
child: Text(
widget.isUpdate ? 'Add Area' : 'Update Area',
style: subtitle1(
color: ColorName.white,
),
),
onPressed: () {
if (widget.isUpdate) {
AddAreaSuccess().showCustomDialog(context);
} else {
UpdateAreaSuccess().showCustomDialog(context);
}
},
),
),
],
),
),
const SizedBox(
height: 25,
),
],
),
);
}
}
Firstly you need to define from where you know that the screen is updating screen or adding screen. I mean like
class AddAreaItem extends StatefulWidget {
final bool isUpdate;
const AddAreaItem({super.key, this.isUpdate=false});//IT MEANS THAT isUpdate is FALSE by default, but you can define it while creating AddAreaItem
...
}
Then in your widgets you can do like this:
Text(
widget.isUpdate?'Update Area':'Add Area',
//if it is inside Stateless widget then you use isUpdate? instead of widget.isUpdate
style: subtitle1(
color: ColorName.white,
),
),
Inside functions like onPressed you can just use like this:
onPressed: (){
if(widget.isUpdating){
AddAreaSuccess().showCustomDialog(context);
}else{...}
}
You can pass those two values in the properties when rendering this widget. Then check if the properties are null then you are trying to add new data. But if those contains the value then its updating the data.
Something like this
class AreaWidget extends StatefulWidget {
const AreaWidget({super.key, this.areaCode, this.areaName});
final int? areaCode;
final String? areaName;
#override
State<AreaWidget> createState() => _AreaWidgetState();
}
class _AreaWidgetState extends State<AreaWidget> {
#override
Widget build(BuildContext context) {
return Container(
child: Text(widget.areaCode == null ? "Add Area" : "Upate Area"),
);
}
}
You can then check value and make the changes according to the value. Even inside the function as well to call the specific add or update related code.
I have a list of items with buttons. By clicking on one element on the button, I get a CircularProgressIndicator. I ran into a problem that when I click on one card per button, I get a loading indicator on all cards. How can I make the loading indicator appear on only one card that I click on?
bool isApprovedLoading = false;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: Padding(
padding: const EdgeInsets.only(top: 10, bottom: 18),
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: list.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(bottom: 16),
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 7.0, sigmaY: 7.0),
child: Container(
height: 152,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
color:
constants.Colors.greyXDark.withOpacity(0.8),
),
child: Row(
children: [
Expanded(
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
isApprovedLoading
? const CircularProgressIndicator(
color: constants
.Colors.purpleMain)
: OrderButton(
text: 'Approved',
svgIcon:
SvgPicture.asset(
constants.Assets
.enable,
color: constants
.Colors
.purpleMain),
textStyle: const TextStyle(
fontFamily: constants
.FontFamily
.AvenirLtStd,
fontSize: 12,
fontWeight:
FontWeight.w800,
color: constants
.Colors
.purpleMain),
borderColor: constants
.Colors.purpleMain,
buttonColor: constants
.Colors.greyXDark
.withOpacity(0.5),
onTap: () {
setState(() {
isApprovedLoading =
true;
});
_confirmOrder(
context,
list[index].id,
poyntBookingsCubit,
user,
);
},
),
],
),
),
],
),
),
),
),
],
),
),
),
),
);
},
)
),
),
);
you need define new variable like:
int selectedItem = -1;
and change your asdasd to this:
onTap: () {
setState(() {
isApprovedLoading = true;
selectedItem = index;
});
_confirmOrder(
context,
list[index].id,
poyntBookingsCubit,
user,
);
},
then use it like this:
isApprovedLoading && selectedItem == index
? const CircularProgressIndicator(
color: constants.Colors.purpleMain)
: OrderButton(...),
I’m trying to recreate an animation from dribbble (link: https://dribbble.com/shots/16587569-Planner-App) on the app I’m working on.
What I currently have is just a listview builder and a DayView calendar from (calendar pubspec link) switching on whether the calendar is month view or weekly view (I am using Table Calendar for this).
Here is a snippet of the code:
calendarFormat == CalendarFormat.week ?
Container(
alignment: Alignment.topCenter,
child: DayView(
key: calendarKey,
controller: eventController,
dayTitleBuilder: (thisDay){
return Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.only(left: 10,bottom: 10),
child: Text(
"Upcoming Events",
style: TextStyle(
color: kGrey,
fontSize: 14,
fontWeight: FontWeight.w600
),
),
);
},
eventTileBuilder: (date, events, boundry, start, end) {
// CalendarEventData eventData = events[0];
return Padding(
padding: const EdgeInsets.only(left: 10),
child: Container(
width: width,
padding: const EdgeInsets.all(10),
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: kOrange,
borderRadius: const BorderRadius.horizontal(left: Radius.circular(20)),
),
child: const Text(
"Data",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600
),
),
),
);
},
width: width,
timeLineWidth: 60,
backgroundColor: Colors.white,
showVerticalLine: false,
showLiveTimeLineInAllDays: true,
minDay: DateTime(2022,01,01),
maxDay: DateTime(2022,12,30),
initialDay: _focusedDay,
heightPerMinute: 1.0,
eventArranger: const SideEventArranger(),
onEventTap: (events, date) => print(events),
onDateLongPress: (date) => print(date),
onPageChange: (date,_)=> {
_onDaySelected(date, _focusedDay)
},
)
) :
ValueListenableBuilder<List<BolaEventData>>(
valueListenable: _selectedBolaEvents,
builder: (context, value, _) {
return Listview.builder(
itemCount: dayEvent.length,
return Container(
width: width*.1, child: Text("Data")
);
)
}
)
What I have : https://i.stack.imgur.com/jC8hX.gif
What I want : https://i.stack.imgur.com/CHEcy.gif
How can I achieve this ?
I have dropdown menu with main category also subcategory.in my Worker registration i am calling this dropdown with API,so if i open worker registration page i need to select Worker as default also change the subcategory dropdown based on the default value in this case worker,in main category there is only 4 items returns
1:Worker
2:Shop
3.rental equipment
4.contractor
These are the 4 main category items.so when i open worker registration page i need worker as default in dropdown.the problem is if i initialize the value as default the subcategory drop down doesn't work
Flexible(
flex: 0,
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10, top: 15),
child: Container(
width: double.infinity,
height: 45,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.blueGrey)),
child: DropdownButton(
isExpanded: true,
itemHeight: 50,
icon: Icon(Icons.arrow_drop_down),
iconSize: 40,
underline: SizedBox(),
hint: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Category",
style: TextStyle(fontSize: 15, color: Colors.black54),
),
),
value: _selectedmenu,
onChanged: (NewValues) {
_selectedmenu = NewValues;
setState(() {});
},
items: home_model.map((menu) {
return DropdownMenuItem(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: language != "ml"
? Text(menu.english)
: Text(menu.malayalam),
),
value: menu.id,
);
}).toList(),
),
),
),
),
Set the onChanged of the DropDownButton to:
onChanged: (value) {
setState(() {
_selectedmenu = value;
});
},
And initialize _selectedmenu with the id of the Worker item, e.g.
var _selectedmenu = 'worker';
Initialized the _selectedmenu with default worker id and removed the onchanged and DropdownMenuItem and added to Text with worker with condition because i have this localization integrated into it.By passing initialized _selectedmenu to the subcategory api and called the api in setState in the main class
String _selectedmenu = "5ef1b61930def32b3cbe7890";
Flexible(
flex: 0,
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10, top: 15),
child: Container(
width: double.infinity,
height: 45,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.blueGrey)),
child: DropdownButton(
isExpanded: true,
itemHeight: 50,
icon: Icon(Icons.arrow_drop_down),
iconSize: 40,
underline: SizedBox(),
hint: Padding(
padding: const EdgeInsets.all(8.0),
child: language != "ml"
? Text(
"Worker",
style:
TextStyle(fontSize: 15, color: Colors.black),
)
: Text(
"ജോലിക്കാർ",
style:
TextStyle(fontSize: 15, color: Colors.black),
),
),
value: _selectedmenu,
),
),
),
),
I am trying to build my own drop down button with separated and condensed menu items, like the image below:
here's the code I have tried so far, I got the drop down width to match the container but the items can't be customized so far and always the height starts from above the button and is not occupying the width of the container:
body: Container(
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
border: Border.all(color: Colors.brown, width: 1.0)),
padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
isExpanded: true,
isDense: true,
value: selection,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.brown,
),
iconSize: 40,
underline: Container(
height: 1,
color: Colors.transparent,
),
onChanged: (String val) => setState(() => selection = val),
items: settingsOptions.map((option) {
return DropdownMenuItem(
value: option,
child: Text(option),
);
}).toList(),
),
),
)
),
),
This is the output from the code:
How do I customize the items width, height and add dividers like in the first image? Thanks
This is an example modify as you like !
DropdownButton(
isExpanded: true,
isDense: true,
value: selection,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.brown,
),
iconSize: 40,
underline: Container(
height: 1,
color: Colors.transparent,
),
onChanged: (String val) => setState(() => selection = val),
items: sampleList.map((option) {
return DropdownMenuItem(
value: option,
child: Container(
width:double.infinity,
alignment:Alignment.centerLeft,
padding: const EdgeInsets.fromLTRB(0,8.0,0,6.0),
child:Text(option),
decoration:BoxDecoration(
border:Border(top:BorderSide(color:Colors.grey,width:1))
)
),
);
}).toList(),
selectedItemBuilder:(con){
return sampleList.map((m){
return Text(m,);
}).toList();
}
)
I came across a flutter Library called dropdown_below in pub.dev. It has additional methods that can allow you customize dropdownMenuItem to your preferred layout.
DropdownBelow(
value: category,
// isDense: true,
itemWidth: MediaQuery.of(context).size.width * 0.92,
itemTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.black),
boxTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.grey.shade600),
boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
boxWidth: MediaQuery.of(context).size.width,
boxHeight: 60,
hint: Text('choose video'),
items: video.data.value.videos
.map((e) => DropdownMenuItem(
onTap: () => e.title,
value: e.title ?? category,
child: Container(
width: double.infinity,
decoration: BoxDecoration(),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
e.title ?? '$category',
overflow: TextOverflow.ellipsis,
),
),
),
))
.toList(),
onChanged: (video) {
context.read(videoProvider).cateroryOnChange(video);
},
),
Library Link: https://pub.dev/packages/dropdown_below
The problem with the DropdownButton is that the menu will open randomly based on the selected index and other things. Also, You can't edit its code by just trying to pass offset as the logic code of the paint work based on that and trying to hardcode the selectedItemOffset to a value won't work perfectly fine.
So use DropDownButton2 , which is built just over this .
Package: DropDownButton2
Credits: Ahmed Elsayed
For reference: Refer this link