How can I know if my QuerySnapshot have some register? Flutter - flutter

This is my code
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
floating: true,
expandedHeight: 200.0,
title: AppAbar(),
flexibleSpace: FlexibleSpaceBar(
background: FlexibleAppBar(),
),
leading: Icon(Icons.menu, color: Colors.white, size: 30.0,),
),
SliverList(
delegate: SliverChildListDelegate(
List.generate(6, (idx) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
elevation: 3,
margin: EdgeInsets.symmetric(horizontal: 15),
child: Consumer<TimeSheetRepository>(
builder: (BuildContext context, TimeSheetRepository db, Widget child) {
_queryWeekYear = db.queryByMonthYear(
12, 2020);
return StreamBuilder(
stream: _queryWeekYear,
builder: (context, snapshot){
if(!snapshot.hasData || snapshot.data.documents == null) return CircularProgressIndicator();
return ListTile(
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('${_numWeeks[idx]}'),
],
),
title: Container(
height: MediaQuery.of(context).size.height/16,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: 7,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
Text('${(DateFormat('EEEE').format(firstweek[index]).substring(0, 1))}',style: TextStyle(fontSize: 12.0, color: Colors.black54)),
],
),
SizedBox(width: 28.0),
],
),
]
),
);
}
),
),
subtitle: Container(
height: MediaQuery.of(context).size.height/20,
child: ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot docSnapshot = snapshot.data.documents[index];
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
Text('${docSnapshot['date'].toString()}',style: TextStyle(fontSize: 12.0, color: Colors.black54)),
**// HERE I'M TRYING TO PUT THE DATE (IF EXISTS IN MY QUERY) BUT I NEED PUT IT IN THE CORRECT DAY IN MY CARD**
],
),
SizedBox(width: 28.0),
],
),
]
);
}
)
),
trailing: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
decoration: BoxDecoration(
color: Theme.of(context).primaryColorLight.withOpacity(0.2),
borderRadius: BorderRadius.circular(5.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text( "148", style: TextStyle(color: Colors.blue.shade800, fontWeight: FontWeight.w500, fontSize: 18.0),
),
),
),
],
),
);
}
);
}
),
),
);
})
),
),
],
),
);
I built a card, inside I have a listview.buider making a days of the weeks, and I have my Stream with QuerySnapshot with some days. I'm trying to put in my widget day, the same day that I have in my QuerySnapshot.
How can I get a specify date from my query?
I did some changes, but doesn't works.
I need to find inside my QuerySnapshot if X day is there, if not continue next

Related

How make something fixed position during scroll in Flutter

I'm up to making a screen like on the pic
I'd like to add scroll for gridview, but the trouble now is I don't really understand how to achieve that.
When I wrap Grid with SingleChildGridView, I've got an error that bottom overflowed. Example is on the second screen:
Obviously, it's happening as the GridView is a part of Column which causes the error. But how can I find a wayaround to avoid wrapping the column with let's say singlechildscrollview and at the same time making scrollable only GridView ?
Here is my code:
Scaffold(
appBar: HomeAppBar(),
bottomNavigationBar: CustomNavBar(),
backgroundColor: Colors.white,
body: Padding(
padding: const EdgeInsets.only(left: 10, right: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Hemendra',
style: Theme.of(context).textTheme.displaySmall
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Welcome to Laza.',
style: Theme.of(context).textTheme.bodyMedium
),
),
Searchbox(),
BlocBuilder<ProductBloc, ProductState>(
builder: (context, state) {
if (state is ProductLoaded) {
return Padding(
padding: const EdgeInsets.only(top: 15.0),
child: SingleChildScrollView(
child: GridView.builder(
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
mainAxisSpacing: 10,
crossAxisSpacing: 10,
mainAxisExtent: 300,
crossAxisCount: 2,
),
itemCount: state.products.length,
itemBuilder: (BuildContext ctx, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Stack(
children: [
GestureDetector(
onTap: () {
BlocProvider.of<ProductDetailsBloc>(
context)
.add(ProductDetailsEvent(
state.products[index]));
Navigator.pushNamed(
context, '/product_details');
},
child: Container(
height: 240,
child: Image.network(
state.products[index].imageUrl, fit: BoxFit.fill,),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
icon: Image(
image: AssetImage('heart.png'),
),
onPressed: () {},
),
],
),
],
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 5),
child: Row(
children: [
Expanded(
child: Text(
maxLines: 2,
state.products[index].name,
style: Theme.of(context).textTheme.bodySmall
),
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
maxLines: 2,
"\$" +
state.products[index].price
.toString(),
style: TextStyle(
color: HexColor('1D1E20'),
fontWeight: FontWeight.w600),
),
],
))
],
),
],
);
},
),
),
);
}
return Center(
child: CircularProgressIndicator(),
);
},
)
],
),
),
);
}
}
remove SingleChildScrollView and warp you BlocBuilder with Expanded widget .
so you code widget inside Scaffold body like this
Column(
children: [
searchBox(),
SizedBox(height:70, child: horizontalBrandList()),
Expanded(child: BlocBuilder(...))
],
)
created code similar UI code for better understanding update your code accordingly:
Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//SEARCH BAR
const TextField(decoration: InputDecoration(hintText: "Search")),
const SizedBox(height: 12),
// HORIZONTAL LIST VIEW
SizedBox(
height: 50,
child: ListView(
scrollDirection: Axis.horizontal,
children: List.generate(
10,
(i) => Container(
width: 50,
color: Colors.accents[i % 16],
alignment: Alignment.center,
child: Text('$i'),
),
),
),
),
const SizedBox(height: 12),
// GRID LISTVIEW
Expanded(
child: GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: MediaQuery.of(context).size.width * 0.5,
childAspectRatio: 0.8,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: 20,
itemBuilder: (BuildContext ctx, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(15)),
child: Center(child: Text(index.toString())),
);
},
),
)
],
),
)
You are adding ListView inside Column so You need to wrap with with Expanded Widget. in ListView contains own ScrollController so no need to wrap it with external SingleChildScrollView

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

