Hi I'm working on the Flutter project
I'm having an issue with the flutter ListView button, So right now it looks the same what I wanted but it doesn't work how I wanted
So if you see the above image if I click then tick overlay appears for that I need to setState() but the issue is right now to get that overlay tick I need to tap twice I don't understand how to fix this issue or is there any widget button which onclick overlay I checked most of them but most of them didn't work or I was not aware of? Inside container, I have 14 same columns with numbers 1-14 I'll make it more compact but first I need to fix this issue here is the code.
`bool _pressed = false;
int _btnIndex = 0;
TabBarView(children: <Widget>[
Container(
height: 300,
// padding: EdgeInsets.only(bottom: 10),
padding: EdgeInsets.all(10),
color: Colors.white,
child: ListView(
padding: EdgeInsets.all(6),
scrollDirection: Axis.horizontal,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Container(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Material(
elevation: 4.0,
shape: CircleBorder(),
clipBehavior: Clip.hardEdge,
color: !_pressed && _btnIndex == 1
? Colors.red
: Colors.white54,
child: Ink.image(
image: AssetImage('assets/images/colosseum.jpg'),
fit: BoxFit.cover,
colorFilter: _pressed && _btnIndex == 1
? ColorFilter.mode(
Colors.black87,
BlendMode.darken,
)
: null,
width: 60.0,
height: 60.0,
child: InkWell(
// splashColor: Colors.green,
focusColor: Colors.red,
highlightColor: Colors.white60,
// overlayColor: MaterialStateColor(),
child: _pressed && _btnIndex == 1
? Icon(
Icons.check,
color: Colors.white,
)
: null,
// onDoubleTap: () {
// _pressed = !_pressed;
// },
onTap: () {
setState(() {
_pressed = !_pressed;
_btnIndex = 1;
});
// _pressed = true;
print('I tapped no 1');
},
),
),
),
),
),
Container(
alignment: Alignment.center,
child: Text('10'),
),
],
),
]),
),
]);`
just use Listview.builder for this
and inside that use GestureDetector inside Builder to change selected item
first take a variable to track selected index
int selected;
then make a listView Builder Widget
ListView.builder(
itemCount:5,
scrollDirection: Axis.horizontal,
itemBuilder:(ctx,index){
return GestureDetector(
onTap:(){
selected = index;
setState((){});
}
child: YourWidget(isSelected:this.selected == index);
);
}
)
just write logic for displaying tick in YourWidget image when isSelected is true
Hey #user2572661 may be when you touch container may not interact as what you want you can use ListView.builder() with scroll direction horizontal also there is a Widget you can use it onTap: to change state or logic call GestureDetector(). Although can you please share some more code so that i can understand and rectify your problem.
Related
I am trying to implement a horizontal Listview which shows my images pulled from the Flutter image_picker plugin.
its work fine if I do not use a Listview and only display a single image. however I am trying to use multiple images and as soon as I place within the Listview the widgets just shows up as black. my code for the Listview is as follows:
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
Navigator.pushReplacementNamed(context, 'inventory');
return false;
},
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.green[700],
title: Text(
'MyApp',
textAlign: TextAlign.center,
),
leading: new IconButton(
icon: new Icon(Icons.arrow_back),
onPressed: () {
Navigator.pushReplacementNamed(
context,
'inventory');
},
),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 10.0),
child: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white, //remove this when you add image.
),
child: GestureDetector(
onTap: (){
Navigator.pushNamed(context,'profile');
},
child: Image(
image:NetworkImage("imageUrl goes here"),
width: 120,
height: 120,
fit: BoxFit.cover,
),
),
),
)
],
),
body: SafeArea(
child: Column(
children: [
pickedFile == null ?
GestureDetector(
onTap: () {
_showMyDialog();
setState(() {
});
},
child: Container(
width: 200,
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Click to add a Photo',textAlign:
TextAlign.center,style: TextStyle(fontSize: 24),),
SizedBox(height: 20,),
Icon(
Icons.add_circle_outline,
color: Colors.grey[700],
size: 30,
),
],
),
margin: EdgeInsets.all(20.0),
decoration: BoxDecoration(
border: Border.all(width: 2,color: Colors.grey),
shape: BoxShape.circle
),
),
)
:
GestureDetector(
onTap: () {
_showMyDialog();
setState(() {
});
},
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: _imageFileList!.length,
itemBuilder: (BuildContext context, int index) {
return kIsWeb
? Image.network(_imageFileList![index].path)
: Image.file(File(_imageFileList!
[index].path));
}
)
],
),
),),
);
}
}
I am not showing the whole code as the page is too long however the rest of the page works fine. if i remove the Listview builder and instead test using just the below it works fine. what am i doing wrong?
child: Row(
children: [
kIsWeb
? Container(
child: Image.network(_imageFileList![index].path))
: Container(
child: Image.file(File(_imageFileList![index].path)));
}
),
],
),
Please help.
**Edited the above code with my full widget
Either use Row or use ListView, not both.
You can use Row with List.generate:
Row(
children: List.generate(_imageFileList!.length,
(i) => kIsWeb
? Container(child: Image.network(_imageFileList![index].path))
: Container(child: Image.file(File(_imageFileList![index].path))
),
Or ListView exactly how you have it without the Row. ListView is probably the widget you’re wanting to use. Row will overflow if the content is larger than the width while ListView will act as its own ScrollView in that situation.
I’d also double-check that you need that Expanded widget. That’s typically for use inside a Row (or similar widgets).
Managed to solve my issue. it was related to a height constraint which needed to be added. found the solution in this link
How to add a ListView to a Column in Flutter?
I'm making a listview with a few buttons. I've used a stack widget to place two floating action buttons on top of Listview. However, I want to align them to the bottom right and bottom left of the listview. I'm not able to do this we Align widget although I don't understand why. Note that I understand I could've used a scaffold widget here but that is not an option given Listview is a child of Scaffold. Also, I've tried using the alignment property of Stack, but it didn't work. I was hoping you guys could help solve this problem :D
This is the code here:
#override
Widget build(BuildContext context) {
#override
void initState() {
super.initState();
written = [];
read = [];
}
return Stack(
//fit: StackFit.expand,
alignment: AlignmentDirectional.bottomEnd,
children: [
ListView.separated(
reverse: true,
shrinkWrap: true,
separatorBuilder: (context, i) => Container(
//color: Colors.greenAccent,
width: double.infinity,
height: 8,
),
itemCount: savedhistory.length,
itemBuilder: (context, i) => Dismissible(
key: UniqueKey(),
onDismissed: (direction) {
setState(() {
savedhistory.removeAt(i);
updateString(i);
});
},
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(20))),
child: savedhistory[i],
//padding: EdgeInsets.all(8.0),
),
/* read == null
? []
: read.map((e) => ExpansionTile(
title: Text(e),
subtitle: Text(e),
)), */
)),
Positioned(
//alignment: Alignment.bottomRight,
// child: GestureDetector(
// onLongPress: () => getString(),
bottom: 50,
right: 0,
child: FloatingActionButton(
child: Icon(Icons.replay_outlined),
onPressed: getString,
backgroundColor: Colors.green[200])),
Align(
alignment: Alignment.bottomLeft,
child: Container(
child: FloatingActionButton(
child: Icon(Icons.download),
onPressed: addString,
backgroundColor: Colors.green[200]),
),
)
]);
}
}
After using positioned there seems to be some space beyond which button gets clipped, I don't understand why though.
[1]: https://i.stack.imgur.com/bjrnL.png
try to use Positioned widget :
stack(
children[
Positoned(
bottom : 0
left :1
child: Container(
/// YOUR CODE ///
)
)
]
)
first set stack widget's alignment to bottomcenter and then use Positoned() for first button widget with left: 0 and with second button right:0
I'm trying to create a listview of cards whose images get displayed in the listview only if the card is selected. The selection widget is the PopupSubscription() where I'm choosing which cards (SubscriptionCard) to display by setting the bool of that particular image to be true. But when the selections are applied, the selected images don't appear immediately even after doing setState().
However, they do appear when I switch tabs and return the screen again. What should I do in order to change the state of an object that's not in my current state class? I tried using Provider but it left me confused as to what I'm supposed to do.
This is the SubscriptionCard where the bool is set on tapping it:
return InkWell(
radius: 1.0,
borderRadius: BorderRadius.circular(8.0),
highlightColor: buttonBackground,
onTap: () {
setState(() {
widget.currentSubscription.selected = !widget.currentSubscription.selected;
});
},
child: Card(
elevation: 1.0,
borderOnForeground: true,
shape: widget.currentSubscription.selected ? RoundedRectangleBorder(
borderRadius: BorderRadius.circular(3.0),
side: BorderSide(color: buttonBackground, width: 2.0),
) : ContinuousRectangleBorder(),
color: bgDarkColor,
child: SizedBox(
width: SizeConfig.blockSizeHorizontal * 30,
child: Stack(
alignment: Alignment.topRight,
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Image.asset(this.widget.currentSubscription.logo, height: 35.0,),
Text(
' ${this.widget.currentSubscription.name}',
style: TextStyle(fontFamily: 'Muli', fontSize: 16.0)
),
],
),
widget.currentSubscription.selected ? Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: buttonBackground,
),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: Icon(
Icons.check,
size: 10.0,
color: Colors.white,
),
),
) : Container()
],
),
),
),
);
This is the ListView where the selected cards' images are rendered:
Container(
height: 50,
width: 350,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
IconButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return PopupSubscription();
}
);
},
icon: Icon(Icons.add_box_rounded, size: 30.0,),
),
StatefulBuilder(
builder: (context, setState) {
return ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: subscriptionsList.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: Image.asset(
subscriptionsList[index].selected ? subscriptionsList[index].logo
: "assets/elements/streaming-services/netflix.jpeg",
),
),
);
},
);
}
),
],
)
),
Based on your current code, I'm guessing you've added the currentSubscription variable as final in the StatefulWidget above the actual State, like:
class MyClass extends StatefulWidget{
final currentSubscription;
// Rest of the code
}
class _MyClassState extends State<MyClass> {
// Your ListView Code and other stuff.
}
This wont work when you want to change the state onTap, I recommend making the variable you use in setState within the _MyClassState class and use setState in that. Something like:
class _MyClassState extends State<MyClass> {
bool _isSelected = false;
// And in your onTap method, something like:
setState(() {
_isSelected = !_isSelected;
});
}
I have 3 containers and in each picture, when you click on which an icon appears. How to assign a value to each container, so that when you click it, you can change it too. Or how to track which container was clicked on
class _EditAccountScreenState extends State<EditAccountScreen> {
bool checkboxValue = false;
...
child: GestureDetector(
onTap: () {
setState(() {
checkboxValue = !checkboxValue;
});
},
child: Padding(
child: Row(
children: <Widget> [
Container(
child: Stack(
children: <Widget>[
Image.asset('assets/images/telegram-512.png',fit: BoxFit.fill),
Positioned(
bottom: 0, right: 15, //give the values according to your requirement
child: checkboxValue
? Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(100)
),
child: Icon(
Icons.check,
color: Colors.white,
size: 15,
)
)
: Container(),),],),),
Container(
child: Stack(
children: <Widget>[
Image.asset('assets/images/Viber-Logo.png',fit: BoxFit.fill),
Positioned(
bottom: 0, right: 15, //give the values according to your requirement
child: checkboxValue
? Container(
decoration: BoxDecoration(
color: Colors.green,
borderRadius:BorderRadius.circular(100)
),
child: Icon(
Icons.check,
color: Colors.white,
size: 15,
)
)
: Container(),),],),),
Use Gesture Detector to detect Taps on containers.
Here is an example related to this:
Container(
alignment: FractionalOffset.center,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.lightbulb_outline,
color: _lights ? Colors.yellow.shade600 : Colors.black,
size: 60,
),
),
GestureDetector(
onTap: () {
setState(() {
_lights = true;
});
},
child: Container(
color: Colors.yellow.shade600,
padding: const EdgeInsets.all(8),
child: const Text('TURN LIGHTS ON'),
),
),
],
),
)
First of All Make a Integer Variable and then set its value to -1 by default
int selectedContainerIndex = -1;
Now, You Can Wrap each of your Container in seperate GestureDetector, and then on the onTap method you can set the selectedContainerIndex value of your container according to you.
See the below Code
Stack(
children: [
//First Container
GestureDetector(
onTap: () {
selectedContainerIndex = 0;
setState(() {});
},
child: new Container(),
),
//Second Container
GestureDetector(
onTap: () {
selectedContainerIndex = 1;
setState(() {});
},
child: new Container(),
),
//Third Container
GestureDetector(
onTap: () {
selectedContainerIndex = 2;
setState(() {});
},
child: new Container(),
),
],
),
Now To know which Container was tapped you can always use the selectedContainerIndex Value
print(selectedContainerIndex);
NOTE: If your containers are more in numbers say 4 or 5, then I would recommend you to use good practice and show those using some dynamic listview builder, instead of hardcoding them each.
I used ListViewBuilder to render a list of time slots, and What i need is to be able to select only one item of them, and when i selected it i need to change the background of only this item and then appear the reservation details, but what actually done is that the all items background changed to another color
[![This is image that before select a one time slot][1]][1][![And this when i try to select one item all items are selected and then the reservation details appear when i preesed the time slot][1]][1]
[![And this when i try to select one item all items are selected and then the reservation details appear when i preesed the time slot][1]][1]
class _ReservationSlotsWidgetState extends State<ReservationSlotsWidget> {
var _isExpanded = false;
var slots = [
'09:00AM',
'10:00AM',
'11:00AM',
'12:00PM',
'01:00PM',
'02:00PM',
'03:00PM',
'04:00PM',
];
#override
Widget build(BuildContext context) {
final deviceSize = MediaQuery.of(context).size;
return Scaffold(
extendBodyBehindAppBar: true,
....
Expanded(
child: ListView.builder(
itemCount: slots.length,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, index) {
var slot = slots[index];
return GestureDetector(
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
child: Container(
padding: EdgeInsets.all(4),
margin: EdgeInsets.all(4),
decoration: BoxDecoration(
color: _isExpanded
? Theme.of(context).primaryColor
: parseColor('#2A2E43'),
borderRadius:
BorderRadius.all(Radius.circular(10))),
child: SlotsWidget())
);
}
)),
],
),
),
SizedBox(
height: deviceSize.height * 0.00025,
),
if (_isExpanded)
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.all(16),
height: deviceSize.height * 0.2,
decoration: BoxDecoration(
color: Theme.of(context).primaryColorDark,
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.person_add,
color: Colors.white,
),
SizedBox(
width: 5,
),
Text('Number of persons',
style: TextStyle(
color: Colors.white,
)),
SizedBox(
height: 5,
),
],
),
Row(
children: <Widget>[
Icon(
Icons.person_add,
color: Colors.transparent,
),
SizedBox(
width: 5,
),
Text('(max 7 persons)',
style: TextStyle(
color: Colors.white,
)),
....
So the key to your question is the index of your ListView Builder.
The way you are currently doing it, is you are setting a single boolean to be true or false, which applies to every element of your list.
What you need to do, is save the index of your expanded widget.
Change
onTap: () {
setState(() {
_isExpanded = !_isExpanded;
});
},
To
int _expandedIndex;
...
onTap: () {
setState(() {
_expandedIndex = index
});
},
And change
color: _isExpanded
? Theme.of(context).primaryColor
: parseColor('#2A2E43'),
To
color: _expandedIndex == index
? Theme.of(context).primaryColor
: parseColor('#2A2E43'),
Create separate class like
class Slot {
String time;
bool isSelected;
Slot(this.time, this.isSelected);
}
Create a slot list of the above class
var slots = [
Slot('09:00AM', false),
Slot('10:00AM', false),
Slot('11:00AM', false),
Slot('12:00PM', false),
//... Rest of the items
];
Get the slot object from the list(This should be inside Listview.Builder)
var slot = slots[index];
var time = slot.time; // Get the time from slot object
Mark isSelected as true on click of the list item
slot.isSelected = true;
OR
slot.isSelected = !slot.isSelected; // Vice versa