Remove container from ListView Builder when clicked to remove - flutter

The ListView Builder generates containers. Inside the container, it has another container to remove the first one container.
I already tried with Dismissible, but it didn't work... this question is quite similar, but I couldn't applly for my code:
removing item from ListView.builder Flutter
Hope someone can help :)))
Here is the code:
ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
padding: EdgeInsets.only(bottom: 10),
itemCount:
snapshot.data != null ? snapshot.data.length : 0,
itemBuilder: (BuildContext context, int index) {
OrdersModel orderItem = snapshot.data[index];
return InkWell(
//onTap
child: Container(
padding: EdgeInsets.only(
bottom: 10, top: 10, left: 5, right: 5),
margin: EdgeInsets.only(left: 5, right: 15),
width: 187,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 0.5,
),
],
),
child: Column(
children: [
Container(
child: Material(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
color: Color(0xffeb5c68),
child: InkWell(
splashColor: Color(0xffda1b2b),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
child: SizedBox(
width: 220,
height: 40,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
"REMOVE ${orderItem.number}",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
),
),
],
),
),
onLongPress: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
OrderDetailsPage(),
),
);
},
),
),
),
],
),
),
onTap: () {},
);
},
);

U probably can just call a snapshot.data.removeAt(index) inside your list item, like that:
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
final item = items[index];
return ListTile(title: Text('$item --- Click to remove me'),onTap:(){
setState(() {
items.removeAt(index);
});
});
},
),

You ca use Dismissible https://flutter.dev/docs/cookbook/gestures/dismissible for your solution

Related

How to set maximum size in alert dialog in flutter

How can i set maximum size for an alert dialog in flutter and the same dialog shrink if the items are not upto the maximum size here is the code am currently using
showDialog(
context: context,
builder: (ctx) => StatefulBuilder(builder: (context, setState) {
return AlertDialog(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
content: Wrap(
children: [
Container(
padding: const EdgeInsets.all(5),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height / 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Select Country'),
const SizedBox(height: 10),
Expanded(
child: ListView.builder(
itemCount: getCountries().length,
itemBuilder: (BuildContext context, int index) {
final User us = getCountries()[index];
return InkWell(
onTap: () {
Navigator.pop(context);
setState(() {
countryId = us.id;
});
},
child: Container(
margin: const EdgeInsets.only(
left: 0, top: 5, right: 0, bottom: 5),
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10))),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(us.name,
style: TextStyle(
color: AppColor.colorAppGreen,
fontSize: 16)),
],
),
),
);
},
),
)
],
),
),
],
),
);
}));
I need the alert dialog to shrink to fit if the items are small but increase to the maximum height with more items which is half of the screen with the code above am able to set the maximum height with this
height: MediaQuery.of(context).size.height / 2,
but when the items are few i get a lot of empty spaces. Any help will be greatly appreciated.
try this:
showDialog(
context: context,
builder: (ctx) =>
StatefulBuilder(builder: (context, setState) {
return AlertDialog(
insetPadding: EdgeInsets.zero,
shape: const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0))),
title: const Text('Select Country'),
content: Container(
padding: const EdgeInsets.all(5),
width: MediaQuery.of(context).size.width,
// height: MediaQuery.of(context).size.height,
child: ListView.builder(
shrinkWrap: true,
itemCount: 20,
itemBuilder: (BuildContext context, int index) {
// final User us = getCountries()[index];
return InkWell(
onTap: () {
Navigator.pop(context);
// setState(() {
// countryId = us.id;
// });
},
child: Container(
margin: const EdgeInsets.only(
left: 0, top: 5, right: 0, bottom: 5),
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10))),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text('us.name',
style: TextStyle(
color: Colors.green,
fontSize: 16)),
],
),
),
);
},
)),
);
}));
Note: I set dialog's insetPadding to zero, to get max size.Fill free to play with that to get your prefer look.

Flutter Firebase fetch a nested data

