How to fix this Error Unexpected null value? - flutter

I am getting the following error while rendering in my FutureBuilder:
======== Exception caught by rendering library =====================================================
The following TypeErrorImpl was thrown during paint(): Unexpected null value.
Here is my code:
file1.dart
DataCell(IconButton(
icon: Icon(Icons.info_outline),
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) {
return VendorDetailBox(document.data()['uid']);
});
},
)),
]);
file.dart
Widget build(BuildContext context) {
return FutureBuilder(
future: _services.vendors.doc(widget.uid).get(),
builder:
(BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.hasError) {
return Center(child: Text('Something Went Wrong'));
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
return Dialog(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width * .3,
child: ListView(children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(
height: 100,
width: 100,
child: Image.network(
snapshot.data['url'],
fit: BoxFit.cover,
),
),
ListView(children: [
SizedBox(
width: 20,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
snapshot.data['name'],
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 25),
),
Text(
snapshot.data['dialog'],
),
]),
]),
],
),
Divider(
thickness: 4,
),
Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Row(
children: [
Expanded(
child: Container(
child: Text("Contact Numbers",
style: VendorDetailTextStyle),
),
),
Container(
child: Padding(
padding:
const EdgeInsets.only(left: 10.0, right: 10),
child: Text(':'),
),
),
Expanded(
child: Container(
child: Text(snapshot.data['mobile']),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Row(
children: [
Expanded(
child: Container(
child: Text("Email", style: VendorDetailTextStyle),
)),
Container(
child: Padding(
padding:
const EdgeInsets.only(left: 10.0, right: 10),
child: Text(':'),
),
),
Expanded(
child: Container(
child: Text(snapshot.data['email']),
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Row(
children: [
Expanded(
child: Container(
child:
Text("address", style: VendorDetailTextStyle),
)),
Container(
child: Padding(
padding:
const EdgeInsets.only(left: 10.0, right: 10),
child: Text(':'),
),
),
Expanded(
child: Container(
child: Text(snapshot.data['address']),
),
),
],
),
),
// Padding(
// padding: const EdgeInsets.only(top: 10.0),
// child: Row(
// children: [
// Expanded(
// child: Container(
// child: Text("Created At",
// style: VendorDetailTextStyle),
// )),
// Container(
// child: Padding(
// padding:
// const EdgeInsets.only(left: 10.0, right: 10),
// child: Text(':'),
// ),
// ),
// Expanded(
// child: Container(
// child:
// Text(snapshot.data['Created At'].toString()),
// ),
// ),
// ],
// ),
// ),
],
),
]),
),
);
});
}

Related

Exception caught by widgets library: Incorrect use of ParentDataWidget

