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

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

Related

The method 'OutlineButton' isn't defined

I know the OutlineButton is Old version
and New version is OutlinedButton.
When I turn into new one then show error in the another padding ,color, shape borderSide.
Please see my screenshot
My project: environment:
sdk: ">=2.11.0 <3.0.0"
module:
androidX: true
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
And My Insttaled : [√] Flutter Channel stable, 3.0.5,
import 'package:cached_network_image/cached_network_image.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mvc_pattern/mvc_pattern.dart';
import '../../generated/l10n.dart';
import '../controllers/product_controller.dart';
import '../elements/AddToCartAlertDialog.dart';
import '../elements/CircularLoadingWidget.dart';
import '../elements/OptionItemWidget.dart';
import '../elements/ReviewsListWidget.dart';
import '../elements/ShoppingCartFloatButtonWidget.dart';
import '../helpers/helper.dart';
import '../models/media.dart';
import '../models/route_argument.dart';
import '../repository/user_repository.dart';
// ignore: must_be_immutable
class ProductWidget extends StatefulWidget {
RouteArgument routeArgument;
ProductWidget({Key key, this.routeArgument}) : super(key: key);
#override
_ProductWidgetState createState() {
return _ProductWidgetState();
}
}
class _ProductWidgetState extends StateMVC<ProductWidget> {
ProductController _con;
_ProductWidgetState() : super(ProductController()) {
_con = controller;
}
#override
void initState() {
_con.listenForProduct(productId: widget.routeArgument.id);
_con.listenForCart();
_con.listenForFavorite(productId: widget.routeArgument.id);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: _con.scaffoldKey,
body: _con.product == null || _con.product?.image == null || _con.product?.images == null
? CircularLoadingWidget(height: 500)
: RefreshIndicator(
onRefresh: _con.refreshProduct,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 125),
padding: EdgeInsets.only(bottom: 15),
child: CustomScrollView(
primary: true,
shrinkWrap: false,
slivers: <Widget>[
SliverAppBar(
backgroundColor: Theme.of(context).accentColor.withOpacity(0.9),
expandedHeight: 275,
elevation: 0,
iconTheme: IconThemeData(color: Theme.of(context).primaryColor),
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.parallax,
background: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
CarouselSlider(
options: CarouselOptions(
autoPlay: true,
autoPlayInterval: Duration(seconds: 7),
height: 300,
enableInfiniteScroll: false,
viewportFraction: 1.0,
onPageChanged: (index, reason) {
setState(() {
_con.current = index;
});
},
),
items: _con.product.images.map((Media image) {
return Builder(
builder: (BuildContext context) {
return CachedNetworkImage(
height: 300,
width: double.infinity,
fit: BoxFit.cover,
imageUrl: image.url,
placeholder: (context, url) => Image.asset(
'assets/img/loading.gif',
fit: BoxFit.cover,
width: double.infinity,
height: 300,
),
errorWidget: (context, url, error) => Icon(Icons.error_outline),
);
},
);
}).toList(),
),
Visibility(
visible: _con.product.images.length > 1,
child: Container(
//margin: EdgeInsets.symmetric(vertical: 22, horizontal: 42),
child: Row(
mainAxisSize: MainAxisSize.min,
children: _con.product.images.map((Media image) {
return Container(
width: 20.0,
height: 5.0,
margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 2.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
color: _con.current == _con.product.images.indexOf(image)
? Theme.of(context).accentColor
: Theme.of(context).primaryColor.withOpacity(0.4)),
);
}).toList(),
),
),
),
],
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
child: Wrap(
runSpacing: 8,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
_con.product?.name ?? '',
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: Theme.of(context).textTheme.headline3,
),
Text(
_con.product?.market?.name ?? '',
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: Theme.of(context).textTheme.bodyText2,
),
],
),
),
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Helper.getPrice(
_con.product.price,
context,
style: Theme.of(context).textTheme.headline2,
),
_con.product.discountPrice > 0
? Helper.getPrice(_con.product.discountPrice, context,
style: Theme.of(context).textTheme.bodyText2.merge(TextStyle(decoration: TextDecoration.lineThrough)))
: SizedBox(height: 0),
],
),
),
],
),
Row(
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 3),
decoration: BoxDecoration(
color: Helper.canDelivery(_con.product.market) && _con.product.deliverable ? Colors.green : Colors.orange,
borderRadius: BorderRadius.circular(24)),
child: Helper.canDelivery(_con.product.market) && _con.product.deliverable
? Text(
S.of(context).deliverable,
style: Theme.of(context).textTheme.caption.merge(TextStyle(color: Theme.of(context).primaryColor)),
)
: Text(
S.of(context).not_deliverable,
style: Theme.of(context).textTheme.caption.merge(TextStyle(color: Theme.of(context).primaryColor)),
),
),
Expanded(child: SizedBox(height: 0)),
Visibility(
visible: _con.product.capacity != null && _con.product.capacity != "null",
child: Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 3),
decoration: BoxDecoration(color: Theme.of(context).focusColor, borderRadius: BorderRadius.circular(24)),
child: Text(
_con.product.capacity + " " + _con.product.unit,
style: Theme.of(context).textTheme.caption.merge(TextStyle(color: Theme.of(context).primaryColor)),
)),
),
SizedBox(width: 5),
Visibility(
visible: _con.product.packageItemsCount != null && _con.product.packageItemsCount != "null",
child: Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 3),
decoration: BoxDecoration(color: Theme.of(context).focusColor, borderRadius: BorderRadius.circular(24)),
child: Text(
_con.product.packageItemsCount + " " + S.of(context).items,
style: Theme.of(context).textTheme.caption.merge(TextStyle(color: Theme.of(context).primaryColor)),
)),
),
],
),
Divider(height: 20),
Text(Helper.skipHtml(_con.product.description)),
if (_con.product.optionGroups.isNotEmpty)
ListTile(
dense: true,
contentPadding: EdgeInsets.symmetric(vertical: 10),
leading: Icon(
Icons.add_circle_outline,
color: Theme.of(context).hintColor,
),
title: Text(
S.of(context).options,
style: Theme.of(context).textTheme.subtitle1,
),
subtitle: Text(
S.of(context).select_options_to_add_them_on_the_product,
style: Theme.of(context).textTheme.caption,
),
),
ListView.separated(
padding: EdgeInsets.all(0),
itemBuilder: (context, optionGroupIndex) {
var optionGroup = _con.product.optionGroups.elementAt(optionGroupIndex);
print("SIZE:::${_con.product.options.where((option) => option.optionGroupId == optionGroup.id).length}");
return Wrap(
children: <Widget>[
ListTile(
dense: true,
contentPadding: EdgeInsets.symmetric(vertical: 0),
leading: Icon(
Icons.add_circle_outline,
color: Theme.of(context).hintColor,
),
title: Text(
optionGroup.name,
style: Theme.of(context).textTheme.subtitle1,
),
),
ListView.separated(
padding: EdgeInsets.all(0),
itemBuilder: (context, optionIndex) {
return OptionItemWidget(
option: _con.product.options.where((option) => option.optionGroupId == optionGroup.id).elementAt(optionIndex),
onChanged: _con.calculateTotal,
);
},
separatorBuilder: (context, index) {
return SizedBox(height: 20);
},
itemCount: _con.product.options.where((option) => option.optionGroupId == optionGroup.id).length,
primary: false,
shrinkWrap: true,
),
],
);
},
separatorBuilder: (context, index) {
return SizedBox(height: 20);
},
itemCount: _con.product.optionGroups.length,
primary: false,
shrinkWrap: true,
),
/*ListTile(
dense: true,
contentPadding: EdgeInsets.symmetric(vertical: 10),
leading: Icon(
Icons.recent_actors_outlined,
color: Theme.of(context).hintColor,
),
title: Text(
S.of(context).reviews,
style: Theme.of(context).textTheme.subtitle1,
),
),
ReviewsListWidget(
reviewsList: _con.product.productReviews,
),*/
],
),
),
),
],
),
),
Positioned(
top: 32,
right: 20,
child: _con.loadCart
? SizedBox(
width: 60,
height: 60,
child: RefreshProgressIndicator(),
)
: ShoppingCartFloatButtonWidget(
iconColor: Theme.of(context).primaryColor,
labelColor: Theme.of(context).hintColor,
routeArgument: RouteArgument(param: '/Product', id: _con.product.id),
),
),
Positioned(
bottom: 0,
child: Container(
height: 150,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.only(topRight: Radius.circular(20), topLeft: Radius.circular(20)),
boxShadow: [BoxShadow(color: Theme.of(context).focusColor.withOpacity(0.15), offset: Offset(0, -2), blurRadius: 5.0)]),
child: SizedBox(
width: MediaQuery.of(context).size.width - 40,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Text(
S.of(context).quantity,
style: Theme.of(context).textTheme.subtitle1,
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
onPressed: () {
_con.decrementQuantity();
},
iconSize: 30,
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
icon: Icon(Icons.remove_circle_outline),
color: Theme.of(context).hintColor,
),
Text(_con.quantity.toString(), style: Theme.of(context).textTheme.subtitle1),
IconButton(
onPressed: () {
_con.incrementQuantity();
},
iconSize: 30,
padding: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
icon: Icon(Icons.add_circle_outline),
color: Theme.of(context).hintColor,
)
],
),
],
),
SizedBox(height: 10),
Row(
children: <Widget>[
Expanded(
child: _con.favorite?.id != null
? OutlineButton(
onPressed: () {
_con.removeFromFavorite(_con.favorite);
},
padding: EdgeInsets.symmetric(vertical: 14),
color: Theme.of(context).primaryColor,
shape: StadiumBorder(),
borderSide: BorderSide(color: Theme.of(context).accentColor),
child: Icon(
Icons.favorite,
color: Theme.of(context).accentColor,
))
: MaterialButton(
elevation: 0,
onPressed: () {
if (currentUser.value.apiToken == null) {
Navigator.of(context).pushNamed("/Login");
} else {
_con.addToFavorite(_con.product);
}
},
padding: EdgeInsets.symmetric(vertical: 14),
color: Theme.of(context).accentColor,
shape: StadiumBorder(),
child: Icon(
Icons.favorite_outline,
color: Theme.of(context).primaryColor,
)),
),
SizedBox(width: 10),
Stack(
fit: StackFit.loose,
alignment: AlignmentDirectional.centerEnd,
children: <Widget>[
SizedBox(
width: MediaQuery.of(context).size.width - 110,
child: MaterialButton(
elevation: 0,
onPressed: () {
if (currentUser.value.apiToken == null) {
Navigator.of(context).pushNamed("/Login");
} else {
if (_con.isSameMarkets(_con.product)) {
_con.addToCart(_con.product);
} else {
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AddToCartAlertDialogWidget(
oldProduct: _con.carts.elementAt(0)?.product,
newProduct: _con.product,
onPressed: (product, {reset: true}) {
return _con.addToCart(_con.product, reset: true);
});
},
);
}
}
},
padding: EdgeInsets.symmetric(vertical: 14),
color: Theme.of(context).accentColor,
shape: StadiumBorder(),
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Text(
S.of(context).add_to_cart,
textAlign: TextAlign.start,
style: TextStyle(color: Theme.of(context).primaryColor),
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Helper.getPrice(
_con.total,
context,
style: Theme.of(context).textTheme.headline4.merge(TextStyle(color: Theme.of(context).primaryColor)),
),
)
],
),
],
),
SizedBox(height: 10),
],
),
),
),
)
],
),
),
);
}
}
The outlinedButton doesnt have the properties like color borderside etc you can give the color and border using style property like.
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
Add the following style to your outlinedButton it will work for you.
style: ButtonStyle(
padding: MaterialStateProperty.all(
EdgeInsets.symmetric(vertical: 14),
),
backgroundColor:
MaterialStateProperty.all(Theme.of(context).primaryColor),
shape: MaterialStateProperty.all(
StadiumBorder(),
),
),