So my app suggest a list of tourist places and the data is fetched from firebase.
So, I have added a search bar where the user can search that tourist place and it will be shown.
Now the problem is that it is not showing the searched place in the listView.
Here is the firebase ScreenShot:
Example -> I want to search and show "India Gate" in the ListView , so how should I do it.
enter image description here
Here is my Code
Padding(
padding: const EdgeInsets.only(top: 25, left: 0, right: 0),
child: StreamBuilder(
stream: FirebaseFirestore.instance
.collection('States')
.snapshots(),
builder: (context, snapshot) {
var docs = snapshot.data.docs[widget.stateIndex];
if (snapshot.hasData) {
/// MediaQuery.removePadding is used to remove the blank space which appears on the top of ListView.
return MediaQuery.removePadding(
context: context,
removeTop: true,
/// Here ClipRRect is wrapped on ListView to make the Scrolling border rounded.
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45),
topRight: Radius.circular(45)),
child: ListView.builder(
physics: BouncingScrollPhysics(),
itemBuilder: (context, index) {
print(
"Value: ${widget.stateIndex} + ${docs['places'].length}");
print(docs.data());
print("Hello-----------------");
print(docs['places'][index]["location"]);
return Container(
height: deviceSize.height * .225,
child: Card(
elevation: 10,
margin: EdgeInsets.all(10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20))),
child: Stack(
children: [
/// Background Place Image.
ClipRRect(
child: Image.network(
docs['places'][index]["img"],
fit: BoxFit.cover,
width: deviceSize.width,
),
borderRadius: BorderRadius.all(Radius.circular(20))),
/// Text Widget.
Positioned(
bottom: 4,
left: 10,
child: Container(
height: 25,
width: 185,
padding: EdgeInsets.only(left: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: SecondPrimaryColor,
),
child: Row(
children: [
Image.asset(
"assets/icon.png",
color: Colors.white,
height: 18,
filterQuality:
FilterQuality.high),
SizedBox(width: 10),
AutoSizeText(
docs['places'][index]["venue"],
style: TextStyle(
color: Colors.white,fontWeight: FontWeight.w600),
maxFontSize: 22,
minFontSize: 14,
),
],
),
)),
// Positioned(
// right: 30,
// bottom: 6,
// child: Container(
// height: 18,
// width: 50,
//
// decoration: BoxDecoration(
// borderRadius: BorderRadius.all(Radius.circular(10)),
// color: PrimaryColor,
// ),
// child: Icon(Icons.arrow_forward,color: SecondPrimaryColor,size: 18),
// ))
],
),
),
);
},
itemCount: docs['places'].length,
),
),
);
} else {
return Text("No Data");
}
}),
),
Use docs.data() to convert to Map<String, dynamic> and display your data instead of docs['places'];
Something like this:
StreamBuilder<QuerySnapshot<Map<String, dynamic>>>( // changes made
stream: FirebaseFirestore.instance.collection('States').snapshots(),
builder: (context, snapshot) {
// changes made
if (snapshot.hasData) {
QueryDocumentSnapshot<Map<String, dynamic>> doc =
snapshot.data.docs[widget.stateIndex];
Map<String, dynamic> data = doc.data(); // changes made
/// MediaQuery.removePadding is used to remove the blank space which appears on the top of ListView.
return MediaQuery.removePadding(
context: context,
removeTop: true,
/// Here ClipRRect is wrapped on ListView to make the Scrolling border rounded.
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(45),
topRight: Radius.circular(45),
),
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemBuilder: (context, index) {
print(data);
print(
"Value: ${widget.stateIndex} + ${data['places'].length}");
print('Hello-----------------');
// changes made
print(data['places'][index]['location']);
return Container(
height: deviceSize.height * .225,
child: Card(
elevation: 10,
margin: const EdgeInsets.all(10),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: Stack(
children: [
/// Background Place Image.
ClipRRect(
child: Image.network(
data['places'][index]['img'],
fit: BoxFit.cover,
width: deviceSize.width,
),
borderRadius:
const BorderRadius.all(Radius.circular(20)),
),
/// Text Widget.
Positioned(
bottom: 4,
left: 10,
child: Container(
height: 25,
width: 185,
padding: const EdgeInsets.only(left: 10),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(10),
),
color: SecondPrimaryColor,
),
child: Row(
children: [
Image.asset(
'assets/icon.png',
color: Colors.white,
height: 18,
filterQuality: FilterQuality.high,
),
const SizedBox(width: 10),
AutoSizeText(
data['places'][index]['venue'],
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w600,
),
maxFontSize: 22,
minFontSize: 14,
),
],
),
),
),
],
),
),
);
},
itemCount: data['places'].length,
),
),
);
} else {
return const Text('No Data');
}
},
);

TextField don't resize my alertdialog - Flutter