Flutter- Gridview inside listview issue

I want to show Carousel slider and listview inside gridview and want to scroll complete page, I am able to scroll parent listview but when I go down can't able to scroll.
Code:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image:
AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
),
);
}
The best thing to use for your case is Slivers, it will allow you to scroll through both the ListView and GridView together smoothly.
An example is as follows:
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home"),
centerTitle: true,
),
body: CustomScrollView(
slivers: [
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Text('hello'),
),
);
},
);
}).toList(),
),
),
),
SliverToBoxAdapter(
child: SizedBox(height: 20.0),
),
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
}, childCount: 5),
)
],
),
);
}
}
Add physics: PageScrollPhysics(), for both ListView.builder() & GridView.count()
Code:
ListView(
shrinkWrap: true,
children: <Widget>[
Column(
children: <Widget>[
new SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: CarouselSlider(
options: CarouselOptions(height: 230.0),
items: [1, 2, 3, 4, 5].map((i) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Card(
elevation: 2.0,
child: Image(
image: AssetImage('assets/images/onboarding1.png'),
),
),
);
},
);
}).toList(),
),
),
new SizedBox(height: 20.0),
new ListView.builder(
shrinkWrap: true,
itemCount: 5,
physics: PageScrollPhysics(),
itemBuilder: (context, index) {
return new Column(
children: <Widget>[
new Container(
height: 50.0,
color: Colors.green,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Icon(Icons.format_list_numbered,
color: Colors.white),
new Padding(
padding: const EdgeInsets.only(right: 5.0)),
new Text(index.toString(),
style: new TextStyle(
fontSize: 20.0, color: Colors.white)),
],
),
),
Container(
child: GridView.count(
crossAxisCount: 3,
shrinkWrap: true,
physics: PageScrollPhysics(),
childAspectRatio: 1.2,
children: List.generate(
8,
(index) {
return Container(
child: Card(
color: Colors.blue,
),
);
},
),
),
),
new SizedBox(height: 20.0),
],
);
},
),
],
),
],
);

Error displaying List view below container

I am trying to display Listview using Listview builder below the purple color(as seen in the image)container with the below code:
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30,200,0),
child: IconButton(icon: Icon(Icons.arrow_back,),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(height: 20,),
Text('Semester 1',
style: TextStyle(color: Colors.white,
fontSize: 30),
)
],
)
),
Container(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
child: new Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
)
],
),
);
It returns a blank screen after running the code,without showing any error. I am not able to figure out the problem.
Please help!
If you use listview is small and inside Column then you should add
shrinkWrap: true in ListView
Column(
children: <Widget>[
ListView(
shrinkWrap: true, // use it
)
],
)
Or If your ListView Height is fix then use
Column(
children: <Widget>[
SizedBox(
height: 200, // constrain height
child: ListView(),
)
],
)
or If you want to fill all remaining space the use
Column(
children: <Widget>[
Expanded(
child: ListView(...),
)
],
)
Simply wrap the ListView in Expanded. The error here is that ListView doesn't know how to size itself (it has unbounded height from the Column). Using Expanded will tell it to fill up all the remaining space and fix the sizing problem
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30,200,0),
child: IconButton(icon: Icon(Icons.arrow_back,),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(height: 20,),
Text('Semester 1',
style: TextStyle(color: Colors.white,
fontSize: 30),
)
],
)
),
Container(
child: Expanded( // <-- wrap with expanded
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
child: new Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
),
)
],
),
);
Error is caused by Container that is wrapping ListView. You need to specify bounds for that Container.
return Scaffold(
body: Column(
children: <Widget>[
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius:
BorderRadius.only(bottomLeft: Radius.circular(75.0)),
),
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 200, 0),
child: Container(
padding: EdgeInsets.fromLTRB(0, 30, 200, 0),
child: IconButton(
icon: Icon(
Icons.arrow_back,
),
color: Colors.black,
onPressed: () {
Navigator.pop(context);
},
),
),
),
SizedBox(
height: 20,
),
Text(
'Semester 1',
style: TextStyle(color: Colors.white, fontSize: 30),
)
],
),
),
Container(
height: 300,
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Card(
child: Container(
child: Text("hello"),
padding: const EdgeInsets.all(20),
))
],
)));
}),
)
],
),
Above code should be working. Please note that, you don't need to specify "new" keyword in flutter.

