mirror of
https://github.com/SyncrowIOT/web.git
synced 2025-07-09 22:57:21 +00:00
163 lines
6.5 KiB
Dart
163 lines
6.5 KiB
Dart
import 'package:dropdown_button2/dropdown_button2.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_bloc.dart';
|
|
import 'package:syncrow_web/pages/space_tree/bloc/space_tree_state.dart';
|
|
import 'package:syncrow_web/utils/color_manager.dart';
|
|
|
|
class CommunityDropdown extends StatelessWidget {
|
|
final String? selectedValue;
|
|
final Function(String?) onChanged;
|
|
final TextEditingController _searchController = TextEditingController();
|
|
|
|
CommunityDropdown({
|
|
Key? key,
|
|
required this.selectedValue,
|
|
required this.onChanged,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.all(10.0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"Community",
|
|
style: Theme.of(context).textTheme.bodyMedium!.copyWith(
|
|
fontWeight: FontWeight.w400,
|
|
fontSize: 13,
|
|
color: ColorsManager.blackColor,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
BlocBuilder<SpaceTreeBloc, SpaceTreeState>(
|
|
builder: (context, state) {
|
|
return SizedBox(
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: DropdownButton2<String>(
|
|
underline: SizedBox(),
|
|
value: selectedValue,
|
|
items: state.communityList.map((community) {
|
|
return DropdownMenuItem<String>(
|
|
value: community.uuid,
|
|
child: Text(
|
|
' ${community.name}',
|
|
overflow: TextOverflow.ellipsis,
|
|
maxLines: 1,
|
|
),
|
|
);
|
|
}).toList(),
|
|
onChanged: onChanged,
|
|
style: TextStyle(color: Colors.black),
|
|
hint: Padding(
|
|
padding: EdgeInsets.only(left: 10),
|
|
child: Text(
|
|
" Please Select",
|
|
style: Theme.of(context).textTheme.bodySmall!.copyWith(
|
|
color: ColorsManager.textGray,
|
|
),
|
|
),
|
|
),
|
|
customButton: Container(
|
|
height: 45,
|
|
decoration: BoxDecoration(
|
|
border:
|
|
Border.all(color: ColorsManager.textGray, width: 1.0),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
flex: 5,
|
|
child: Text(
|
|
selectedValue != null
|
|
? " ${state.communityList.firstWhere((element) => element.uuid == selectedValue).name}"
|
|
: ' Please Select',
|
|
style:
|
|
Theme.of(context).textTheme.bodySmall!.copyWith(
|
|
color: selectedValue != null
|
|
? Colors.black
|
|
: ColorsManager.textGray,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[100],
|
|
borderRadius: const BorderRadius.only(
|
|
topRight: Radius.circular(10),
|
|
bottomRight: Radius.circular(10),
|
|
),
|
|
),
|
|
height: 45,
|
|
child: const Icon(
|
|
Icons.keyboard_arrow_down,
|
|
color: ColorsManager.textGray,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
dropdownStyleData: DropdownStyleData(
|
|
maxHeight: MediaQuery.of(context).size.height * 0.4,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
),
|
|
dropdownSearchData: DropdownSearchData(
|
|
searchController: _searchController,
|
|
searchInnerWidgetHeight: 50,
|
|
searchInnerWidget: Container(
|
|
height: 50,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 8, vertical: 4),
|
|
child: TextFormField(
|
|
style: const TextStyle(color: Colors.black),
|
|
controller: _searchController,
|
|
decoration: InputDecoration(
|
|
isDense: true,
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
vertical: 12,
|
|
),
|
|
hintText: 'Search for community...',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
searchMatchFn: (item, searchValue) {
|
|
final communityName =
|
|
(item.child as Text).data?.toLowerCase() ?? '';
|
|
return communityName
|
|
.contains(searchValue.toLowerCase().trim());
|
|
},
|
|
),
|
|
onMenuStateChange: (isOpen) {
|
|
if (!isOpen) {
|
|
_searchController.clear();
|
|
}
|
|
},
|
|
menuItemStyleData: const MenuItemStyleData(
|
|
height: 40,
|
|
),
|
|
),
|
|
));
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|