Error due to the fact that the widget is full

I ran into a problem that the content does not fit in the widget because of this, an error occurs from the overflow of the widget. Please tell me how can I solve this problem? I want only the list of languages ​​to scroll, not the whole screen. I've tried different options but haven't been able to resolve it yet. If anyone knows a solution to this problem, please let me know. I will be grateful.
Padding(
padding: const EdgeInsets.only(left: 24, right: 24),
child: Column(
children: [
const SizedBox(height: 178),
const BackStepWidget(text: 'Select Language'),
const SizedBox(height: 30),
SizedBox(
width: size.width,
child: Card(
color: constants.Colors.greyDark,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24)),
child: Column(
children: [
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.only(left: 16, right: 20),
child: Row(
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(7),
filled: true,
fillColor: constants.Colors.greyLight,
hintText: 'Search',
hintStyle:
TextStyle(color: constants.Colors.white),
prefixIcon: Icon(
Icons.search,
color: constants.Colors.white,
),
suffixIcon: Icon(Icons.keyboard_voice,
color: constants.Colors.white),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10)),
)),
)),
const SizedBox(width: 14),
const Text('Cancel',
style: constants.Styles.smallBookTextStyleWhite)
],
),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 16),
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.separated(
// physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
separatorBuilder: ((context, index) => Divider(
height: 2,
color: constants.Colors.white.withOpacity(0.2))),
itemCount: language.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.only(top: 9, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
language[index],
style:
constants.Styles.smallBoldTextStyleWhite,
),
Text(
language[index],
style: constants
.Styles.smallerBookTextStyleWhite,
),
],
),
// ),
),
),
),
),
],
),
),
)
],
),
);
Change your outer column widget to Listview and also set its physics property to NevenScrollable widget. The Internal list view will remain the same.
Padding(
padding: const EdgeInsets.only(left: 24, right: 24),
child: ListView(
physics : NeverScrollablePhysics(),
shrinkWrap : true,
children: [
const SizedBox(height: 178),
const BackStepWidget(text: 'Select Language'),
const SizedBox(height: 30),
SizedBox(
width: size.width,
child: Card(
color: constants.Colors.greyDark,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24)),
child: ListView(
physics : NeverScrollablePhysics(),
shrinkWrap : true,
children: [
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.only(left: 16, right: 20),
child: Row(
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(7),
filled: true,
fillColor: constants.Colors.greyLight,
hintText: 'Search',
hintStyle:
TextStyle(color: constants.Colors.white),
prefixIcon: Icon(
Icons.search,
color: constants.Colors.white,
),
suffixIcon: Icon(Icons.keyboard_voice,
color: constants.Colors.white),
border: OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10)),
)),
)),
const SizedBox(width: 14),
const Text('Cancel',
style: constants.Styles.smallBookTextStyleWhite)
],
),
),
const SizedBox(height: 14),
Padding(
padding: const EdgeInsets.only(left: 16),
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.separated(
shrinkWrap: true,
separatorBuilder: ((context, index) => Divider(
height: 2,
color: constants.Colors.white.withOpacity(0.2))),
itemCount: language.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.only(top: 9, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
language[index],
style:
constants.Styles.smallBoldTextStyleWhite,
),
Text(
language[index],
style: constants
.Styles.smallerBookTextStyleWhite,
),
],
),
// ),
),
),
),
),
],
),
),
)
],
),
);

