How to show List From firestore in textformfield? - flutter

I want to show List of a item name from using stream builder in firestore database when textform field is focus and when it is not focus it show Cards as I will provide below the code. Please give proper solution to solve issue
appBar: AppBar(
title: Container(
height: 40,
child: Stack(
children: [
TextFormField(
keyboardType: TextInputType.text,
autofocus: false,
controller: searchcontroller,
focusNode: fousnode,
decoration: InputDecoration(
hintText: "Search Product",
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(11)),
),
),
onTap: (){
},
)
],
),
),
backgroundColor: Colors.grey,
actions: [
IconButton(onPressed: (){
fousnode.requestFocus();
}, icon: Icon(Icons.search))
],
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(height: 15,),
StreamBuilder(
stream: FirebaseFirestore.instance.collectionGroup("Add_product").snapshots(),
builder:(BuildContext context,AsyncSnapshotsnapshot){
if (!snapshot.hasData) {
return Center(child: LoadingAnimationWidget.staggeredDotsWave(color: Colors.red, size: 10));
}
return Container(
margin: EdgeInsets.symmetric(horizontal: 0.7),
child: GridView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
mainAxisSpacing: 8.0,
crossAxisSpacing: 2.0,
),
itemCount: snapshot.data!.docs.length,
itemBuilder: (itemBuilder,index){
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16.0),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 7,
offset: Offset(0, 3),
),
],
),
child: Container(
color: Colors.grey[300],
child: InkWell(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (builder)=>detail(
url: snapshot.data!.docs[index]["url"],
productName: snapshot.data!.docs[index]["product_name"],
productPrice: snapshot.data!.docs[index]["product_price"],
)));
},
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(9.0),
child: Image.network(snapshot.data!.docs[index]["url"],width: MediaQuery.of(context).size.width*.49,height:MediaQuery.of(context).size.height*.17 ,),
),
Text(snapshot.data!.docs[index]["product_name"],style: TextStyle(fontWeight: FontWeight.bold),),
Text("Rs."+snapshot.data!.docs[index]["product_price"]),
],
),
),
),
),
);
},
),
);
}
),
],
),
),

Related

Query not working correctly when searching ListView with TextFormField

I am listing records from Firebase Firestore with ListView.builder. I convert the incoming records to Model and list them.
I made a search option and I'm trying to make a filtering system for it. I want to filter by nameSurname search, city and district value.
I wrote a code like this:
StreamBuilder(
stream: db
.collection("NeedClothesPeople")
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(
child: CircularProgressIndicator(),
);
} else {
final searchText = searchController.text.trim().toLowerCase();
final List<NeedClothesPeopleModel> data = snapshot.data!.docs
.map((e) => NeedClothesPeopleModel.fromDocument(e))
.where((e) =>
searchText.isEmpty ||
e.nameSurname!.toLowerCase().contains(searchText) &&
selectedCity.isEmpty ||
e.city == selectedCity && selectedDistrict.isEmpty ||
e.district == selectedDistrict) // filter
.toList();
return Column(
children: [
const SizedBox(height: 10),
SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: TextFormField(
controller: searchController,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
suffixIcon: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
filterModalBottomSheet(context);
},
),
contentPadding: const EdgeInsets.only(),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
onChanged: (value) {
setState(() {});
},
),
),
SizedBox(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.8,
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: data.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: Icon(Icons.person),
title: Text(data[index].nameSurname.toString()),
subtitle: Text(
"${data[index].city} / ${data[index].district}",
),
trailing: IconButton(
icon: const Icon(Icons.info),
onPressed: () {
Get.to(const NeedClothesPeopleDetailPage(),
arguments: data[index]);
print(data[index].nameSurname);
},
),
),
);
},
),
),
],
);
}
},
),
void filterModalBottomSheet(BuildContext context) {
showModalBottomSheet(
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
context: context,
builder: (context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Row(
children: [
const Expanded(
flex: 1,
child: Text(
"İl:",
style: TextStyle(fontSize: 19),
),
),
Expanded(
flex: 9,
child: DropdownButtonFormField(
hint: const Text("İl seçiniz"),
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.location_city,
color: Color(0xFFCB3126),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: const BorderSide(
color: Color(0xFFCB3126),
),
),
),
items: citys
.map(
(e) => DropdownMenuItem<String>(
value: e.value,
child: e.child,
),
)
.toList(),
onChanged: (value) {
setState(() {
selectedCity = value.toString();
});
},
),
),
],
),
const SizedBox(height: 20),
Row(
children: [
const Expanded(
flex: 1,
child: Text(
"İlçe:",
style: TextStyle(fontSize: 19),
),
),
Expanded(
flex: 9,
child: DropdownButtonFormField(
key: getCityKey(),
hint: selectedCity == ""
? const Text("Önce il seçiniz")
: const Text("İlçe seçiniz"),
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.location_city,
color: Color(0xFFCB3126),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: const BorderSide(
color: Color(0xFFCB3126),
),
),
),
items: districtsItem(),
onChanged: (value) {
setState(() {
selectedDistrict = value.toString();
});
},
),
),
],
),
const Spacer(),
Padding(
padding: const EdgeInsets.only(left: 12, right: 12),
child: SizedBox(
width: double.infinity,
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFCB3126),
),
child: const Text(
"Filtrele",
style: TextStyle(fontSize: 20),
),
onPressed: () {
setState(() {
filterActive = true;
Navigator.pop(context);
print(filterActive);
});
},
),
),
),
const SizedBox(height: 10),
],
),
),
);
},
);
},
);
}
The problem is this: When I call it by typing in TextFormField, the records in ListView.builder are changing. However, when filtering is done, the records do not change on the screen.
Why could this be? How can I solve the problem? Thanks.

