`SliverGrid` throws Exception after all children are removed from list - flutter

I'm dynamically removing children from a SliverGrid.count but when all children are removed the SliverGrid throws the Exception SliverGeometry is not valid: The "scrollExtent" is negative.
I think this error happens because when the list of children is empty the Grid has no children to render anymore and can't render itself. When I also just place a Container (which isn't removable) at the top of my dynamic list of children the error doesn't happen but the rest of my children get pushed down becuase of the AxisSpacing.
Is there another way to fix this issue than just placing a static `Container at the top or bottom of the children?
This is the code from my SliverGrid and the layout is also shown in an image below:
SliverGrid.count(
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
crossAxisCount: segmentedControlGroupValue,
children: <Widget>[
for (var i = 0;
i < sessionState.patientQuestionnaires.length;
i++)
Material(
color: Colors.white,
borderRadius: BorderRadius.circular(6),
elevation: 6,
shadowColor: Colors.black38,
child: InkWell(
onTap: () => showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => PQBottomSheet(
i: i,
),
),
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Row(children: [
Expanded(
child: Wrap(
runAlignment: WrapAlignment.center,
alignment: WrapAlignment.spaceBetween,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Icon(
Icons.assignment,
color: Theme.of(context).primaryColor,
size: segmentedControlGroupValue == 1
? 30
: segmentedControlGroupValue == 2
? 28
: 24,
),
Text(
sessionState.patientQuestionnaires[i]
.credentialSubject.documentName,
style:
Theme.of(context).textTheme.bodyText1,
overflow: TextOverflow.ellipsis,
),
Text(
DateFormat.yMMMd().format(DateTime.parse(
sessionState
.patientQuestionnaires[i]
.issuanceDate)
.toLocal()),
style: Theme.of(context)
.textTheme
.bodyText2!
.copyWith(
color: Theme.of(context)
.colorScheme
.onBackground
.withOpacity(0.5),
),
overflow: TextOverflow.ellipsis,
),
],
),
),
IconButton(
padding: const EdgeInsets.all(0.0),
visualDensity: VisualDensity.compact,
onPressed: () => Platform.isAndroid
? showCupertinoModalPopup(
useRootNavigator: false,
context: context,
builder: (context) =>
CupertinoActionSheet(
actions: [
CupertinoActionSheetAction(
onPressed: () {},
child: Text(L.of(context).share),
),
CupertinoActionSheetAction(
onPressed: () {
Navigator.of(context).pop();
setState(() {
context
.read<SessionCubit>()
.deletePQ(
i, sessionState);
});
},
child: Text(
L.of(context).delete,
style: TextStyle(
color: Theme.of(context)
.errorColor),
),
),
],
cancelButton:
CupertinoActionSheetAction(
onPressed: () =>
Navigator.of(context).pop(),
child: Text(
L.of(context).cancel,
),
),
),
)
: bottomSheet(
context: context,
buttons: [
SizedBox(
width: double.infinity,
child: TextButton(
onPressed: () {},
child: Text(L.of(context).share,
style: Theme.of(context)
.textTheme
.bodyText1),
),
),
SizedBox(
width: double.infinity,
child: TextButton(
onPressed: () {
Navigator.of(context).pop();
setState(() {
context
.read<SessionCubit>()
.deletePQ(
i, sessionState);
});
},
child: Text(
L.of(context).delete,
style: Theme.of(context)
.textTheme
.bodyText1!
.copyWith(
color: Theme.of(context)
.errorColor,
),
),
),
),
],
),
icon: const Icon(Icons.more_vert))
]),
),
),
),
],
),

Removing the complete SilverGrid widget when there are no items present might work. Because there has to be at least one widget inside the Grid.
if (sessionState.patientQuestionnaires.length > 0)
SilverGrid.count(...),
Adding the above code will make the SilverGrid disappear and again appear when you add some content to the patientQuestionnaires.
Note: You need to setState() or an alternative to refresh the state when the item is removed/added. (Hopefully, you are already using one)

Related

Flutter Inkwell Ontap not working inside a Stack

I am building a flutter ecommerce app and I am having an issue where ontap isn't working inside my inkwell widget. I want the ontap to work so that I can show the product description. I have placed the inkwell widget as a child inside a Positioned widget, which happens to be one of the children of a Stack. How can I solve this?
Here's my code:
return Card(
shadowColor: Colors.grey,
surfaceTintColor: Colors.amber,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Stack(
children: [
Positioned(
right: 0,
child: InkWell(
onTap: () {
print('tapped');
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
ProductDetails(
id: bottleCategory
.bottleList[index].id,
bottleName: bottleCategory
.bottleList[index]
.bottleName,
image: bottleCategory
.bottleList[index]
.image,
price: bottleCategory
.bottleList[index]
.price)));
},
child: IconButton(
icon: favoriteProvider.isExist(
bottleCategory.bottleList[index])
? Icon(
Icons.favorite,
color: Colors.redAccent,
)
: Icon(
Icons.favorite_border,
),
onPressed: (() {
favoriteProvider.toggleFavorites(
bottleCategory.bottleList[index]);
if (favoriteProvider.isExist(
bottleCategory.bottleList[index])) {
ScaffoldMessenger.of(context)
.hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(
const SnackBar(
content: Text(
"Product Added to Favorite!",
style: TextStyle(fontSize: 16),
),
backgroundColor: Colors.green,
duration: Duration(seconds: 1),
),
);
} else {
ScaffoldMessenger.of(context)
.hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(
const SnackBar(
content: Text(
"Product Removed from Favorite!",
style: TextStyle(fontSize: 16),
),
backgroundColor: Colors.red,
duration: Duration(seconds: 1),
),
);
}
}),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Image.asset(
bottleCategory.bottleList[index].image,
height: 200.0,
),
),
Center(
child: Text(
bottleCategory
.bottleList[index].bottleName,
style: const TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold))),
Center(
child: Text(
'R${bottleCategory.bottleList[index].price}'),
)
],
),
Positioned(
bottom: 0,
right: 10,
child: IconButton(
icon: const Icon(Icons.add_circle),
iconSize: 40.0,
onPressed: () {
cart.addToCart(
bottleCategory.bottleList[index].id,
bottleCategory
.bottleList[index].bottleName,
bottleCategory
.bottleList[index].price,
bottleCategory
.bottleList[index].image);
},
))
],
),
);
Why do you use IconButton in the child of InkWell?
use one of them and Put all of your onPress functions into that widget.

How to collapse the popup menu in Flutter

How can I narrow the width of the popup menu in the navbar?
How can I zoom the icon and text?
I can't open the width tag, I think a different customization is required.
actions: <Widget>[
PopupMenuButton<_MenuValues>(
color: const Color(0xFF212121),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0))
),
itemBuilder: (BuildContext context) => [
PopupMenuItem(
child: ListTile(
leading: Icon(Icons.settings, color: Colors.white),
title: Text("Settings", style: TextStyle(color: Colors.white)),
),
value: _MenuValues.settings
),
],
onSelected: (value) {
switch(value) {
case _MenuValues.settings:
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => settings(),
));
break;
}
},
),
],
use sizedBox
PopupMenuItem(
value: 1,
// row has two child icon and text.
child: SizedBox(
width: 500,
child: Row(
children: [
Icon(Icons.settings , size: 10,),
Text("Settings", style: TextStyle(fontSize: 10),)
],
),
)
),
],

Tap to edit text of a listtile

i'm a bit new to flutter and i'm trying to teach myself to build a groceries list, which will be linked to an API backend. I want the text on a listtile to be editable ontap, so if the user makes a typo they can quickly edit the listtile without going through an additional dialogue.
Screenshot of list tiles
Code:
Widget _shoppingListItem() {
return ListView.builder(
itemCount:
_shoppingList.shoppingListCategories.first.shoppingListItems.length,
itemBuilder: (context, index) {
return Dismissible(
background: Container(
child: Text("Delete",
style: TextStyle(
fontWeight: FontWeight.normal, color: Colors.white)),
color: Colors.red,
),
confirmDismiss: (direction) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Sure??'),
content: Text('Delete'),
actions: <Widget>[
FlatButton(
onPressed: () {
// Navigator.pop(context, false);
Navigator.of(
context,
// rootNavigator: true,
).pop(false);
},
child: Text('No'),
),
FlatButton(
onPressed: () {
// Navigator.pop(context, true);
Navigator.of(
context,
// rootNavigator: true,
).pop(true);
},
child: Text('Yes'),
),
],
);
},
);
},
key: UniqueKey(),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
),
child: ListTile(
title: Text(
_shoppingList.shoppingListCategories.first
.shoppingListItems[index].itemName,
style:
TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
color: ColorPalette.dark2,
icon: icons.shoppingMinus.image(size: 24),
onPressed: () {
setState(() {
_shoppingList.shoppingListCategories.first
.shoppingListItems[index].itemCount--;
});
},
),
Text(
"${_shoppingList.shoppingListCategories.first.shoppingListItems[index].itemCount}",
style: TextStyle(
color: ColorPalette.dark2,
),
),
IconButton(
color: ColorPalette.dark2,
icon: icons.shoppingPlus.image(size: 24),
onPressed: () {
setState(() {
_shoppingList.shoppingListCategories.first
.shoppingListItems[index].itemCount++;
});
},
),
],
),
),
),
),
);
},
);
}
}

How to change the Flutter TextButton height?

This is the output:
I try to make an app but when I use the TextButton, I get the space between two Buttons
I need one by one without space
If I use the Expanded Widget, ScrollChildView doesn't work
I try but I can't clear this stuff.
I try to make this type of TextButton.
Anyone know or have any idea about this?
import "package:flutter/material.dart";
import 'package:audioplayers/audio_cache.dart';
class Account extends StatefulWidget {
Account({Key key}) : super(key: key);
#override
_AccountState createState() => _AccountState();
}
class _AccountState extends State<Account> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Stack(
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TextButton(
child: Container(
child: Text(
'One',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.red),
),
onPressed: () {
final player = AudioCache();
player.play('note1.wav');
},
),
SizedBox(
height: 1,
),
TextButton(
child: Container(
child: Text(
'Two',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () {
final player = AudioCache();
player.play('note2.wav');
},
),
TextButton(
child: Container(
child: Text(
'Three',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.blue),
),
onPressed: () {
final player = AudioCache();
player.play('note3.wav');
},
),
TextButton(
child: Container(
child: Text(
'Four',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
),
onPressed: () {
final player = AudioCache();
player.play('note4.wav');
},
),
TextButton(
child: Container(
child: Text(
'Five',
style: TextStyle(color: Colors.white, fontSize: 10),
),
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.purple),
),
onPressed: () {
final player = AudioCache();
player.play('note5.wav');
},
),
],
),
),
],
),
),
),
);
}
}
You just wrap your text button with the SizedBox and set height and width as follows:
SizedBox(
height: 30,
width: 150,
child: TextButton(...),
)
Full available height:
SizedBox(
height: double.infinity, // <-- match_parent
child: TextButton(...)
)
Specific height:
SizedBox(
height: 100, // <-- Your height
child: TextButton(...)
)
In Flutter 2.0, you can set the height of the TextButton directly without depending on other widgets by changing the ButtonStyle.fixedSize:
TextButton(
child: Text('Text Button'),
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
If you want to modify all TextButtons, put it in the ThemeData like below:
return MaterialApp(
theme: ThemeData(
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),
),
Live Demo
use the following to even add your preferred size as well
N/B: child sized box is the main child widget inside Padding widget
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(30.0),
child: SizedBox(
height: 60,
width: 200,
child: ElevatedButton.icon(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegistrationMenu()));
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(Colors.red.shade800),
),
icon: Icon(Icons.person_add_alt_1_rounded, size: 18),
label: Text("Register Users"),
),
),
),
],
),
Wrap the TextButton in an "Expanded" Widget.
Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.red,
padding: EdgeInsets.zero,
),
child: const Text(''),
onPressed: () {
playSound(1);
},
),
),
Another solution would be wrapping with ConstrainedBox and using minWidth & minHeight
properties.
ConstrainedBox(
constraints:BoxConstraints(
minHeight:80,
minWidth:200
),
child:TextButton(..)
)
You need to do two things
Determine text button height using
Sizedbox
Remove padding around text button using
TextStyle.StyleFrom()
SizedBox(
height: 24.0,
child: TextButton(
onPressed: () {},
child: Text('See more'),
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
),
),
),
TextButton(
 onPressed: _submitOrder,
 child: Padding(
     padding: EdgeInsets.only(left: 20, right: 20),
     child: Text("Raise")),
 style: ButtonStyle(
   shape: MaterialStateProperty.all(
   const RoundedRectangleBorder(
   borderRadius: BorderRadius.all(Radius.circular(50)),
   side: BorderSide(color: Colors.green)))),
)
TextButton(
style: ButtonStyle(
tapTargetSize: MaterialTapTargetSize.shrinkWrap
),
child: Text(''),
);

Rounded AppBar in Flutter with Back button

I created a custom rounded AppBar using a code found here, but with just a title in the center.
I wanted to add a backbutton in the top left corner inside AppBar and I tried nesting a button and the text in a Row, but the result is that neither the button or the text are shown. Any help?
Here the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
// ignore: must_be_immutable
class RoundedAppBar extends StatelessWidget implements PreferredSizeWidget {
String title;
RoundedAppBar(this.title);
#override
Widget build(BuildContext context) {
return PreferredSize(
child: LayoutBuilder(builder: (context, constraints) {
final width =
constraints.maxWidth * 16; //per modificare "rotondità" app Bar
return OverflowBox(
maxHeight: double.infinity,
maxWidth: double.infinity,
child: SizedBox(
height: width,
width: width,
child: Padding(
padding: EdgeInsets.only(
bottom: width / 2 - preferredSize.height / 2),
child: Container(
alignment: Alignment.bottomCenter,
padding: EdgeInsets.only(bottom: 10),
decoration: BoxDecoration(
color: const Color(0xff000350),
shape: BoxShape.circle,
),
child: Row(
children: [
Align(
alignment: Alignment.centerLeft,
child: IconButton(
color: Colors.black,
icon: Icon(Icons.chevron_left),
onPressed: () => Navigator.pop(context),
),
),
Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
],
)),
),
),
);
}),
preferredSize: preferredSize);
}
#override
Size get preferredSize => Size.fromHeight(80);
EDIT:
Tried using ListTile as suggested, something happened but didn't work properly.
Here the result.
child: ListTile(
title: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
leading: IconButton(
color: Colors.white,
icon: Icon(Icons.chevron_left),
onPressed: () => Navigator.pop(context),
),
),
EDIT:
I inserted your code as shown. With trial and error, using 35 as height I was able to see the title, but still no button.
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildBack(true, context),
Container(
height: 35,
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Conformity',
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.normal),
),
),
_buildBack(false, context),
],
and
Widget _buildBack(bool isPlaceHolder, BuildContext context) {
return Visibility(
child: InkWell(
child: Icon(
Icons.close,
size: 35,
),
onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: !isPlaceHolder,
);
}
and here the result
You can use a ListTile and use a IconButton as leading.
ListTile(
leading: IconButton(
icon: Icon(Icons.back),
title: '',
onPressed => Navigator.pop(context),
),
),
Another possibility I see:
As the child from the AppBar
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_buildBack(true, context),
Container(
height: height,
child: Text(
'$_title',
style: Theme.of(context).textTheme.headline2,
),
),
_buildBack(false, context),
],
),
In another place outside the builder.
Widget _buildBack(bool isPlaceHolder, Buildcontext context) {
return Visibility(
child: InkWell(
child: Icon(
Icons.close,
size: widget.height,
),
onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: !isPlaceHolder,
);
}}
Here there is again a row as you have tried it yourself, but this one is set up a little differently and an iconButton is built before and after the text, but so that the text remains in the center, the second one is made invisible,