Flutter: How to implement State Management onPressed

I have no idea how to change the state of my grid view when a button is clicked can someone help me with this?
So, I have this textButton that should change the state of my grid view when clicked but I have no idea how to implement it. Below is my code.
From the image attached, when water, food, school etc are clicked the gridview should only provide specific organizations..
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(20.0),
child: ListView(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Container(
padding: const EdgeInsets.only(left: 20, right: 20),
height: SizeConfig.screenHeight / 6.5,
color: kPrimaryColor,
child: Row(
children: [
const CircleAvatar(
radius: 40,
backgroundImage: AssetImage(
'assets/images/SDG Wheel_Transparent_WEB.png'),
),
const SizedBox(
width: 10,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"Donate Today!",
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontFamily: "Quicksand",
decoration: TextDecoration.none),
),
SizedBox(
height: 5,
),
Text(
"Small contributions quickly\nadd up if enough people\ntake up the cause.",
style: TextStyle(
color: Colors.white,
fontSize: 12,
decoration: TextDecoration.none),
),
],
),
Expanded(child: Container()),
Container(
width: 70,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Color(0xFFf3fafc)),
child: Center(
child: IconButton(
icon: SvgPicture.asset("assets/icons/give.svg"),
onPressed: () {},
color: Color(0xFF69c5df),
//size: 30,
),
),
),
],
),
),
),
SizedBox(
height: 30,
),
const Align(
alignment: Alignment.centerLeft,
child: Text(
"Select your desired organisation to donate.",
style: TextStyle(
color: Color(0xFF1f2326),
fontSize: 15,
decoration: TextDecoration.none),
),
),
const Divider(color: Colors.black38),
//here is the textButton
Container(
height: 50,
width: double.infinity,
color: Colors.white,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
for (int i = 0; i < categories.length; i++)
Container(
width: 90,
padding: const EdgeInsets.only(left: 4.0, right: 4.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: kPrimaryColor,
),
child: TextButton(
onPressed: () {}, //here i need a way to change the state of
the grid view
child: Text(categories[i],
style: TextStyle(color: Colors.white)),
),
),
),
],
),
),
),
const Divider(color: Colors.black38),
const SizedBox(
height: 30,
),
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: _listItem
.map((item) => Card(
color: Colors.transparent,
elevation: 0,
child: GestureDetector(
onTap: () => Navigator.pushNamed(context, item.route),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(item.image),
fit: BoxFit.cover)),
)),
))
.toList(),
)
],
),
);
}
}
Thanks very much.
The simplest things to do is to Filter your items based on selection by using the .where of Iterable https://api.flutter.dev/flutter/dart-core/Iterable/where.html
Basically when you push your Text button you store the type in a variable (you need a StatefulWidget for that)
then you can use where to filter your _listItem
GridView.count(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
children: _listItem
.where((element) {
//if your element is included return true else false
return true;
})
.map((item) => Card(
color: Colors.transparent,
elevation: 0,
child: GestureDetector(
onTap: () => Navigator.pushNamed(context, item.route),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(item.image),
fit: BoxFit.cover)),
)),
))
.toList(),
)
You can check a sample here for the behavior on the button:
https://dartpad.dev/49f2e4818d933c75a0e6ed1d47a836d2

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