Sliver AppBar not collapse when using listviewbuilder

im so confuse why my sliverappbar doesnt collapse when i'm scrolling listviewbuilder
so what i want is Appbar will colapse but the bottom is pinned, also when im scrolling to up the appbar will show'n
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
snap: true,
floating: true,
expandedHeight: 150,
centerTitle: true,
title: Text('mama'),
bottom: AppBar(
title: Container(
height: 45,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term'),
),
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
height: MediaQuery.of(context).size.height,
child: StreamBuilder<ListsetorModel>(
stream: con.resListsetor.stream,
builder: (_, snapshot) {
if (snapshot.hasData) {
if (snapshot.data!.result == null) {
return Center(
child: Text('Data kosong '),
);
} else {
return Scrollbar(
thickness: 5,
child: ListView.builder(
itemCount: snapshot.data!.result!.length,
itemBuilder: (context, index) {
var formatDate = DateFormat('yyyy-MM-dd ')
.format(snapshot
.data!.result![index].createdAt!
.toLocal());
Result list =
snapshot.data!.result![index];
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
DetailTransaksi(
kode: list.kode)));
},
child: Container(
child: Card(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(9.0),
),
child: Container(
child: Padding(
padding:
const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"Order ${list.kode}",
style: TextStyle(
fontWeight:
FontWeight
.bold),
),
Text(formatDate),
],
),
),
Divider(),
Text(
"Please help us to confirm \nto get 10% discount code for next order."),
SizedBox(
height: 10,
),
Container(
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Container(
width: 96,
height: 36,
color: Color(
0xff85d057),
child: TextButton(
child: Row(
children: [
SizedBox(
width: 5,
),
Text(
"Qr Code",
style: TextStyle(
color: Colors
.white),
),
SizedBox(
height: 20,
width: 20,
child: Image
.asset(
'assets/images/qrscan.png'),
)
],
),
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => Qrcode(
data: list.kode!,
)));
},
),
),
)
],
),
),
],
),
),
),
),
),
);
}),
);
}
}
return Center(child: CircularProgressIndicator());
}),
);
},
),
),
],
),
),
);
}
so i want the sliverappbar collapse when im scroll thi listview, i tried adding physics neverscrollable on listview builder it doesn't work properly
so the answer is by adding in NestedScrollview
floatHeaderSlivers: true,
and remove snap: true inside sliverappbar
Please refer to below code
class AnimatedAppBar extends StatefulWidget {
const AnimatedAppBar({Key key}) : super(key: key);
#override
_AnimatedAppBarState createState() => _AnimatedAppBarState();
}
class _AnimatedAppBarState extends State<AnimatedAppBar>
with TickerProviderStateMixin {
final TextEditingController stateController = TextEditingController();
final FocusNode stateFocus = FocusNode();
var animation;
var controller;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innnerBoxIsScrolled) {
if (innnerBoxIsScrolled) {
/* Animation */
controller = AnimationController(
vsync: this,
duration: Duration(
seconds: 1,
),
);
animation = Tween(
begin: 0.0,
end: 1.0,
).animate(controller);
/* Animation */
controller.forward();
}
return <Widget>[
SliverAppBar(
expandedHeight: 120.0,
floating: false,
pinned: true,
backgroundColor: Colors.grey,
automaticallyImplyLeading: false,
titleSpacing: 0.0,
toolbarHeight: 90.0,
centerTitle: false,
elevation: 0.0,
leadingWidth: 0.0,
title: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (innnerBoxIsScrolled != null &&
innnerBoxIsScrolled == true)
FadeTransition(
opacity: animation,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 10.0,
),
Text(
"Search",
style: TextStyle(
color: Colors.black,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
autovalidateMode:
AutovalidateMode.onUserInteraction,
/* autovalidate is disabled */
controller: stateController,
inputFormatters: [
FilteringTextInputFormatter.deny(
RegExp(r"\s\s")),
FilteringTextInputFormatter.deny(RegExp(
r'(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])')),
],
keyboardType: TextInputType.text,
maxLength: 160,
onChanged: (val) {},
maxLines: 1,
validator: (value) {},
focusNode: stateFocus,
autofocus: false,
decoration: InputDecoration(
errorMaxLines: 3,
counterText: "",
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
disabledBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
enabledBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
),
),
errorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
)),
focusedErrorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
),
),
hintText: "Search" ?? "",
),
),
),
SizedBox(
height: 6.0,
)
],
),
),
],
),
// bottom: PreferredSize(
// preferredSize: Size.fromHeight(5.0),
// child: Text(''),
// ),
flexibleSpace: FlexibleSpaceBar(
background: Container(
width: MediaQuery.of(context).size.width,
child: Stack(
alignment: Alignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 10.0,
),
Padding(
padding: EdgeInsets.symmetric(
horizontal: 8.0,
),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
"Search",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 24.0,
),
),
CircleAvatar(
backgroundImage: NetworkImage(
"https://images.ctfassets.net/hrltx12pl8hq/2TRIFRwcjrTuNprkTQHVxs/088159eb8e811aaac789c24701d7fdb1/LP_image.jpg?fit=fill&w=632&h=354&fm=webp"), //NetworkImage
radius: 16.0,
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
autovalidateMode:
AutovalidateMode.onUserInteraction,
/* autovalidate is disabled */
controller: stateController,
inputFormatters: [
FilteringTextInputFormatter.deny(
RegExp(r"\s\s")),
FilteringTextInputFormatter.deny(RegExp(
r'(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])')),
],
keyboardType: TextInputType.text,
maxLength: 160,
onChanged: (val) {},
maxLines: 1,
validator: (value) {},
focusNode: stateFocus,
autofocus: false,
decoration: InputDecoration(
errorMaxLines: 3,
counterText: "",
filled: true,
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
disabledBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
enabledBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffE5E5E5),
),
),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
),
),
errorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
)),
focusedErrorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Colors.red,
),
),
hintText: "Search" ?? "",
),
),
),
],
),
],
),
),
),
),
];
},
body: Builder(
builder: (BuildContext context) {
return SingleChildScrollView(
child: Column(
children: [
ListView.builder(
itemCount: 100,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Text("Index value: $index"),
);
},
)
],
),
);
},
),
),
),
);
}
}
Nested Scroll with Tab Bar
class NestedScrollWithTabs extends StatefulWidget {
const NestedScrollWithTabs({Key key}) : super(key: key);
#override
_NestedScrollWithTabsState createState() => _NestedScrollWithTabsState();
}
class _NestedScrollWithTabsState extends State<NestedScrollWithTabs>
with TickerProviderStateMixin {
var animation;
var controller;
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
physics: NeverScrollableScrollPhysics(),
headerSliverBuilder: (headerCtx, innnerBoxIsScrolled) {
if (innnerBoxIsScrolled) {
/* Animation */
controller = AnimationController(
vsync: this,
duration: Duration(
seconds: 1,
),
);
animation = Tween(
begin: 0.0,
end: 1.0,
).animate(controller);
/* Animation */
controller.forward();
}
return <Widget>[
SliverAppBar(
expandedHeight: ScreenUtil().setHeight(185.0),
floating: false,
pinned: true,
backgroundColor: Colors.white,
automaticallyImplyLeading: false,
titleSpacing: 0.0,
centerTitle: true,
elevation: 0.0,
leadingWidth: 0.0,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
if (innnerBoxIsScrolled != null &&
innnerBoxIsScrolled == true)
FadeTransition(
opacity: animation,
child: Text(
"Title",
style: TextStyle(
color: Colors.black,
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
),
],
),
flexibleSpace: FlexibleSpaceBar(
background: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Image.network(
"https://images.pexels.com/photos/10181294/pexels-photo-10181294.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ??
"",
fit: BoxFit.fitWidth,
height: ScreenUtil().setHeight(126.0),
width: ScreenUtil().screenWidth,
filterQuality: FilterQuality.low,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Container(
height: ScreenUtil().setHeight(126.0),
width: ScreenUtil().screenWidth,
color: Colors.grey,
);
},
errorBuilder: (context, error, stackTrace) {
return SizedBox(
height: ScreenUtil().setHeight(126.0),
width: ScreenUtil().screenWidth,
child: Container(
width: ScreenUtil().screenWidth,
),
);
},
),
Positioned(
top: ScreenUtil().setHeight(92.0),
// left: ScreenUtil().setWidth(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
CircleAvatar(
backgroundColor: Colors.transparent,
radius: 30.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(
45.0,
),
child: Image.network(
"https://images.pexels.com/photos/10181294/pexels-photo-10181294.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" ??
"",
fit: BoxFit.fill,
height: ScreenUtil().setHeight(72.0),
width: ScreenUtil().screenWidth,
filterQuality: FilterQuality.low,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null)
return child;
return Container(
height:
ScreenUtil().setHeight(72.0),
width: ScreenUtil().screenWidth,
color: Colors.grey,
);
},
errorBuilder:
(context, error, stackTrace) {
return SizedBox(
height:
ScreenUtil().setHeight(72.0),
width: ScreenUtil().screenWidth,
child: Container(
width: ScreenUtil().screenWidth,
),
);
},
),
),
),
Text("Name"),
Text("Place"),
],
),
),
],
),
],
),
),
),
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
headerCtx),
sliver: SliverPersistentHeader(
delegate: SliverAppBarDelegate(TabBar(
labelColor: Colors.blue,
unselectedLabelColor: Colors.black,
labelStyle: TextStyle(
fontSize: 15.0,
),
unselectedLabelStyle: TextStyle(
fontSize: 15.0,
),
labelPadding: EdgeInsets.zero,
indicatorColor: Colors.blue,
indicatorPadding: EdgeInsets.zero,
physics: NeverScrollableScrollPhysics(),
tabs: [
Tab(
text: "Tab 1",
),
Tab(
text: "Tab 2",
),
],
)),
pinned: false,
),
),
];
},
body: TabBarView(
children: [
/* Tab 1 */
Container(
color: Colors.white,
child: ListView.builder(
itemCount: 100,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Text("Index value: $index"),
);
},
),
),
/* Tab 2 */
Container(
color: Colors.white,
child: ListView.builder(
itemCount: 10,
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(4.0),
child: Text("Index value of Tab 2: $index"),
);
},
),
),
],
),
),
),
),
);
}
}
class SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
SliverAppBarDelegate(this.tabBars);
final TabBar tabBars;
#override
double get minExtent => 60.0;
#override
double get maxExtent => 60.0;
#override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
// shinkOffsetPerValue.value = shrinkOffset;
return new Container(
color: Colors.white,
child: Column(
children: [
tabBars,
],
),
);
}
#override
bool shouldRebuild(SliverAppBarDelegate oldDelegate) {
return false;
}
}