The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this? this is my code
code for list restaurant.dart
import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurant_list.dart';
import 'package:resto_app/ui/detail_page.dart';
class CardRestaurant extends StatelessWidget {
final Restaurant restaurant;
const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return RestaurantDetailPage(idrestaurant: restaurant.id);
}));
},
child: Stack(
children: <Widget>[
Container(
margin:
const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
height: 170.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.lime.shade100,
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: const EdgeInsets.only(
left: 200, top: 20, right: 20, bottom: 20),
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
_sizebox(10),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
),
),
Positioned(
left: 20.0,
top: 15.0,
bottom: 15.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/small/" +
restaurant.pictureId,
width: 200,
fit: BoxFit.cover,
),
),
),
),
],
),
),
);
}
}
Widget _sizebox(double height) {
return SizedBox(
height: height,
);
}
Widget _icon(IconData icon, double size, Color color) {
return Icon(
icon,
size: size,
color: color,
);
}
and my detailrestaurant.dart code
`
`import 'package:flutter/material.dart';
import 'package:resto_app/data/model/restaurants_detail.dart';
import 'package:resto_app/common/constant.dart';
class RestaurantDetail extends StatelessWidget {
static const routeName = '/restaurant_detail';
final Restaurant restaurant;
const RestaurantDetail({Key? key, required this.restaurant})
: super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/medium/" +
restaurant.pictureId,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.name),
_sizebox(10),
Row(
children: [
_icon(Icons.location_city, 20, Colors.grey),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.city),
Text(restaurant.address),
],
)
],
),
],
),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
_barrierContent(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.only(top: 10, right: 20, left: 20),
child: Text('Description'),
),
Container(
padding: const EdgeInsets.only(
top: 10, right: 20, left: 20, bottom: 20),
width: double.infinity,
child: Text(restaurant.description)),
],
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Category'),
ListBody(
children: restaurant.categories.map((food) {
return Text(
'- ${food.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Food'),
ListBody(
children: restaurant.menus.foods.map((categori) {
return Text(
'- ${categori.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Drink'),
ListBody(
children: restaurant.menus.drinks.map((drink) {
return Text('- ${drink.name}');
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Column(
children: [
Text('Comment'),
ListBody(
children: restaurant.customerReviews.map((review) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Expanded(
child: Row(children: [
Container(
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
child: Center(
child: Text(
review.name.characters.elementAt(0),
style: const TextStyle(
color: Colors.white, fontSize: 20),
)),
),
const SizedBox(
width: 15,
),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
review.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Text(
' ${review.date}',
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade500),
)
],
),
SizedBox(
width: 270,
child: Text(
review.review,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
)
],
),
)
]),
),
);
}).toList(),
),
],
),
),
_barrierContent()
],
),
],
),
),
),
);
}
}
Widget _barrierContent() {
return Container(
height: 10,
color: Colors.grey.shade200,
);
}
Widget _sizebox(double height) {
return SizedBox(
height: height,
);
}
Widget _icon(IconData icon, double size, Color color) {
return Icon(
icon,
size: size,
color: color,
);
}
`
``
error
The same 2 errors appear in 2 different files when I run my flutter program, does anyone know how to fix this?
child: Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
parent of Expanded must be Stack, Column, Row but in your example it's wrong
You should use Expanded only within a Column, Row or Flex & that to its top most child only
Here you have use Expanded widget inside padding widget which is inside stack and also you can't use Expanded inside stack, so it causing this ParentDataWidget Error
code for list restaurant.dart
class CardRestaurant extends StatelessWidget {
final Restaurant restaurant;
const CardRestaurant({Key? key, required this.restaurant}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return RestaurantDetailPage(idrestaurant: restaurant.id);
}));
},
child: Stack( //---------------
children: <Widget>[
Container(
margin:
const EdgeInsets.only(left: 40, top: 5, right: 20, bottom: 5),
height: 170.0,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.lime.shade100,
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(//---------
padding: const EdgeInsets.only(
left: 200, top: 20, right: 20, bottom: 20),
child: Expanded(//--------- you can't use expanded inside Stack
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 120.0,
child: Expanded(child: Text(restaurant.name)),
),
_sizebox(10),
and my detailrestaurant.dart code
class RestaurantDetail extends StatelessWidget {
static const routeName = '/restaurant_detail';
final Restaurant restaurant;
const RestaurantDetail({Key? key, required this.restaurant})
: super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Hero(
tag: restaurant.pictureId,
child: Image.network(
"https://restaurant-api.dicoding.dev/images/medium/" +
restaurant.pictureId,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.name),
_sizebox(10),
Row(
children: [
_icon(Icons.location_city, 20, Colors.grey),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(restaurant.city),
Text(restaurant.address),
],
)
],
),
],
),
Row(
children: [
_icon(Icons.star_rate, 20, Colors.yellow),
Text(
' ${restaurant.rating}',
),
],
)
],
),
),
_barrierContent(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.only(top: 10, right: 20, left: 20),
child: Text('Description'),
),
Container(
padding: const EdgeInsets.only(
top: 10, right: 20, left: 20, bottom: 20),
width: double.infinity,
child: Text(restaurant.description)),
],
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Category'),
ListBody(
children: restaurant.categories.map((food) {
return Text(
'- ${food.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Food'),
ListBody(
children: restaurant.menus.foods.map((categori) {
return Text(
'- ${categori.name}',
);
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 20),
child: Column(
children: [
Text('Menu Drink'),
ListBody(
children: restaurant.menus.drinks.map((drink) {
return Text('- ${drink.name}');
}).toList(),
),
],
),
),
_barrierContent(),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Column(
children: [
Text('Comment'),
ListBody(//--- this is top most child
children: restaurant.customerReviews.map((review) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Expanded(//--------- This causing problem here, you can only use Exapnded to column top most child
child: Row(children: [
Container(
width: 40,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.blue),
child: Center(
child: Text(
review.name.characters.elementAt(0),
style: const TextStyle(
color: Colors.white, fontSize: 20),
)),
),
const SizedBox(
width: 15,
),
Expanded(//---- This one also causing Problem
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
review.name,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold),
),
Text(
' ${review.date}',
style: TextStyle(
fontSize: 14,
color: Colors.grey.shade500),
)
],
),
SizedBox(
width: 270,
child: Text(
review.review,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
)
],
),
)
]),
),
);
}).toList(),
),
],
),
),
_barrierContent()
],
),
],
),
),
),
);
}
}
Keep this point in mind to avoid basic error
Most common one Expanded can only use to a descendant of Column,Row & Flex
Don't use Positioned under Row or Column instead use Align
Under ListView don't use Spacer instead use SizedBox
Hope this might help you to solve your Error
Happy Learning!!!

RenderBox was not laid out: RenderCustomPaint#cd52e relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

class _MainFoodPageState extends State<MainFoodPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
//header
child: Container(
margin: EdgeInsets.only(top: 45, bottom: 15),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
BigText(
text: "Iran",
color: AppColors.mainColor,
),
Row(
children: [
SmallText(
text: "Tehran",
color: Colors.black54,
),
Icon(Icons.arrow_drop_down)
],
),
],
),
Center(
child: Container(
width: 45,
height: 45,
child: Icon(
Icons.search,
color: Colors.white,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.mainColor),
),
)
],
),
),
),
),
//slider
Expanded(
child: SingleChildScrollView(
child: FoodPageBody(),
),
),
],
),
);
}
}
`---------------------------------------
#override
Widget build(BuildContext context) {
return Column(
children: [
//slider
Container(
height: 320,
child: PageView.builder(
controller: pageController,
itemCount: itemCount,
itemBuilder: (context, position) {
return _buildPageItem(position);
}),
),
//dots
DotsIndicator(
dotsCount: itemCount,
position: _currentPageValue,
decorator: DotsDecorator(
color: AppColors.mainColor,
size: const Size.square(9.0),
activeSize: const Size(18.0, 9.0),
activeShape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0)),
),
),
//popular
SizedBox(
height: 30,
),
Container(
margin: EdgeInsets.only(left: 30),
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
BigText(text: "Popular"),
SizedBox(
width: 10,
),
Container(
margin: EdgeInsets.only(bottom: 3),
child: BigText(
text: ".",
color: Colors.black26,
),
),
SizedBox(
width: 10,
),
Container(
margin: EdgeInsets.only(bottom: 2),
child: SmallText(text: "Food pairing"),
),
//list of foods
Container(
child: ListView.builder(
itemCount: 10,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container();
},
),
),
],
),
)
],
);
}
i cant make a ListView.builder (flutter)

