cascade_widget 2.1.3 
cascade_widget: ^2.1.3 copied to clipboard
Cascade Widget For Flutter Web
import 'package:cascade_widget/cascade_widget.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Cascade Widget Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Cascade Widget Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final cascadeController = CascadeWidgetController();
final testList = [
DropDownMenuModel(
id: '1',
name: 'Level 1',
children: [
DropDownMenuModel(
id: '11',
name: 'Level 1-1',
children: [
DropDownMenuModel(id: '111', name: 'Level 1-1-1', children: []),
DropDownMenuModel(id: '112', name: 'Level 1-1-2', children: []),
DropDownMenuModel(id: '113', name: 'Level 1-1-3', children: []),
],
),
DropDownMenuModel(
id: '12',
name: 'Level 1-2',
children: [
DropDownMenuModel(id: '121', name: 'Level 1-2-1', children: []),
],
),
],
),
DropDownMenuModel(
id: '2',
name: 'Level 2',
children: [
DropDownMenuModel(
id: '21',
name: 'Level 2-1',
children: [
DropDownMenuModel(id: '211', name: 'Level 2-1-1', children: []),
],
),
DropDownMenuModel(
id: '22',
name: 'Level 2-2',
children: [
DropDownMenuModel(id: '221', name: 'Level 2-2-1', children: []),
],
),
DropDownMenuModel(
id: '23',
name: 'Level 2-3',
children: [
DropDownMenuModel(id: '231', name: 'Level 2-3-1', children: []),
],
),
],
),
DropDownMenuModel(
id: '3',
name: 'Level 3',
children: [
DropDownMenuModel(
id: '31',
name: 'Level 3-1',
children: [
DropDownMenuModel(id: '311', name: 'Level 3-1-1', children: []),
],
),
DropDownMenuModel(
id: '32',
name: 'Level 3-2',
children: [
DropDownMenuModel(id: '321', name: 'Level 3-2-1', children: []),
],
),
DropDownMenuModel(
id: '3-3',
name: 'Level 3-3',
children: [
DropDownMenuModel(id: '331', name: 'Level 3-3-1', children: []),
],
),
],
),
];
final testList1 = [
DropDownMenuModel(
id: '1',
name: 'Level 1',
children: [
DropDownMenuModel(
id: '11',
name: 'Level 1-1',
children: [
DropDownMenuModel(
id: '111', name: 'Level 1/Level 1-1/Level 1-1-1', children: []),
DropDownMenuModel(
id: '112', name: 'Level 1/Level 1-1/Level 1-1-2', children: []),
DropDownMenuModel(
id: '113', name: 'Level 1/Level 1-1/Level 1-1-3', children: []),
],
),
DropDownMenuModel(
id: '12',
name: 'Level 1-2',
children: [
DropDownMenuModel(id: '121', name: 'Level 1-2-1', children: []),
],
),
],
),
DropDownMenuModel(
id: '2',
name: 'Level 2',
children: [
DropDownMenuModel(
id: '21',
name: 'Level 2-1',
children: [
DropDownMenuModel(
id: '211', name: 'Level 2/Level 2-1/Level 2-1-1', children: []),
],
),
DropDownMenuModel(
id: '22',
name: 'Level 2-2',
children: [
DropDownMenuModel(
id: '221',
name:
'This is a very long text to test wrapping in the dropdown Level 2/Level 2-2/Level 2-2-1',
children: []),
],
),
DropDownMenuModel(
id: '23',
name: 'Level 2-3',
children: [
DropDownMenuModel(id: '231', name: 'Level 2-3-1', children: []),
],
),
],
),
DropDownMenuModel(
id: '3',
name: 'Level 3',
children: [
DropDownMenuModel(
id: '31',
name: 'Level 3-1',
children: [
DropDownMenuModel(id: '311', name: 'Level 3-1-1', children: []),
],
),
DropDownMenuModel(
id: '32',
name: 'Level 3-2',
children: [
DropDownMenuModel(id: '321', name: 'Level 3-2-1', children: []),
],
),
DropDownMenuModel(
id: '3-3',
name: 'Level 3-3',
children: [
DropDownMenuModel(id: '331', name: 'Level 3-3-1', children: []),
],
),
],
),
];
final testList2 = [
DropDownMenuModel(
id: '1',
name: 'Level 1',
children: [
DropDownMenuModel(
id: '11',
name: 'Level 1-1',
children: [
DropDownMenuModel(
id: '111', name: 'Level 1/Level 1-1/Level 1-1-1', children: []),
DropDownMenuModel(
id: '112', name: 'Level 1/Level 1-1/Level 1-1-2', children: []),
DropDownMenuModel(
id: '113', name: 'Level 1/Level 1-1/Level 1-1-3', children: []),
],
),
DropDownMenuModel(
id: '12',
name: 'Level 1-2',
children: [
DropDownMenuModel(id: '121', name: 'Level 1-2-1', children: []),
],
),
],
),
DropDownMenuModel(
id: '2',
name: 'Level 2',
children: [
DropDownMenuModel(
id: '21',
name: 'Level 2-1',
children: [
DropDownMenuModel(
id: '211', name: 'Level 2/Level 2-1/Level 2-1-1', children: []),
],
),
DropDownMenuModel(
id: '22',
name: 'Level 2-2',
children: [
DropDownMenuModel(
id: '221',
name:
'This is a very long text to test wrapping in the dropdown Level 2/Level 2-2/Level 2-2-1',
children: []),
],
),
DropDownMenuModel(
id: '23',
name: 'Level 2-3',
children: [
DropDownMenuModel(id: '231', name: 'Level 2-3-1', children: []),
],
),
],
),
DropDownMenuModel(
id: '3',
name: 'Level 3',
children: [
DropDownMenuModel(
id: '31',
name: 'Level 3-1',
children: [
DropDownMenuModel(id: '311', name: 'Level 3-1-1', children: []),
],
),
DropDownMenuModel(
id: '32',
name: 'Level 3-2',
children: [
DropDownMenuModel(id: '321', name: 'Level 3-2-1', children: []),
],
),
DropDownMenuModel(
id: '3-3',
name: 'Level 3-3',
children: [
DropDownMenuModel(id: '331', name: 'Level 3-3-1', children: []),
],
),
],
),
];
final selecteds = ['112', '211'];
final singleList = [
DropDownMenuModel(
id: '1',
name: 'This is a long option to test the display 1',
children: [],
),
DropDownMenuModel(
id: '2',
name: 'Option 2',
children: [],
),
DropDownMenuModel(
id: '3',
name: 'Option 3',
children: [],
),
DropDownMenuModel(
id: '4',
name: 'Option 4',
children: [],
),
DropDownMenuModel(
id: '5',
name: 'Option 5',
children: [],
),
];
final mulList = [
DropDownMenuModel(
id: '1',
name: 'This is a long option to test the display 1',
children: [],
),
DropDownMenuModel(
id: '2',
name: 'Option 2',
children: [],
),
DropDownMenuModel(
id: '3',
name: 'Option 3',
children: [],
),
DropDownMenuModel(
id: '4',
name: 'Option 4',
children: [],
),
DropDownMenuModel(
id: '5',
name: 'Option 5',
children: [],
),
];
@override
Widget build(BuildContext context) {
debugPrint('controller: ${cascadeController.hashCode}');
return Scaffold(
body: KeyboardListener(
focusNode: FocusNode(),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 100,
),
const Text('Cascade (show all selected items):'),
SizedBox(
width: 410,
child: CascadeWidget(
list: testList1,
selectedCallBack: (selectedList) {
debugPrint('selected items:');
for (final e in selectedList) {
debugPrint('name:${e.name}, id:${e.id}');
}
},
fieldDecoration: FieldDecoration(
backgroundColor: Colors.white,
hintText: 'Please select',
hintStyle: const TextStyle(color: Colors.black45),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4),
borderSide: const BorderSide(color: Colors.grey),
),
isRow: true,
),
chipDecoration: ChipDecoration(
backgroundColor: Colors.blueAccent,
runSpacing: 2,
spacing: 10,
labelStyle: const TextStyle(
color: Colors.white,
),
borderRadius: const BorderRadius.all(Radius.circular(4)),
border: Border.all(color: Colors.grey),
deleteIcon: const Icon(Icons.clear_outlined,
color: Colors.white, size: 16),
maxWidth: 100,
),
popupConfig: PopupConfig(
isShowSearchInput: false,
isShowAllSelectedLabel: true,
selectedIds: selecteds,
isShowOverlay: true,
// overlayColor: Colors.tealAccent,
),
),
),
const SizedBox(
height: 50,
),
const Text('Cascade (show first item +n more):'),
SizedBox(
width: 410,
child: CascadeWidget(
list: testList,
controller: cascadeController,
selectedCallBack: (selectedList) {
debugPrint('selected items:');
for (final e in selectedList) {
debugPrint('name:${e.name}, id:${e.id}');
}
},
fieldDecoration: FieldDecoration(
backgroundColor: Colors.white,
hintText: 'Please select',
hintStyle: const TextStyle(color: Colors.black45),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4),
borderSide: const BorderSide(color: Colors.grey),
),
isRow: true,
),
chipDecoration: const ChipDecoration(
backgroundColor: Colors.blueAccent,
runSpacing: 2,
spacing: 10,
labelStyle: TextStyle(
color: Colors.white,
),
borderRadius: BorderRadius.all(Radius.circular(4)),
deleteIcon: Icon(Icons.clear_outlined,
color: Colors.white, size: 16),
),
popupConfig: const PopupConfig(
isShowAllSelectedLabel: false,
isShowSearchInput: false,
// selectedIds: selecteds,
),
),
),
const SizedBox(height: 8),
ElevatedButton(
onPressed: () {
cascadeController.cancelAllSelected();
setState(() {});
},
child: const Text('Unselect All'),
),
const SizedBox(height: 40),
const Text('Cascade Single Select:'),
SizedBox(
width: 410,
child: SingleSelectCascadeWidget(
list: testList2,
selectedCallBack: (selectedList) {
debugPrint('selected items:');
for (final e in selectedList) {
debugPrint('name:${e.name}, id:${e.id}');
}
},
fieldDecoration: FieldDecoration(
backgroundColor: Colors.white,
hintText: 'Please select',
hintStyle: const TextStyle(color: Colors.black45),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4),
borderSide: const BorderSide(color: Colors.grey),
),
isRow: true,
),
chipDecoration: ChipDecoration(
backgroundColor: Colors.blue,
runSpacing: 2,
spacing: 10,
labelStyle: const TextStyle(
color: Colors.white,
),
borderRadius: const BorderRadius.all(Radius.circular(4)),
border: Border.all(color: Colors.grey),
deleteIcon: const Icon(Icons.clear_outlined,
color: Colors.white, size: 16),
maxWidth: 250,
isShowFullPathFromSelectedTag: true,
),
popupConfig: const PopupConfig(
isShowSearchInput: true,
isShowAllSelectedLabel: false,
selectedIds: [],
isShowOverlay: true,
// overlayColor: Colors.tealAccent,
),
),
),
const SizedBox(height: 40),
const Text('Single Select:'),
SizedBox(
width: 410,
height: 30,
child: MultipleSelectWidget(
list: singleList,
selectedCallBack: (selectedList) {
for (final e in selectedList) {
debugPrint('name:${e.name}, id:${e.id}');
}
},
fieldDecoration: FieldDecoration(
backgroundColor: Colors.white,
hintText: 'Single select',
hintStyle: const TextStyle(
color: Colors.black45,
fontSize: 12,
),
padding: const EdgeInsets.symmetric(horizontal: 12),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4),
borderSide: const BorderSide(color: Colors.grey),
),
showClearIcon: false,
clearIcon: const Icon(
Icons.clear,
size: 14,
),
style: const TextStyle(
fontSize: 14,
),
),
chipDecoration: const ChipDecoration(
backgroundColor: Colors.black12,
padding: EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
runSpacing: 0,
spacing: 5,
labelStyle: TextStyle(
color: Colors.black87,
fontSize: 12,
),
borderRadius: BorderRadius.all(Radius.circular(4)),
maxWidth: 100,
deleteIcon: Icon(
Icons.clear_outlined,
color: Colors.black54,
size: 15,
),
),
popupConfig: const PopupConfig(
isShowFullPathFromSearch: false,
popupHeight: 300,
isSingleChoice: true,
selectedIds: ['1'],
isShowOverlay: true,
// overlayColor: Colors.tealAccent,
),
),
),
const SizedBox(height: 40),
const Text('Multiple Select:'),
SizedBox(
width: 410,
height: 30,
child: MultipleSelectWidget(
list: mulList,
selectedCallBack: (selectedList) {
for (final e in selectedList) {
debugPrint('name:${e.name}, id:${e.id}');
}
},
fieldDecoration: FieldDecoration(
hintText: 'Multiple select',
hintStyle: const TextStyle(
color: Colors.black45,
fontSize: 12,
),
backgroundColor: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 12),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(4),
borderSide: const BorderSide(color: Colors.grey),
),
showClearIcon: false,
clearIcon: const Icon(
Icons.clear,
size: 14,
),
style: const TextStyle(
fontSize: 14,
),
),
chipDecoration: const ChipDecoration(
backgroundColor: Colors.black12,
padding: EdgeInsets.symmetric(
horizontal: 6,
vertical: 2,
),
runSpacing: 0,
spacing: 5,
labelStyle: TextStyle(
color: Colors.black87,
fontSize: 12,
),
borderRadius: BorderRadius.all(Radius.circular(4)),
maxWidth: 100,
deleteIcon: Icon(
Icons.clear_outlined,
color: Colors.black54,
size: 15,
),
),
popupConfig: const PopupConfig(
isShowFullPathFromSearch: false,
popupHeight: 300,
isSingleChoice: false,
selectedIds: [],
isShowOverlay: true,
disabled: true,
// disabledColor: Colors.grey.withValues(alpha: 0.4)
// overlayColor: Colors.tealAccent,
),
),
),
const SizedBox(height: 20),
],
),
),
),
);
}
}Metadata
5
likes
125
points
276
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
Cascade Widget For Flutter Web
Repository (GitHub)
View/report issues
Documentation
License
unknown (license)