I leave the entire code fragment, the main idea is to have a textfield that, by using the keyboard, shows me a series of elements, in the description variable, I have that element to select, this works well, the only issue is, how to keep my alertdialog with all the correct notes.
return await Get.generalDialog(
barrierLabel: "Barrier",
barrierDismissible: false,
transitionBuilder: (context, a1, a2, widget) {
return StatefulBuilder(builder: (context, setState) {
return Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: Dialog(
insetAnimationCurve: Curves.bounceOut,
insetPadding: EdgeInsets.only(right: 20, left: 20),
//backgroundColor: colorFour(),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: SingleChildScrollView(
child: Container(
height: 340,
child: Column(
children: <Widget>[
Container(
alignment: Alignment.topCenter,
height: 50,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12),
topRight: Radius.circular(12),
),
),
padding: EdgeInsets.all(5),
child: Center(
child: Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.w600),
maxLines: 2,
textAlign: TextAlign.center,
),
),
),
SingleChildScrollView(
padding: EdgeInsets.only(left: 10, right: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
Container(
margin: EdgeInsets.only(top: 10),
child: TextFormField(
controller: controller,
decoration: InputDecoration(
border: OutlineInputBorder(
gapPadding: 5.0)),
keyboardType: TextInputType.text,
maxLines: 1,
onChanged: (String cadena) async {
listado = pivote
.where((x) => x.descripcion
.split("/")[value]
.toLowerCase()
.contains(
cadena.toLowerCase()))
.toList();
setState(() {});
},
),
),
Container(
height: 200,
margin: EdgeInsets.only(
top: 10, bottom: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
border: Border.all(
color: Colors.grey, width: 1)),
child: ListView.builder(
padding: const EdgeInsets.all(0.0),
physics: BouncingScrollPhysics(),
itemCount: listado.length,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return Container(
height: 34,
child: InkWell(
child: SizedBox.expand(
child: Align(
alignment:
Alignment.centerLeft,
child: Padding(
padding:
EdgeInsets.only(
right: 5,
left: 5),
child: Text(
listado[index]
.descripcion
.split(
"/")[value],
textAlign:
TextAlign.left),
),
),
),
onTap: () {
Get.back(result: {
"item": listado[index],
});
}),
);
}),
),
],
)),
],
),
),
),
),
));
});
},
pageBuilder: (context, animation1, animation2) {
return Container();
});
I need to overlay my alertdialog, that is to say that the size does not break my design, this happens after focusing on the textfield
Show us some code to help you out.
In any case, it might make sense to wrap the layout in a SingleChildScrollView.
Here is a very good explanation.
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
yourAlertDialog(
context: context,
builder: (BuildContext context) {
return SingleChildScrollView(child: yourchild);
},
);
Your layout should be wrapped in Scrollview , I didn't replicate or run this code but it should be like this:
AlertDialog(
title: Text("title", style: TextStyle(color: ThemeColors.colorPrimary),),
content: Container(
width: double.maxFinite,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: StatefulBuilder(builder: (BuildContext context1, StateSetter setState) {
this.setState = setState;
return Container(
height: 340,
child: Column(
children: <Widget>[
//your container
],
),
),
}),
)),
);

Draggable Scrollable Sheet becomes unscrollable when we set it's child to a column