A RenderFlex overflowed by 230 pixels on the bottom

I keep getting this error and I know how to fix it I've tried wrapping my column inside an Expanded and a Flexible widget but it doesn't seem to be working.
Here's my code :
return Scaffold(
body: Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
);
This is the renderBtnLike() widget :
Widget renderBtnLike() {
return Container(
child: GestureDetector(
onTapDown: onTapDownBtn,
onTapUp: onTapUpBtn,
onTap: onTapBtn,
child: Container(
child: Row(
children: <Widget>[
// Icon like
Expanded(
child: Transform.scale(
child: Transform.rotate(
child: Image.asset(
getImageIconBtn(),
width: 10.0,
height: 10.0,
fit: BoxFit.contain,
color: getTintColorIconBtn(),
),
angle:
!isLongPress ? handleOutputRangeTiltIconLike(tiltIconLikeInBtn2.value) : tiltIconLikeInBtn.value,
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomIconLikeInBtn.value,
),
),
// Text like
Expanded(
child: Transform.scale(
child: Text(
getTextBtn(),
style: TextStyle(
color: getColorTextBtn(),
fontSize: 8.0,
fontWeight: FontWeight.bold,
),
),
scale:
!isLongPress ? handleOutputRangeZoomInIconLike(zoomIconLikeInBtn2.value) : zoomTextLikeInBtn.value,
),
),
],
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
),
padding: EdgeInsets.all(8.0),
color: Colors.transparent,
),
),
width: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
color: Colors.white,
border: Border.all(color: getColorBorderBtn()),
),
margin: EdgeInsets.all(20.0),
);
}
If anyone seems to know the answer please tell me how to fix this and thank you in advance.
you just need to wrap your Column widget into SingleChildScrollView widget to get rid of and Expanded and Flexible widgets works inside Column or Row
return Scaffold(
body: SingleChildScrollView(
child : Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
),
);
return Scaffold(
body: singlechildscrollview(
child:Column(
children: [
//To Show Current Date
Container(
height: 30,
margin: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
),
SizedBox(height: 10),
//To show Calendar Widget
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Expanded(
flex : 2,
child: SingleChildScrollView(
child: Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
title: Text(
'MISSIONS',
style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20),
textAlign: TextAlign.center,
),
),
],
),
),
),
),
),
Expanded(
flex : 8,
child: SizedBox(
height: 600.0,
child: ListView.builder(
itemCount:
3,
itemBuilder: (BuildContext context, int index) {
// box.put('missionName', missionName);
//box.put("entries",entries);
//var name = box.get('missionName');
//print('Name: $name');
return GestureDetector(
child: Card(
child: Center(
child: Container(
height: 110,
child: Row(
children: <Widget>[
Expanded(
child: Text(
'mission'),
),
SizedBox(height: 30),
Expanded(
child: GestureDetector(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// Just a top space
// main content
Container(
child: Stack(
children: <Widget>[
// Box and icons
Stack(
children: <Widget>[
// Box
renderBox(),
// Icons
renderIcons(),
],
alignment: Alignment.bottomCenter,
),
// Button like
renderBtnLike(),
// Icons when jump
// Icon like
whichIconUserChoose == 1 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/close.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLikeWhenRelease.value,
),
)
: Container(),
// Icon love
whichIconUserChoose == 2 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/nowork.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconLoveWhenRelease.value,
),
)
: Container(),
// Icon haha
whichIconUserChoose == 3 && !isDragging
? Container(
child: Transform.scale(
child: Image.asset(
"images/sunny.png",
width: 20.0,
height: 20.0,
),
scale: this.zoomIconWhenRelease.value,
),
margin: EdgeInsets.only(
top: processTopPosition(this.moveUpIconWhenRelease.value),
left: this.moveLeftIconHahaWhenRelease.value,
),
)
: Container(),
],
),
margin: EdgeInsets.only(left: 20.0, right: 20.0),
// Area of the content can drag
// decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
width: double.infinity,
),
],
),
),
onHorizontalDragEnd: onHorizontalDragEndBoxIcon,
onHorizontalDragUpdate: onHorizontalDragUpdateBoxIcon,
),
)
],
),
),
),
),
);
}),
),
),
SizedBox(height: 30),
],
)),
],
),
);
);

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.

