TextField don't resize my alertdialog - Flutter - 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
],
),
),
}),
)),
);

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.

renderflex overflowed error in modalbottomsheet in flutter when using keyboard

I am using a textfield in my modal bottom sheet. When I open the keyboard to type, it shows me error for renderflex overflowed. I used singlechildscrollview and isScrollControlled true, still error comes up. Any solutions?
return showModalBottomSheet(
context: context,
builder: (context) => Builder(
builder: (context) => SingleChildScrollView(
child: Container(
height: 350,
width: MediaQuery.of(context).size.width*0.9,
color: cardColor2,
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 5.0, horizontal: 10),
child: Column(
children: [
ValueListenableBuilder(
valueListenable: _image,
builder: (BuildContext context, File f, Widget? child) {
return SizedBox(
height: f.path!='' ? 180 : 280,
width: MediaQuery.of(context).size.width*0.9,
child: TextField(
decoration: InputDecoration(
hintText: 'Type your question here',
border: InputBorder.none,
),
),
);
},
),
ValueListenableBuilder(
valueListenable: _image,
builder: (BuildContext context, File f, Widget? child) {
return f.path!='' ? SizedBox(
width: 150.0,
height: 100.0,
child: Image.file(
_image.value,
fit: BoxFit.fill,
),
) : Container();
},
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Container(
height: 1,
color: tertiaryTextColor2,
width: double.infinity,
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(top: 13.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: () {
_onAlertPress(context);
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
'Add an image',
style: TextStyle(
color: backgroundColor2,
fontSize: 14,
),
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
),
SizedBox(
width: 10,
),
InkWell(
onTap: () {
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
child: Text(
'Post',
style: TextStyle(
color: backgroundColor2,
fontSize: 14,
),
),
decoration: BoxDecoration(
color: brandYellow,
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
),
],
),
),
),
],
),
),
],
),
),
),
),
isScrollControlled: true,
);
try to remove height of Container because the height is not enough for other child container or sizedbox
return showModalBottomSheet(
context: context,
builder: (context) => Builder(
builder: (context) => SingleChildScrollView(
child: Container(
height: 350, ---------------> remove this
width: MediaQuery.of(context).size.width*0.9,

How to stop GridView Builder refreshing the widget in Flutter

I am trying to get rid of this blinking/flashing of the widget presented in the image below. This is an Alert Dialog opened. Below it's a GridView Builder which creates images. The images are refreshing when I am trying to drag and resize the height of the container. I know setState it's called multiple times, but it doesn't matter, the widget should be immutable.
I changed the Grid View to a Stateless Widget, after trying a while using AutomaticKeepAliveClientMixin, wantToKeepAlive, but nothing is changing.
class GridViewBuilderOutiftTabTapped extends StatelessWidget {
final List<CleverCloset> myClassVar;
const GridViewBuilderOutiftTabTapped(this.myClassVar);
#override
Widget build(BuildContext context) {
return GridView.builder(
physics: const ScrollPhysics(),
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 5,
mainAxisSpacing: 5,
maxCrossAxisExtent: SizeConfig.screenWidth!/4,),
itemCount: myClassVar.length,
itemBuilder: (BuildContext ctx, index) {
return InkWell(
onTap: (){
},
child: Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20))
),
width: SizeConfig.screenWidth!/4,
height: SizeConfig.screenWidth!/4,
child: FittedBox(
child:
FadeInImage(
placeholder: const AssetImage('assets/placeholder.gif'),
image: CleverCloset.imageFromBase64String(myClassVar[index].getImage!).image,
fit: BoxFit.fill,
),
fit: BoxFit.fill,
),
),
);
}
);
}
}
void addOutfitPlannerDialog(BuildContext context) async{
await showGeneralDialog(
barrierColor: Colors.black.withOpacity(0.5),
transitionBuilder: (context, a1, a2, widget) {
return SafeArea(
child: Transform.scale(
scale: a1.value,
child: Opacity(
opacity: a1.value,
child: AlertDialog(
actionsPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
contentPadding: const EdgeInsets.fromLTRB(0, 20, 0, 0),
titlePadding: const EdgeInsets.fromLTRB(20, 20, 20, 0),
buttonPadding: const EdgeInsets.all(0),
title: _getBackAndSaveButtons(context),
backgroundColor: Colors.white,
insetPadding: const EdgeInsets.all(0),
content: SizedBox(
width: 100.w,
height: 100.h,
child: Stack(
children: [
Positioned(
top: 0,
child: Container(
width: SizeConfig.screenWidth,
height: 82.h,
color: const Color(0xff393432),
child: Container(
margin: EdgeInsets.fromLTRB(45, 8, 45, 10.h),
color: Colors.white,
),
),
),
Positioned(
bottom: 0,
child: StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return Container(
height: heightBottomOutfitPlanner,
decoration: const BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide( // <--- top side
color: Colors.grey,
width: 1.0,
),
),
),
width: 100.w,
child: Column(
children: [
SizedBox(
width: 100.w,
height: 8.h,
child: Row(
children: [
Expanded(
flex:7,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: outfitPlanerOrganizerEntriesList.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: (){
getOutfitPlannerTabTappedImages(outfitPlanerOrganizerEntriesList[index], setState);
},
child: Container(
padding: const EdgeInsets.fromLTRB(30, 0, 30, 0),
decoration: (outfitPlanerOrganizerEntriesList[index]==myOutfitPlannerTabTappedImages[0].closetOrganizer) || (outfitPlanerOrganizerEntriesList[index]=="To Buy" && myOutfitPlannerTabTappedImages[0].closetOrganizer==null) ? const BoxDecoration(
border: Border(
bottom: BorderSide( // <--- top side
color: Color(0xffE4BCB4),
width: 3.0,
),
),
):null,
child: Center(child: Text(outfitPlanerOrganizerEntriesList[index],
style: const TextStyle(
fontSize: 16,
))),
),
);
}
),
),
const SizedBox(width: 30),
Expanded(
flex:1,
child: Container(
decoration: const BoxDecoration(
border: Border(
left: BorderSide( // <--- top side
color: Colors.black,
width: 1.0,
),
),
),
child: GestureDetector(
onPanStart:(details) => _handleDrag(details, setState),
onPanUpdate:(details) => _handleUpdate(details, setState),
child: const Icon(Icons.drag_indicator,
size: 35,
),
)
),
),
],
),
),
const SizedBox(height: 5),
!isLoadingOutfitPlannerTabTappedImages ? Container(
width: 100.w,
margin: const EdgeInsets.fromLTRB(5, 0, 5, 0),
height: heightBottomOutfitPlanner-10.h,
child: GridViewBuilderOutiftTabTapped(myOutfitPlannerTabTappedImages),
) : Container(),
],
),
);
},
),
)
],
),
)
),
),
),
);
},
transitionDuration: const Duration(milliseconds: 100),
barrierDismissible: true,
barrierLabel: '',
context: context,
pageBuilder: (context, animation1, animation2) {return Container();}
);
}

