I have the following alert dialog. As you can see, it has two tabs.
I wish to remove the SizedBox
and let it dynamically size according to content.
Unfortunately, I always hit an intristic rendering error.
How can I implement it correctly? NestedScrollView
and other alternatives that I have attempted caused the same error.
AlertDialog(
title: Row(children: [
const Text('Group'),
const Spacer(),
IconButton(
icon: Icon(Icons.person),
onPressed: () {
setState(() {
groupTab = false;
});
},
)
]),
content: SingleChildScrollView(
child: Column(children: [
TabBar(
controller: _tabController,
tabs: [
Tab(text: 'Join'),
Tab(text: 'Create'),
],
onTap: (_) => setState(() {}),
),
SizedBox(
height: 300,
width: 300,
child: TabBarView(
controller: _tabController,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
TextField(
decoration: const InputDecoration(
labelText: 'Group ID',
),
),
ElevatedButton(
onPressed: () {
// Join group
},
child: const Text('Join'),
),
],
),
Column(
children: [
TextField(
decoration: const InputDecoration(
labelText: 'Group Name',
),
),
ElevatedButton(
onPressed: () {
// Create group
},
child: const Text('Create'),
),
],
),
],
),
)
])),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('Cancel'),
),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: _tabController.index == 0
? const Text('Join')
: const Text('Create'),
),
],
);