'The following assertion was thrown during performLayout(), AnimatedContainer, ListView
I am making a custom drawer using Animated Container. When I click on the Cheatsheet/References and then go to the content and click Cheatsheet/References again it is supposed to shrink and hide the content and show only two icons below each other. One is the back arrow and one is the reference icon. But when I do this I am getting a performLayout error.
The following assertion was thrown during performLayout():
class ReferenceDrawer extends StatefulWidget {
final Map drawerControllerMapping;
final Function(bool) function;
const ReferenceDrawer(
{Key? key, required this.drawerControllerMapping, required this.function})
: super(key: key);
@override
State<ReferenceDrawer> createState() => _ReferenceDrawerState();
}
class _ReferenceDrawerState extends State<ReferenceDrawer> {
late FocusNode _searchBarFocusNode;
late TextEditingController _searchBarController;
@override
void initState() {
_searchBarController = TextEditingController();
_searchBarFocusNode = FocusNode();
super.initState();
}
@override
void dispose() {
_searchBarController.dispose();
_searchBarFocusNode.dispose();
super.dispose();
}
bool expanded = true;
bool show = true;
final Map data = {
'Character Classes': [
Pair('character set', '[ABC]'),
Pair('negated set', '[^ABC]'),
Pair('range', '[A-Z]'),
Pair('dor', '.'),
Pair('match any', r'[\s\S]'),
Pair('word', r'\w'),
Pair('not word', r'\W'),
Pair('digit', r'\d'),
Pair('not digit', r'\D'),
Pair('whitespace', r'\s'),
Pair('not whitespace', r'\S'),
Pair('unicode category', r'\p{L}'),
Pair('not unicode category', r'\P{L}'),
Pair('unicode script', r'\p{Han}'),
Pair('not unicode script', r'\P{Han}'),
],
'Anchors': [
Pair('beginning', r'^'),
Pair('end', r'$'),
Pair('word boundary', r'\b'),
Pair('not word boundary', r'\B'),
],
'Escaped characters': [
Pair('reserved characters', r'\+'),
Pair('octal escape', r'\000'),
Pair('hexadecimal escape', r'\xFF'),
Pair('unicode escape', r'\uFFFF'),
Pair('extended unicode escape', r'\u{FFFF}'),
Pair('control character escape', r'\cT'),
Pair('tab', r'\t'),
Pair('line feed', r'\n'),
Pair('vertical tab', r'\v'),
Pair('form feed', r'\f'),
Pair('carriage return', r'\r'),
Pair('null', r'\0'),
],
'Groups and References': [
Pair('capturing group', r'(ABC)'),
Pair('named capturing group', r'(?<name>ABC)'),
Pair('numeric reference', r'\1'),
Pair('non-capturing group', r'(?:ABC)'),
],
'Lookaround': [
Pair('positive lookahead', r'(?=ABC)'),
Pair('negative lookahead', r'(?!ABC)'),
Pair('positive lookbehind', r'(?<=ABC)'),
Pair('negative lookbehind', r'(?<!ABC)'),
],
'Quantifiers and Alterations': [
Pair('plus', '+'),
Pair('star', '*'),
Pair('quantifier', '{1,3}'),
Pair('optional', '?'),
Pair('lazy', '?'),
Pair('alternation', '|'),
],
'Substitution': [
Pair('match', r'$&'),
Pair('capture group', r'$1'),
Pair('before match', r'$`'),
Pair('after match', '\$\''),
Pair(r'escaped $', r'$$'),
Pair('escaped characters', '\n'),
],
'Flags': [
Pair('ignore case', r'i'),
Pair('global search', r'g'),
Pair('multiline', r'm'),
Pair('unicode', 'u'),
Pair(r'sticky', r'y'),
Pair('dotall', 's'),
],
};
@override
Widget build(BuildContext context) {
final _screenSize = MediaQuery.of(context).size;
final _screenHeight = _screenSize.height;
const _drawerColor = Color(0xFFD6FFF4);
void drawerScale() {
setState(() {
show = !show;
expanded = !expanded;
});
}
return AnimatedContainer(
key: const Key('2'),
duration: const Duration(milliseconds: 250),
curve: Curves.easeOutExpo,
height: _screenHeight - 50,
width: expanded ? 450 : 65,
decoration: const BoxDecoration(color: _drawerColor),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
expanded
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {
setState(() {
widget.function(false);
});
},
icon: const Icon(Icons.arrow_back_ios_new),
),
InkWell(
onTap: () {
setState(() {
drawerScale();
});
},
child: Row(
children: const [
Icon(
Icons.auto_stories_outlined,
size: 30,
),
SizedBox(width: 100, child: Text('References')),
],
),
),
],
)
: Column(
children: [
IconButton(
onPressed: () {
setState(() {
widget.function(false);
});
},
icon: const Icon(Icons.arrow_back_ios_new),
),
IconButton(
icon: const Icon(
Icons.auto_stories_outlined,
size: 30,
),
onPressed: () {
setState(() {
drawerScale();
});
},
),
],
),
const SizedBox(
height: 10,
),
show
? Container(
height: 70,
padding: const EdgeInsets.only(bottom: 15),
decoration: const BoxDecoration(
color: Color.fromARGB(255, 214, 255, 241),
),
child: Card(
child: ListTile(
trailing: IconButton(
padding: const EdgeInsets.only(top: 15),
icon: const Icon(Icons.search_rounded),
onPressed: () {
_searchBarFocusNode.requestFocus();
},
),
title: TextField(
controller: _searchBarController,
focusNode: _searchBarFocusNode,
decoration: const InputDecoration(
contentPadding:
EdgeInsets.only(left: 15, top: 15),
hintText: 'Search',
),
),
),
),
)
: const SizedBox.shrink(),
show
? Container(
width: 450,
height: 300,
decoration: const BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.black,
spreadRadius: -12.0,
blurRadius: 1.0,
),
], color: Color.fromARGB(255, 148, 215, 193)),
child: Scrollbar(
child: SingleChildScrollView(
child: ListView.builder(
shrinkWrap: true,
itemCount: data.keys.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text('${data.keys.elementAt(index)}'),
trailing: const Icon(
Icons.keyboard_arrow_right_rounded),
),
);
},
)),
),
)
: const SizedBox.shrink(),
show
? const SizedBox(
height: 300,
child: Padding(
padding: EdgeInsets.all(20.0),
child: Text(
'''Information on all of the tokens available to create regular expressions.
Double-click an item in the list to insert it into your Expression.
Click the arrow beside an example to load it.''',
style: TextStyle(fontSize: 20, color: Colors.black87),
),
),
)
: const SizedBox.shrink()
]),
),
);
}
}
class CheatsheetDrawer extends StatefulWidget {
final Map drawerControllerMapping;
final Function(bool) function;
const CheatsheetDrawer(
{Key? key, required this.drawerControllerMapping, required this.function})
: super(key: key);
@override
State<CheatsheetDrawer> createState() => _CheatsheetDrawerState();
}
class _CheatsheetDrawerState extends State<CheatsheetDrawer> {
bool expanded = true;
bool show = true;
@override
Widget build(BuildContext context) {
final _screenSize = MediaQuery.of(context).size;
final _screenHeight = _screenSize.height;
const _drawerColor = Color(0xFFD6FFF4);
void drawerScale() {
setState(() {
show = !show;
expanded = !expanded;
});
}
return AnimatedContainer(
key: const Key('2'),
duration: const Duration(milliseconds: 250),
curve: Curves.easeOutExpo,
height: _screenHeight - 50,
width: expanded ? 450 : 65,
decoration: const BoxDecoration(color: _drawerColor),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
expanded
? Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {
setState(() {
widget.function(false);
});
},
icon: const Icon(Icons.arrow_back_ios_new),
),
InkWell(
onTap: () {
setState(() {
drawerScale();
});
},
child: Row(
children: const [
Icon(
Icons.view_column_outlined,
size: 30,
),
SizedBox(width: 100, child: Text('Cheatsheet')),
],
),
),
],
)
: Column(
children: [
IconButton(
onPressed: () {
setState(() {
widget.function(false);
});
},
icon: const Icon(Icons.arrow_back_ios_new),
),
IconButton(
icon: const Icon(
Icons.view_column_outlined,
size: 30,
),
onPressed: () {
setState(() {
drawerScale();
});
},
),
],
),
const SizedBox(
height: 20,
),
show
? InkWell(
onTap: () => print('Character Classes'),
child: Container(
child: const Text('Character Classes'),
color: Colors.indigo,
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 20),
width: 450,
))
: const InkWell(),
show
? Flexible(
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
// ListTile(title: Container(child: const Text('Character Classes'), color: Colors.indigo, padding: const EdgeInsets.only(top: 10, bottom: 10),), tileColor: Colors.indigo,),
Card(
elevation: 0,
color: _drawerColor,
child: ListTile(
title: Table(
defaultVerticalAlignment:
TableCellVerticalAlignment.middle,
columnWidths: const <int, TableColumnWidth>{
0: FixedColumnWidth(5),
1: FixedColumnWidth(100),
},
children: const [
TableRow(decoration: BoxDecoration(), children: [
Text(
'.',
style: TextStyle(fontSize: 20),
),
Text('Any Character except newline'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'\w \d \s'),
Text('word, digit, whitespace'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'\W \D \S'),
Text('NOT word, digit, whitespace'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text('[abc]'),
Text(
'any of a, b, or c',
),
]),
TableRow(decoration: BoxDecoration(), children: [
Text('[^abc]'),
Text('not a, b, or c'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text('[a-g]'),
Text('character between a & g'),
]),
],
),
),
),
InkWell(
onTap: () => print('Anchors'),
child: Container(
child: const Text('Anchors'),
color: Colors.indigo,
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 20),
width: 450,
)),
Card(
elevation: 0,
color: _drawerColor,
child: ListTile(
title: Table(
defaultVerticalAlignment:
TableCellVerticalAlignment.middle,
columnWidths: const <int, TableColumnWidth>{
0: FixedColumnWidth(5),
1: FixedColumnWidth(100),
},
children: const [
TableRow(decoration: BoxDecoration(), children: [
Text(r'^ , $'),
Text('Start / End of the string'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'\b \B'),
Text('word, not-word boundary'),
]),
],
),
),
),
InkWell(
onTap: () => print('Escaped Characters'),
child: Container(
child: const Text('Escaped Characters'),
color: Colors.indigo,
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 20),
width: 450,
)),
Card(
elevation: 0,
color: _drawerColor,
child: ListTile(
title: Table(
defaultVerticalAlignment:
TableCellVerticalAlignment.middle,
columnWidths: const <int, TableColumnWidth>{
0: FixedColumnWidth(5),
1: FixedColumnWidth(100),
},
children: const [
TableRow(decoration: BoxDecoration(), children: [
Text(r'\. \* \\'),
Text('escaped special characters'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'\t \n \r'),
Text('tab, linefeed, carriage return'),
]),
],
),
),
),
InkWell(
onTap: () => print('Groups and LookAround'),
child: Container(
child: const Text('Groups and LookAround'),
color: Colors.indigo,
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 20),
width: 450,
)),
Card(
elevation: 0,
color: _drawerColor,
child: ListTile(
title: Table(
defaultVerticalAlignment:
TableCellVerticalAlignment.middle,
columnWidths: const <int, TableColumnWidth>{
0: FixedColumnWidth(5),
1: FixedColumnWidth(100),
},
children: const [
TableRow(decoration: BoxDecoration(), children: [
Text('(abc)'),
Text('capture group'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'\1'),
Text('back-reference to group #1'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'(?:abc)'),
Text('non-capturing group'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text('(?=abc)'),
Text(
'positive lookahead',
),
]),
TableRow(decoration: BoxDecoration(), children: [
Text('(?!abc)'),
Text('negative lookahead'),
]),
],
),
),
),
InkWell(
onTap: () =>
print('Tapped Quantifiers and Alterations'),
child: Container(
child: const Text('Quantifiers and ALterations'),
color: Colors.indigo,
padding: const EdgeInsets.only(
top: 10, bottom: 10, left: 20),
width: 450,
)),
Card(
elevation: 0,
color: _drawerColor,
child: ListTile(
title: Table(
defaultVerticalAlignment:
TableCellVerticalAlignment.middle,
columnWidths: const <int, TableColumnWidth>{
0: FixedColumnWidth(5),
1: FixedColumnWidth(100),
},
children: const [
TableRow(decoration: BoxDecoration(), children: [
Text('a* a+ a?'),
Text('0 or more, 1 or more, 0 or 1'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'a{5} a{2,}'),
Text('exactly five, two or more'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text(r'a{1,3}'),
Text('between one & three'),
]),
TableRow(decoration: BoxDecoration(), children: [
Text('a+? a{2,}?'),
Text(
'match as few as possible',
),
]),
TableRow(decoration: BoxDecoration(), children: [
Text('ab|cd'),
Text('match ab or cd'),
]),
],
),
),
),
],
),
)
: ListView(),
]),
),
);
}
}
P.S Ignore the Pair class. it's just a small thing I am using instead of a dictionary.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|