flutter A RenderFlex overflowed by 271 pixels on the bottom

Hello I am using SingleChildScrollView and I am getting this error 'A RenderFlex is overflowing with 271 pixels at the bottom'. I think it's because you're using the appBar's PreferredSize and tabBarview. Sorry for the long code.
A widget that uses a abbar tabbarView.
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Container(
color: Colors.black,
child: SafeArea(
child: Column(
children: [
TabBar(
indicatorColor: Colors.grey,
controller: this._tabController,
tabs: [
Tab(
text: 'MOVIE',
),
Tab(
text: 'TV',
),
],
),
],
)),
),
),
// bottom:
body: TabBarView(
controller: this._tabController,
children: [
Column(
children: [
search(),
this.movieName.isNotEmpty ? searchMovieTile() : Container(),
],
),
Column(
children: [
search(),
this.movieName.isNotEmpty ? searchTvTile() : Container(),
],
)
],
),
);
}
A widget that uses a SingleChildScrollView.
Widget searchMovieTile() {
return FutureBuilder(
future: this._searchController.searchMovie(movieName: this.movieName),
builder:
(BuildContext context, AsyncSnapshot<List<SearchModel>> snapshot) {
if (snapshot.hasData) {
return Consumer<SearchProvider>(
builder: (context, value, child) {
return snapshot.data!.isEmpty
? Container()
: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
child: GridView.count(
childAspectRatio: 2 / 3,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
crossAxisCount: 3,
children: List.generate(
snapshot.data!.length,
(index) => ClipRRect(
borderRadius: BorderRadius.circular(15.0),
child: snapshot.data![index].posterPath.isEmpty
? Container(
child: Center(
child: Text(
'Image preparation',
style: TextStyle(color: Colors.white),
),
),
)
: GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(builder:
(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (BuildContext
context) =>
MovieDetailProvider()),
ChangeNotifierProvider(
create:
(BuildContext context) =>
MovieVideoProvider()),
],
child: SearchMovieDetailScreen(
movieData:
snapshot.data![index]),
);
}));
},
child: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl:
'https://image.tmdb.org/t/p/original/${snapshot.data![index].posterPath}',
),
),
),
),
),
),
);
},
);
} else {
return Container();
}
},
);
}
A widget that uses a textfield keyboard.
Widget search() {
return Container(
padding: EdgeInsets.only(
left: 5.0,
top: 10.0,
right: 5.0,
bottom: 10.0,
),
child: Row(
children: [
Expanded(
flex: 6,
child: TextField(
onSubmitted: (String name) {
this.movieName = this._textEditingController.text;
print(this.movieName);
},
cursorColor: Colors.grey,
focusNode: this._focusNode,
style: TextStyle(
color: Colors.white,
fontSize: 15.0,
),
controller: this._textEditingController,
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey[900],
prefixIcon: Icon(
Icons.search,
color: Colors.grey,
size: 20.0,
),
suffixIcon: this._focusNode.hasFocus
? IconButton(
onPressed: () {
setState(() {
this._textEditingController.clear();
});
},
icon: Icon(
Icons.cancel,
size: 20.0,
color: Colors.grey,
),
)
: Container(),
hintText: 'Search',
hintStyle: TextStyle(color: Colors.grey),
labelStyle: TextStyle(color: Colors.white),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
),
borderRadius: BorderRadius.circular(10.0),
),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
),
borderRadius: BorderRadius.circular(10.0),
),
),
),
),
this._focusNode.hasFocus
? Expanded(
child: TextButton(
child: Text(
'cancel',
style: TextStyle(
fontSize: 13.0,
color: Colors.grey,
),
),
onPressed: () {
setState(() {
this._textEditingController.clear();
this._focusNode.unfocus();
});
},
))
: Expanded(flex: 0, child: Container())
],
),
);
}
Sorry for the low level of the question, but I'd appreciate it if you could answer :)
I think this problem is due to the given height to the container (child of SingleChildScrollView:
SingleChildScrollView(
child: Container(
**height: MediaQuery.of(context).size.height,**
child: GridView.count(
just remove it and let me know the result.
try : height: MediaQuery.of(context).size.height - 280,

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)
],
),
),
)),
),
))
],
));

Remove container from ListView Builder when clicked to remove

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