setState() is not changing visibility

I'm making a pop-up dialog that asks for the user's password when he enters certain screens. This field should have an icon that changes the password visibility, but the state change is not being made, it only happens when I exit the dialog and open it again.
getConfirmationPortalKey() {
return showGeneralDialog(
transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
filter:
ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
child: FadeTransition(
child: child,
opacity: anim1,
),
),
context: context,
barrierDismissible: true,
barrierLabel: '',
barrierColor: Colors.black26,
transitionDuration: Duration(milliseconds: 200),
pageBuilder: (ctx, anim1, anim2) => AlertDialog(
content: Wrap(
alignment: WrapAlignment.center,
children: [
Wrap(
alignment: WrapAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText: 'Input Password',
suffixIconConstraints:
BoxConstraints.tightFor(height: 50, width: 50),
suffixIcon: Padding(
padding: EdgeInsets.only(top: 5),
child: SizedBox(
width: 24,
height: 24,
child: IconButton(
icon: passwordPortalVisible
? SvgPicture.asset(
"assets/svgs/icons/visibility_off.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
)
: SvgPicture.asset(
"assets/svgs/icons/visibility_on.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
),
onPressed: passwordVisible
? null
: () {
setState(() {
passwordVisible =
!passwordVisible;
});
},
),
),
),
),
controller: textEditingControllerKey,
keyboardType: TextInputType.number,
obscureText: !passwordVisible,
),
),
],
),
],
),
Padding(
padding:
EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
child: Row(
children: [
Expanded(
widget._myBtns.elevatedButton('OK
', (){UserLogin user = UserLogin();})
),
],
),
),
),
],
),
);
}
I think you will need to use StatefulBuilder inside the AlertDialog. I think this is because the dialog is an overlay and doesn't know about the widget it came from.
https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html
Below is your code edited:
getConfirmationPortalKey() {
return showGeneralDialog(
transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
filter:
ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
child: FadeTransition(
child: child,
opacity: anim1,
),
),
context: context,
barrierDismissible: true,
barrierLabel: '',
barrierColor: Colors.black26,
transitionDuration: Duration(milliseconds: 200),
pageBuilder: (ctx, anim1, anim2) => AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setDialogState) {
bool passwordVisible = false;
return Wrap(
alignment: WrapAlignment.center,
children: [
Wrap(
alignment: WrapAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(top: 10, bottom: 10),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
hintText: 'Input Password',
suffixIconConstraints:
BoxConstraints.tightFor(height: 50, width: 50),
suffixIcon: Padding(
padding: EdgeInsets.only(top: 5),
child: SizedBox(
width: 24,
height: 24,
child: IconButton(
icon: passwordPortalVisible
? SvgPicture.asset(
"assets/svgs/icons/visibility_off.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
)
: SvgPicture.asset(
"assets/svgs/icons/visibility_on.svg",
fit: BoxFit.scaleDown,
color: widget.colors.grey.shade400,
),
onPressed:() => setDialogState(() {
passwordVisible =
!passwordVisible;
});
),
),
),
),
controller: textEditingControllerKey,
keyboardType: TextInputType.number,
obscureText: !passwordVisible,
),
),
],
),
],
),
Padding(
padding:
EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10),
child: Row(
children: [
Expanded(
widget._myBtns.elevatedButton('OK
The problem is in this line:
onPressed: passwordVisible ? null : () {...}
Your onPressed event only calls the function if passwordVisible is false. Remove the ternary operator and it will call whether passwordVisible is true or false:
onPressed: () {...}

i need an horizontal and an vertical listView builder in the same page. horizontal at the top and vertical listview at the bottom

This is my code. i need an vertical listview at the top and an horizontal listview at the bottom. top listview shouldn't move with the bottom horizontal listview. My app freezes when i go to this page. i need to stop the main.dart and restart the app.i need a screen something like this. what should i do
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_ecommerce_app/common_widget/BottomNavBarWidget.dart';
import 'package:flutter_ecommerce_app/screens/ShoppingCartPage(p).dart';
class ExpanPrdCat extends StatefulWidget {
#override
_ExpanPrdCatState createState() => _ExpanPrdCatState();
}
class _ExpanPrdCatState extends State<ExpanPrdCat> {
bool isLoading = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
centerTitle: true,
title: Text('Vegetables'),
leading: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(Icons.arrow_back_ios_rounded),
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
color: Color(0xFF323232),
),
],
),
// bottomNavigationBar: BottomNavBarWidget(),
body: Container(
child: Column(children: [
Container(
height: 90,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
)),
),
),
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
]),
),
);
}
//==================================================
categoryItemsTabs(int index) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 3),
height: 40,
width: 120,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/broccoli-in-a-pile-royalty-free-image-593310638-1564523257.jpg"),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.4), BlendMode.darken)),
borderRadius: BorderRadius.circular(15)),
),
Container(
alignment: Alignment.center,
child: Text(
"Organic",
style: TextStyle(
color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
],
);
}
cartItems(int index) {
return Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: NetworkImage(
"https://economictimes.indiatimes.com/thumb/height-450,width-600,imgsize-111140,msid-72862126/potato-getty.jpg?from=mdr"),
fit: BoxFit.cover)),
),
Padding(
padding: const EdgeInsets.only(left: 15, top: 15),
child: Row(
children: [
Container(
width: 160,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"potato",
style: TextStyle(
fontSize: 25,
),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Text(
"malayalam name",
style: TextStyle(fontSize: 20),
overflow: TextOverflow.ellipsis,
),
SizedBox(
height: 5,
),
Column(
children: [
Text("price"),
],
)
],
),
),
],
),
),
Row(
children: [
Column(
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(05)),
height: 20,
child: DropdownButton<String>(
icon: Icon(Icons.keyboard_arrow_down),
underline: SizedBox(),
hint: Text("choose"),
items: ['1 Kg', '2Kg'].map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (_) {},
),
),
SizedBox(
height: 50,
),
Row(
children: [
Container(
height: 20,
width: 70,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.blue,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartScreen()),
);
},
child: Text(
" Add",
style: TextStyle(
color: Colors.white,
fontSize: 12,
fontWeight: FontWeight.w800),
),
),
)
],
)
],
),
],
)
],
),
),
),
)
],
);
}
}
Just add physics: ClampingScrollPhysics(), in your ListView.builder properties.
Example:
Container(
child: ListView.builder(
primary: false,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
)
You can do it using SingleChildScrollView :
for horizontal scrolling
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [],
),
),
for vertical scrolling
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [],
),
),
return Scaffold(
appBar: AppBar(....),
body: Container(
child: Column(children: [
Container(
height: 90,
width: MediaQuery.of(context).size.width,
child: Padding(
padding:
const EdgeInsets.only(top: 5, bottom: 5, left: 1, right: 1),
child: Container(
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return categoryItemsTabs(index);
},
itemCount: 5,
),
),
),
),
Expanded(
child: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return cartItems(index);
},
itemCount: 3,
),
),
)
]),
),
);