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
Related
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 have a ROW with 3 children.
Container(
alignment: Alignment.center,
margin: const EdgeInsets.all(20.0),
child: Row(
children: [
Text(
'hello'
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: SizedBox(
child: Text(
'hello'
)),
),
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('asdasd'),
)
];
},
)
],
),
)
Now I want last PopupMenuButton to completely right (Basically at the end of the containter widget.)
How can i do that?
Add a spacer()
Container(
alignment: Alignment.center,
margin: const EdgeInsets.all(20.0),
child: Row(
children: [
Text(
'hello'
),
Padding(
padding: const EdgeInsets.only(left: 15.0),
child: SizedBox(
child: Text(
'hello'
)),
),
Spacer(), //here
PopupMenuButton(
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text('asdasd'),
)
];
},
)
],
),
)
If it throws unbound error then add a width to the container
width : MediaQuery.of(context).size.width,
More about spacer
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()),
// ),
// ),
// ],
// ),
// ),
],
),
]),
),
);
});
}
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.
body: StreamBuilder(
stream: Firestore.instance.collection('students').snapshots(),
builder: (context, snapshot) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left:20.0),
child: Align(
alignment: Alignment.centerRight,
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.white,
child: ClipOval(
child: new SizedBox(
width: 180.0,
height: 180.0,
child: (_image!=null)?Image.file(
_image,
fit: BoxFit.fill,
):
Image.network(
'$_downloadurl.jpg',
fit: BoxFit.fill,
),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(top: 60.0),
child: IconButton(
icon: Icon(
Icons.camera,
size: 30.0,
),
onPressed: () {
getImage();
},
),
),
],
),
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left:40.0),
child: Align(
alignment: Alignment.center,
child: Container(
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Text('Student Name',
style: TextStyle(
color: Colors.white, fontSize: 20.0)),
),
Align(
alignment: Alignment.center,
child: Text(snapshot.data.id['first_name'],
style: TextStyle(
color: Colors.black,
fontSize: 18.0,
)),
),
],
),
),
),
),
I want to display text using user id in stream builder align texthere is my database image and i i want to access the a specific user in students collection
if there is any other function to convert it please help me
when I run the code only one user's data is retrieved even then the data of not logged in user is also retrieved
i would opt for a ListView.builder here is how you can implement it
load data from cloud firestore in your initState
getData()async{
return Firestore.instance.collection('students').getDocuments();
}
QuerySnapshot querySnapshot;
#override
void initState() {
super.initState();
getData().then((results) {
setState(() {
querySnapshot = results;
});
});
}`
display data in your listview
Widget _users(){
if(querySnapshot!=null){
return ListView.builder(
// scrollDirection: Axis.vertical,
primary: false,
itemCount: querySnapshot.documents.length,
padding: EdgeInsets.all(8.0),
itemBuilder: (context, i) {
//show data from snapshot
return Text("${querySnapshot.documents[i].data['email']}");
}
}
}
in your body add the widget _users eg Container(child:_users)