Flutter grid Responsive issue on different screens

How would I manage the responsiveness on different devices since the app works great on emulator Pixel 3 XL, but on real device such as Samsung - SM-G991B with screen resolution 1080.0 X 2256.0
as you can see all images are overlapping text does not looks good, maybe i am doing something wrong with the code..
How i can manage responsiveness on different devices ?
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: ListView(
physics: PageScrollPhysics(),
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: kDefaultPadding, vertical: kDefaultPadding),
child: Text('Меню', style: kStyleHeaders),
),
SizedBox(
height: 10.0,
),
Builder(builder: (_) {
if (_isLoading) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 200.0),
child: Center(child: null),
);
}
if (_apiResponse.error) {
return Center(child: Text(_apiResponse.errorMessage));
}
if (_apiResponse.data.length == 0) {
return Padding(
padding: EdgeInsets.symmetric(vertical: 200.0),
child: Center(
child: Text(
'No products has been found..!',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
fontFamily: 'BuffetBold',
color: Colors.black,
),
),
),
);
}
return GridView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: _apiResponse.data.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.72,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
itemBuilder: (context, index) {
var product = _apiResponse.data[index];
return CachedNetworkImage(
imageUrl: product.imageMedium,
imageBuilder: (context, imageProvider) => Column(
children: [
GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetail(
id: product.id,
title: product.title,
description: product.description,
structure: product.structure,
imageLarge: product.imageLarge,
weight: product.weight,
hasDiscount: product.hasDiscount,
priceBefore:
double.parse(product.priceBefore),
priceAfter:
double.parse(product.priceAfter),
isHit: product.isHit,
isNew: product.isNew,
isSpicy: product.isSpicy,
isRecommended: product.isRecommended,
isVegetarian: product.isVegetarian,
attributes: product.attributes),
),
),
child: Container(
alignment: Alignment(-1, 0.9),
child: (product.isNew == '1')
? Image.asset(
'assets/images/new.png',
width: 60.0,
)
: null,
height: 165.0,
width: 165.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
boxShadow: [
BoxShadow(
color: Colors.grey,
blurRadius: 2.0,
spreadRadius: 0,
offset: Offset(0, 2))
],
),
),
),
Padding(
padding: EdgeInsets.symmetric(
vertical: 10.0, horizontal: 10.0),
child: Row(
children: [
Flexible(
child: Text(product.title,
style: kStyleTitle))
],
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Text(
product.weight != null
? product.weight
: '',
style: kStyleWeight),
Text(
product.hasDiscount != '0'
? product.priceBefore
: '',
style: kStyleDiscount),
Container(
margin: EdgeInsets.symmetric(
horizontal: 3, vertical: 0),
height: 30.0,
width: 70.0,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(20.0),
),
color: kPrimaryColor,
textColor: Colors.white,
padding:
EdgeInsets.symmetric(horizontal: 5.0),
onPressed: () {
// ... Todo
context.read<OrderNotify>().addOrder(
CartOrder(
productId: product.id,
product: product,
qty: 1,
price: hasDiscount(product)),
);
},
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(hasDiscount(product),
style: kStylePrice),
Icon(
FontAwesomeIcons.rubleSign,
size: 13.0,
color: Colors.white,
)
],
),
),
),
],
),
),
],
),
placeholder: (context, url) => Center(
child: CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation(Color(0xffB81F33)),
),
),
errorWidget: (context, url, error) => Icon(
Icons.error,
size: 40.0,
color: Theme.of(context).primaryColor,
),
);
},
);
}),
],
),
],
),
),
);
}
On your first container you don't have a rendered size, try to give a size to your first container, not infinity and not maxFinite size.