class _HomePageState extends State<HomePage> {
const SizedBox(height: 10),
Flexible(
child: StreamBuilder( //here the error i'm not so sure
stream: ref.snapshots(),
builder: (context,AsyncSnapshot<QuerySnapshot> snapshot){
if(snapshot.hasError){
return Center(
child: Text("Error:${snapshot.error}"),
);
}
return Scrollbar(
child: GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 15,
crossAxisSpacing: 15,
childAspectRatio: 2/3,
),
itemCount: snapshot.data!.docs.length,
itemBuilder: (context,index) {
final DocumentSnapshot documentSnapshot = snapshot.data!.docs[index];
return Card(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 0,
child: InkWell(
onTap: (){
Navigator.push(context, PageTransition(
type:PageTransitionType.leftToRight,
child: DetailPage(
image:documentSnapshot['image'], category:documentSnapshot['category'], name:documentSnapshot['name'], description:documentSnapshot['description'], price:documentSnapshot['price'],
)));
},
child: Container(
margin: const EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Ink.image(image: NetworkImage(documentSnapshot['image'][0]),
height: 90,
width: double.infinity,),
const SizedBox(height: 5,),
RichText(
textAlign: TextAlign.start,
text: TextSpan(
text: documentSnapshot['category'],
style: const TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 12.0)),
),
i used this code to display product on the homepage but it just glimpse appear the error of null value but i still can run and display the product then how i should fix the code. Logic error.
This is my full code of the streamBuilder
Related
I am trying to build a GridView that adjusts its height automatically according to the data provided. However, I am encountering a problem where an additional line (Top Discount of the Sale) appears after the rating bar for some products, but the space for that line is not reserved for other products that do not have it. As a result, I get a RenderFlex error when I try to implement this. How can I properly handle this situation?
GridView.builder(
padding: const EdgeInsets.all(12.0),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 6.0,
childAspectRatio: .60,
mainAxisSpacing: 6.0,
),
itemCount: state
.productListModel!.productModel!.length,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context, index) {
return InkWell(
splashFactory: NoSplash.splashFactory,
onTap: () {
Helper.push(
context,
ProductView(
productId: state.productListModel!
.productModel![index].sId,
));
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
alignment:
Alignment.bottomRight,
children: [
SizedBox(
width: WidgetStyles()
.theWidth(context),
height: WidgetStyles()
.theHeight(
context) /
4,
child: ImageView(
imageUrl: state
.productListModel!
.productModel![index]
.photos![0],
fit: BoxFit.contain,
),
),
Positioned(
right: 5,
bottom: 5,
child: Container(
padding:
const EdgeInsets
.all(8.0),
decoration:
const BoxDecoration(
color: Colors
.white,
shape: BoxShape
.circle),
child: InkWell(
onTap: () async {
String deepLink = await FirebaseDynamiclinkService
.createDynamicLink(
true,
state
.productListModel!
.productModel![
index]
.sId!);
log(deepLink);
Helper.shareProduct(
context,
'MyEComApp\n♥️ Proudly made for kerala\n\n${state.productListModel!.productModel![index].productname!}\n${state.productListModel!.productModel![index].seller!.organization!}\n*INR ${state.productListModel!.productModel![index].price!}*\n$deepLink',
state
.productListModel!
.productModel![
index]
.photos![0]);
},
child: const Icon(
Icons.share,
size: 18,
),
),
))
],
),
Helper.allowHeight(context, 5.0),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Flexible(
child: Text(
state
.productListModel!
.productModel![
index]
.productname!
.toString(),
overflow:
TextOverflow.clip,
maxLines: 1,
style:
const TextStyle(
fontSize: 13,
fontWeight:
FontWeight.w500,
),
),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Flexible(
child: Text(
state
.productListModel!
.productModel![
index]
.seller!
.organization!
.toString(),
overflow:
TextOverflow.clip,
style: TextStyle(
fontSize: 10,
color: AppColors
.greyAA,
fontWeight:
FontWeight.w500,
),
),
),
],
),
Row(
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
"\u{20B9} ${state.productListModel!.productModel![index].price!}",
style: TextStyle(
fontSize: 14,
color:
AppColors.black,
fontWeight:
FontWeight.bold,
),
),
Helper.allowWidth(
context, 15),
state
.productListModel!
.productModel![
index]
.price !=
state
.productListModel!
.productModel![
index]
.orginalprice
? Text(
"\u{20B9} ${state.productListModel!.productModel![index].orginalprice}",
maxLines: 1,
style:
const TextStyle(
overflow:
TextOverflow
.ellipsis,
decoration:
TextDecoration
.lineThrough,
fontSize: 14,
color:
Colors.red,
fontWeight:
FontWeight
.bold,
),
)
: const SizedBox
.shrink(),
],
),
const SizedBox(height: 8),
],
),
]),
);
},
// separatorBuilder: (context, index) {
// return const SizedBox(
// width: 10.0,
// );
// },
);
i would like to use StaggeredGridView plugins, this is my code that i've tried to use and it work properly that you might needed to create a responsive gridview that contain sort list of data
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: SizedBox(
width: double.infinity,
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.zero,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
mainAxisSpacing: 10,
crossAxisCount: 2,
crossAxisSpacing: 10,
itemCount: ...,
itemBuilder: (ctx, i) {
....
},
),
),
)
Tell me how to add widgets to the top and bottom of this list using GridView.builder?
I've tried using Column as well, but it doesn't work the way I wanted. What other options are there?
Widget build(BuildContext context)
{
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: Stack(
children: [
LayoutBuilder(
builder: (context, constraints) {
return GridView.builder(...);
}
),
Padding(child: TextField(...))
],
),
);
}
Try below code:
SingleChildScrollView(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Container(
width: double.infinity,
height: 50,
color: Colors.blue,
child: const Text(
'Your Apper Widget',
textAlign: TextAlign.center,
),
),
GridView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: 9,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3),
itemBuilder: (context, index) {
return const Card(
child: ListTile(
title: Text('userList'),
),
);
},
),
Container(
width: double.infinity,
height: 50,
color: Colors.red,
child: const Text(
'Your Lower Widget',
textAlign: TextAlign.center,
),
),
],
),
),
Try this code :
body: Column(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.red,
height: 48.0,
),
Expanded(
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (_, index) => const FlutterLogo(),
itemCount: 20,
),
),
Container(
color: Colors.green,
height: 48.0,
)
],
),
I'm a new flutter developer and I am using fl_chart to make some dashboards.
My charts are well displayed with the web window on full screen (screen 2) , and once I try to resize my window, at a certain time, pie charts become bigger than the parent container (screen 1)
Any idea how should I solve the issue ?
Expanded(
child: Scaffold(
appBar: AppBar(
automaticallyImplyLeading:
MediaQuery.of(context).size.width < 600,
leading: IconButton(
color: Color(0xff2A3F54),
icon: Icon(FontAwesomeIcons.chartLine),
onPressed: () {
//
}),
title: Text('Dashboard 2022', style: TextStyle(
color: Color(0xff2A3F54)
)),
),
body: Container(
padding: EdgeInsets.all(12.0),
child: GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
childAspectRatio: 2,
),
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(12.0),
child: _pages[index],
);
},
),
),
),
),
piechart.dart build method :
Widget build(BuildContext context) {
return FutureBuilder(
future: _getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Card(
color: Colors.white,
child: Column(
children: <Widget>[
SizedBox(
width: double.infinity,
child: Container(
padding:
EdgeInsets.only(left: 20.0, top: 8.0, bottom: 8.0),
child: //(this.title!= null) ?
Text(
getTitle(),
style:
TextStyle(color: Color(0xff2A3F54), fontSize: 16),
textAlign: TextAlign.left,
),
),
),
const Divider(
height: 4,
thickness: 1,
indent: 20,
endIndent: 20,
color: Color(0xffB0BEC5),
),
Expanded(
child: Row(children: <Widget>[
Expanded(
child: PieChart(
PieChartData(
startDegreeOffset: 180,
borderData: FlBorderData(
show: false,
),
sectionsSpace: 1,
centerSpaceRadius: 0,
sections: showingSections(snapshot.data)),
),
),
const SizedBox(
width: 40,
),
showingPieChartIndicator(snapshot.data),
]),
)
],
),
//),
);
} else
return Center(child: CircularProgressIndicator());
});
}
I have a ListView that is seperated by a divider and is called as shown below.
I have called all the elements however the last tile gets cut on my screen. I've tried adding the SliverPadding around the List but it doesn't help and crops the list even more.
This is the code for my ListView:
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 80.0),
child: CustomScrollView(slivers: <Widget>[
SliverToBoxAdapter(
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height * 0.09,
bottom: MediaQuery.of(context).size.height * 0.015,
left: 18.0),
child: Text("Puppies",
style: khomeStyle.copyWith(color: kOrange, fontSize: 27)),
),
),
SliverFillRemaining(
child: ListView.separated(
itemCount: 10,
//shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
//padding: EdgeInsets.all(0),
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
isThreeLine: false,
leading: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
child: Image.network(
'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
),
),
title: Row(
children: <Widget>[
Text(
"Helllo",
style: khomeStyle.copyWith(
fontSize: 17,
color: kOrange,
fontWeight: FontWeight.w600),
),
],
),
subtitle: Text(
'This is a message',
style: khomeStyle.copyWith(
fontSize: 15,
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.w300),
));
}),
),
]),
),
],
),
);
}
This is what the ListView looks like:
https://i.stack.imgur.com/vyL2x.png
If you are not looking for Slivers, try below code. this will scroll till last item and nothing will be cropped.
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(top: 80.0),
child: SingleChildScrollView(
child: ListView.separated(
itemCount: 10,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
separatorBuilder: (BuildContext context, int index) {
return Divider();
},
itemBuilder: (BuildContext context, int index) {
return ListTile(
isThreeLine: false,
leading: ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
child: Image.network(
'https://www.thesprucepets.com/thmb/LhWrTxh5MaOb_6IY-fgLxH75SI8=/2121x1193/smart/filters:no_upscale()/golden-retriever-puppy-in-grass-923135452-5c19243546e0fb000190737c.jpg'),
),
),
title: Row(
children: <Widget>[
Text(
"Helllo",
style: khomeStyle.copyWith(
fontSize: 17,
color: kOrange,
fontWeight: FontWeight.w600),
),
],
),
subtitle: Text(
'This is a message',
style: khomeStyle.copyWith(
fontSize: 15,
color: Colors.black.withOpacity(0.7),
fontWeight: FontWeight.w300),
));
}),
),
),
);
}
Here is my code:
GridView.count(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
crossAxisCount: 3,
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
primary: false,
shrinkWrap: true,
children: tempSearchStore.map((element) {
return InkWell(
onTap: (){
print(element['ID'].toString());
Navigator.push(context, MaterialPageRoute(
builder: (context) => SearchResultScreen(ID: element['ID'],Pin:widget.pin),
));
},
child: Container(
height: 20,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
elevation: 5.0,
child: Container(
height: 20,
child: Center(
child: Text(element['Name'],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
)
)
)
),
),
);
}).toList()
)
I want to change the height and width of my card but I'm not able to do so, even I also tried wrapping Card into Container and give height and width but failed. Only I'm able to change by changing the value of CrossAxisCount in GridView and that also changes according to itself.
Here is my Image:
I want it's height to be more and width is Okay.
The key is childAspectRatio. This value is used to determine the layout in GridView. In order to get the desired aspect, you have to set it to the (itemWidth / itemHeight).
GridView.count(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
crossAxisCount: 3,
childAspectRatio: (itemWidth / itemHeight),
crossAxisSpacing: 4.0,
mainAxisSpacing: 4.0,
primary: false,
shrinkWrap: true,
children: tempSearchStore.map((element) {
return InkWell(
onTap: (){
print(element['ID'].toString());
Navigator.push(context, MaterialPageRoute(
builder: (context) => SearchResultScreen(ID: element['ID'],Pin:widget.pin),
));
},
child: Container(
height: 20,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
elevation: 5.0,
child: Container(
height: 20,
child: Center(
child: Text(element['Name'],
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 20.0,
),
)
)
)
),
),
);
}).toList()
)
and if this doesn't work for you look at this package: https://pub.dartlang.org/packages/flutter_staggered_grid_view