I have the following code for a DraggableScrollableSheet in Flutter.
DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35),
),
child: Container(
color: ColorData.secondaryColor,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
child: Column(
children: [
Container(
height: 3,
width: 30,
decoration: BoxDecoration(
color: ColorData.primaryDividerColor,
borderRadius: BorderRadius.circular(16),
),
),
const SizedBox(
height: 18,
),
SizedBox(
width: _screenWidth,
child: const Text(
'Exchange Houses',
textAlign: TextAlign.start,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
const SizedBox(
height: 8,
),
SizedBox(
width: _screenWidth,
child: const Text(
'(Tap to select)',
textAlign: TextAlign.start,
),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView.separated(
itemCount: 5,
itemBuilder: (context, index) => const ExchangeHouseCard(
id: 1,
houseName: 'Test House',
houseContactNumber: '+94 77123456',
houseUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseImageUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseLatitude: 7.0012345,
houseLongitude: 20.301456,
userCurrencyName: 'USD',
convertingCurrencyName: 'LKR',
exchangeRate: 200.00,
change: 500.00,
changeInConvertingCurrency: 1200.00,
),
separatorBuilder: (context, index) => const SizedBox(
height: 5,
),
),
),
],
),
),
),
);
},
),
In the above code, I am trying to make my DraggableScrollableSheet be able be to dragged upwards or collapsed downwards when user drags the sheet. No matter how I try, I can not drag or collapse the sheet. It stays where it is.
Furthermore, something interesting happens if I set controller property of my ListView to the scrollController I get from the builder method in DraggableScrollableSheet. In this case, the DraggableScrollableSheet becomes draggable if we try to scroll the ListView.
But I want the DraggableScrollableSheet to be draggable if I drag from a general area of the sheet. How to implement this to the above DraggableScrollableSheet?
(I also tried wrapping the widget that is being returned inside the builder method with a ListView and setting controller property of the ListView to scrollController that I get from the builder method. But this also gives a render error. I could not find a way to fix this.)
Can someone please help?
You need to give isScrollControlled to true and set the height
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) {
return DraggableScrollableSheet(
initialChildSize: 0.9,
maxChildSize: 0.9,
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35),
),
child: Container(
color: ColorData.secondaryColor,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
child: Column(
children: [
Container(
height: 3,
width: 30,
decoration: BoxDecoration(
color: ColorData.primaryDividerColor,
borderRadius: BorderRadius.circular(16),
),
),
const SizedBox(
height: 18,
),
SizedBox(
width: _screenWidth,
child: const Text(
'Exchange Houses',
textAlign: TextAlign.start,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
const SizedBox(
height: 8,
),
SizedBox(
width: _screenWidth,
child: const Text(
'(Tap to select)',
textAlign: TextAlign.start,
),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView.separated(
itemCount: 5,
controller: scrollController,
itemBuilder: (context, index) =>
const ExchangeHouseCard(
id: 1,
houseName: 'Test House',
houseContactNumber: '+94 77123456',
houseUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseImageUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseLatitude: 7.0012345,
houseLongitude: 20.301456,
userCurrencyName: 'USD',
convertingCurrencyName: 'LKR',
exchangeRate: 200.00,
change: 500.00,
changeInConvertingCurrency: 1200.00,
),
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
),
),
],
),
),
),
);
},
);
});

Cannot scroll to the bottom of the page flutter (bounces back)

SingleChildScrollView can't scroll to the bottom of the page (bounced back). I have try to adding padding bottom inset as the following link but it did nothing. I dont want to use SizedBox as last childern of the column for this case. Maybe you guys have other solution? Thank you
Edit : I try to wrap ListView.builder with Containerand its work as I expected. But sometimes I have a same problem with scrolling, can you guys explain why it`s happen?
More Edit: I try to run it in different sreen size (4inch). And it bounces back again
Codes
ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
children: <Widget>[
Container(
width: size.width,
height: size.height,
color: kSecondaryColor,
child: Container(
// margin: EdgeInsets.only(top: 20),
width: size.width,
height: size.height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35),
),
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35),
),
child: ScrollConfiguration(
behavior: MyBehavior(),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// PageView.builder(
// scrollDirection: Axis.horizontal,
// onPageChanged: _onchanged,
// controller: _controller,
// itemCount: _newsSlider.length,
// itemBuilder: (context, int index) {
// return _newsSlider[index];
// },
// ),
Padding(
padding:
const EdgeInsets.fromLTRB(20, 20, 0, 20),
child: Text(
'Highlights',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
CarouselSlider(
items: imageSliders,
options: CarouselOptions(
autoPlay: true,
enlargeCenterPage: true,
enableInfiniteScroll: false,
aspectRatio: 2.0,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: imgList.map((url) {
int index = imgList.indexOf(url);
return Container(
width: 8.0,
height: 8.0,
margin: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == index
? kSecondaryColor
: Color.fromRGBO(0, 0, 0, 0.4),
),
);
}).toList(),
),
Padding(
padding:
const EdgeInsets.fromLTRB(20, 20, 0, 0),
child: Text(
'News Update',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
ListView.builder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
NewsDetailsView()),
);
},
child: Padding(
padding: const EdgeInsets.fromLTRB(
20, 20, 20, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey
.withOpacity(0.1),
spreadRadius: 2,
blurRadius: 2,
offset: Offset(0,
2),
),
],
),
child: ListTile(
leading: Image.network(
'https://source.unsplash.com/random/200x200?sig=1'),
title: Padding(
padding: const EdgeInsets.only(
top: 10.0),
child: Text(
'My News Title',
style: TextStyle(
color: Colors.black),
),
),
subtitle: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('1 May 2021'),
Text(''),
Text(''),
],
),
isThreeLine: true,
),
),
),
);
}),
// SizedBox(height: 100)
],
),
),
)),
),
))
],
));