Load Ad Asynchronously

I want to load Ad to my screen and I got Ads as expected but the problem is that it will make my app slows since there is many items to load.
I want to load Ads asynchronously, like the other items should first then the Ads. I have pasted my code below, I have put the ad in a container
static Widget cinemaView(AsyncSnapshot<List<CinemaModel>> snapshot) {
return Column(
children: <Widget>[
Expanded(
child: Container(
child: ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
CinemaNewsDetails(id: snapshot.data[index].id)));
},
child: Card(
elevation: 2.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Stack(
children: <Widget>[
Row(
children: <Widget>[
new Column(
children: <Widget>[
Padding(
padding:
EdgeInsets.only(top: 4.0, bottom: 4.0),
child: Padding(
padding: const EdgeInsets.all(4.0),
child: snapshot.data[index].image.isNotEmpty
? Image.network(
snapshot.data[index].image,
fit: BoxFit.cover,
height: MediaQuery.of(context)
.size
.height /
8,
width: MediaQuery.of(context)
.size
.width /
4,
)
: Image.network(
'https://lh3.googleusercontent.com/zUofRpElgAioazdFZyPTybX3JKFmuBGS0Z0gPR6xuVm3V9f3xGmpUsdTWzNujJWWc5yq',
fit: BoxFit.cover,
),
),
)
],
),
Expanded(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(snapshot.data[index].title,
overflow: TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(
fontWeight: FontWeight.w600)),
),
),
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(
top: 5.0, left: 8.0),
child: Text(dateEngine(
snapshot.data[index].publishdate)),
),
),
],
))
],
),
],
),
],
),
),
);
}),
),
),
StreamBuilder<Object>(
stream: null,
builder: (context, snapshot) {
return
Container(
child: AdmobBanner(
adSize: AdmobBannerSize.FULL_BANNER,
adUnitId: unitId,
),
);
}
),
],
);
}
Any help will be appreciated