A RenderFlex overflowed by 620 pixels on the bottom

******Update ********
Here's the updated body which resolved the scrolling issue as posted earlier below, but now getting A RenderFlex overflowed by 620 pixels on the bottom. I replaced body: listView with body: Column. I know this is very common issue and per the logcat the solution is to wrap the content in Expanded widget. In my case, I would like to know where to use 'Expanded` widget to resolve the issue.
Widget reviewsSection = Container(
child: FutureBuilder(
future: _fetchReviews(),
builder: (context, snapshot) {
if (snapshot.data != null) {
return _buildReviewTiles(snapshot.data);
} else if (snapshot.hasError) {
return Text('${snapshot.error}',
style: TextStyle(color: Colors.black, fontSize: 12.0),
textAlign: TextAlign.justify);
}
// By default, show a loading spinner
return new Container(child: new CircularProgressIndicator());
}));
// Creates a list view based on the reviews in the reviewList.
Widget _buildReviewTiles(List<Review> list) {
return (new Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: reviewList == null ? 0 : reviewList.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
child: Center(
child: Column(children: <Widget>[
_getReviewTile(reviewList[index]),
new Padding(
padding: EdgeInsets.all(5.0),
),
new Divider(
height: 3.0,
color: Colors.black26,
)
])));
}),
));
}
// Returns a list tile representation of a review
Widget _getReviewTile(Review review) {
// Keep only the day, month, and year
var date = review.created.split(" ")[0];
return new Container(
color: Colors.yellow,
child: new Row(
children: <Widget>[
new Expanded(
child: ListTile(
leading: new Column(children: <Widget>[
const Icon(Icons.stars),
]),
subtitle: new Text(
'${review.review}',
style: TextStyle(color: Colors.black, fontSize: 14.0),
),
title: new Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(date, style: new TextStyle(fontSize: 12.0)),
new Padding(
padding: EdgeInsets.all(4.0),
),
],
),
),
new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new StarRating(
starCount: 5,
rating: review.rating + 0.0,
color: Colors.amber,
),
]),
],
),
),
),
],
),
);
}
This is my Scaffold code that uses reviewsSection along with other sections:
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
background: FadeInImage.assetNetwork(
placeholder: 'assets/header_bg.png',
width: 600.0,
height: 240.0,
fit: BoxFit.cover,
image: 'https:' + pro.profilePhoto),
),
),
];
},
body: Column(
children: <Widget>[
new Container(
color: Colors.black87,
child: Row(
children: <Widget>[
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: new EdgeInsets.fromLTRB(5.0, 8.0, 10.0, 5.0),
),
new Text(
'${pro.fullname}',
style: TextStyle(fontSize: 18.0, color: Colors.white),
),
new Text(
'${pro.company}',
style: TextStyle(fontSize: 14.0, color: Colors.white),
),
Padding(
padding: EdgeInsets.all(5.0),
)
],
),
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: new EdgeInsets.fromLTRB(5.0, 8.0, 10.0, 5.0),
),
new StarRating(
starCount: 5,
rating: pro.rating,
color: Colors.amber,
),
new Text(
'${pro.reviewCount} reviews',
style: TextStyle(fontSize: 14.0, color: Colors.white),
),
Padding(
padding: EdgeInsets.all(5.0),
)
],
),
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
),
buttonSection,
Padding(
padding: EdgeInsets.all(2.0),
),
Divider(color: Colors.black26, height: 0.5),
Padding(
padding: EdgeInsets.all(4.0),
),
experienceSection,
Padding(
padding: EdgeInsets.all(8.0),
),
reviewsSection
],
),
),
);
}
Am re-posting the answer suggested by #anmol.majhail that helped me to resolve the issue.
"Try Wraping - reviewsSection in Expanded.& Remove containers around FutureBuilder & ListViewBuilder"
So corrected reviewsSection code that worked is:
Widget reviewsSection = Expanded(
child: FutureBuilder(
future: _fetchReviews(),
builder: (context, snapshot) {
if (snapshot.data != null) {
return _buildReviewTiles(snapshot.data);
} else if (snapshot.hasError) {
return Text('${snapshot.error}',
style: TextStyle(color: Colors.black, fontSize: 12.0),
textAlign: TextAlign.justify);
}
// By default, show a loading spinner
return Center(child: CircularProgressIndicator());
}));