I am using google_mobile_ads for my Flutter app.
Based on the reference provided by Google Flutter, how do I have multiple Native Ads in a ListView (https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter#1).
The example provided only allows 1 Native Ads to be showed in the ListView. My intention is to show different Ads for different entries in the same ListView.
I found it easier to do with flutter_native_admob package rather
You should use ListView.seprated. Try out the below code.
ListView.separated(
shrinkWrap: true,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Center(
child: Text("List Item")
);
},
separatorBuilder: (BuildContext context, index) {
return Container(
child: NativeAdmob(
adUnitID: ***your ad unit ID***,
controller: _nativeAdController,
type: NativeAdmobType.full,
loading: Center(
child: CircularProgressIndicator(),
),
error: Center(
child: Text(
"Ad failed to load"
),
),
),
height: MediaQuery.of(context).size.height*(30/100),
padding: EdgeInsets.all(8),
);
},
);
This way you will get native ads after every list items.
Related
Got the basic listview working with this code:
body: GetX<LokationListeCtrl>(
builder: (ctrl) => ListView.separated(
separatorBuilder: _separatorBuilder,
itemCount: ctrl.lokationListe.length,
itemBuilder: (BuildContext context, int index) {
return _lokationTile(ctrl.lokationListe.elementAt(index));
},
),
),
Ok great, so now I'll just add another list by wrapping the whole thing in a multiple child widget, but even before doing that, I'm already stuck trying to get the first list working:
body: Column(
children: [
GetX<LokationListeCtrl>(
builder: (ctrl) => ListView.separated(
separatorBuilder: _separatorBuilder,
itemCount: ctrl.lokationListe.length,
itemBuilder: (BuildContext context, int index) {
return _lokationTile(ctrl.lokationListe.elementAt(index));
},
),
),
],
),
Here using a Column, but it applies to all widgets with multiple children. The itemBuilder code is simply newer executed.
It seems like a simple and usefull thing to be able to do - the question is HOW to have multiple list in body, the "GetX way" ?
Found a solution. If we introduce a new Scaffold and wrap it in an Expanded, then GetX stops beeing an insulted little boy, and starts smiling again:
body: Column(
children: [
Expanded(
child: Scaffold(
body: MyBodyPadding(
// add space between appbar and first ListTile
child: GetX<LokationListeCtrl>(
builder: (ctrl) => ListView.separated(
separatorBuilder: _separatorBuilder,
itemCount: ctrl.lokationListe.length,
itemBuilder: (BuildContext context, int index) {
return _lokationTile(
ctrl.lokationListe.elementAt(index));
},
),
),
),
),
),
],
),
I'm using a ListView to populate a list of items, followed by a button:
ListView(
padding: EdgeInsets.all(10),
shrinkWrap: true,
children: <Widget>[
budgetEntry(snapshot.data[0]),
budgetEntry(snapshot.data[1]),
budgetEntry(snapshot.data[2]),
FlatButton(
child: Text('Manage budgets'),
onPressed: () { },
)
); // ListView
This works, but I want to know how I can achieve the same result with a dynamic number of items (snapshot.data.length) instead of manually using snapshot.data[0], snapshot.data[1], ...
I've tried using ListView.builder like so, but now I can't append a button at the end of the ListView:
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return budgetEntry(snapshot.data[index]);
});
Could you please help with how we can build a dynamic list of widgets instead of building cards(containers or widgets) for example one by one manually? Using the ListView.build or other methods? What is the best way?
I spent a day trying and researching. Instead of adding 3 cards(or other objects with multiple properties), I am trying to build a method or a function that will build each card(object) based on the list(and length) and then insert all the card built automatically in the [].
I've been trying to achieve it, but when I add it to [] there are some problems, probably because of the wrong types or maybe I am doing something horribly wrong? And not sure if it's the best(if correct at all) way of doing it?
List entries = ['one', 'two', 'three3'];
Widget buildListView() {
return ListView.builder(
padding: EdgeInsets.all(8),
itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
height: 50,
color: Colors.lightBlue,
child: Center(child: Text('Entry ${entries[index]}')),
);
});
}
Here you go.
///construct the list of dynamic widgets as per your requirement.
final listWidgets = [Text("one"), Text("two"), Text("three")];
///pass the widgets to the listview builder.
return ListView.builder(
padding: EdgeInsets.all(8),
itemCount: listWidgets.length,
itemBuilder: (BuildContext context, int index) {
return new Container(
height: 50,
color: Colors.lightBlue,
child: listWidgets[index],
);
});
});
This is just a simple todo list app. I want to implement a feature which lets me mark a task as complete when swiping right and delete the task when swiping left. This app uses a database and stores an added task in a list of type database (List<TodoItem> Itemlist= <TodoItem>[];).
Is it possible to use flutter_slidable?.
I have tried using Dismissible but i could only get it to delete the task.
List<TodoItem> Itemlist= <TodoItem>[];
SingleChildScrollView(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: Itemlist.length,
itemBuilder: (BuildContext context, int index){
String item = Itemlist[index].toString();
return Dismissible(
key: Key(UniqueKey().toString()),
onDismissed: (direction){
setState((){
deleteItem(Itemlist[index].id, index);
}
);
},
background: Container(
child: Icon(Icons.delete),
color: Colors.red,
alignment: Alignment.centerLeft,
),
child: Itemlist[index],
);
}
),
)
I want to get the same result as below but am unsure on how to pass the listview.builder in Slidable.
Wrap your tile widget with Slidable
Setup "actionPane" and "actions" parameters for Slidable
AlertCardWidget is a widget that i wrote. I return it in itemBuilder but nothing shown. Here is my code:
Flexible(
child: Padding(
child: SingleChildScrollView(
child: ListView.builder(
itemCount: state.data.length,
itemBuilder: (BuildContext context, int index) {
state.data["datas"].map<Widget>((f) {
return AlertCardWidget(
positionId: "${f["8020074"]}",
shipowner: "${f["8020076"]}",
customer: "${f["8020170"]}",
salesRepresenter: "${f["8020176"]}",
operationRepresenter: "${f["8020177"]}",
textContentFontColor:
AppTheme(Theme.of(context).brightness)
.cardFontBackgroundColor,
textfont: Colors.redAccent,
);
}).toList();
},
),
),
),
),
No error to show.
I have items that why I use ListView. The problom of using Listview instead ListView.builder is taking "Vertical viewport was given unbounded height error". The problem has solved when writing Listview like child of Expanded widget. Here is my code:
Expanded(
child: Padding(
padding: const EdgeInsets.all(4.0),
child: ListView(
children: state.data["datas"].map<Widget>((f) => AlertCardWidget(positionId: "${f["8020074"]}",
shipowner: "${f["8020076"]}",
customer: "${f["8020170"]}",
salesRepresenter: "${f["8020176"]}",
operationRepresenter: "${f["8020177"]}",
textContentFontColor: AppTheme(Theme.of(context).brightness).cardFontBackgroundColor,
textfont: Colors.redAccent,)).toList(),
),
),
),
Maybe a silly question, but why are you mapping a list into a ListView.builder?
Have you tried using the index for each iteration instead?
Because what I understand from that code is that every ["datas"] item you've got will generate the whole list for as many times as state.data.length has.
Maybe try this out:
Flexible(
child: Padding(
child: SingleChildScrollView(
child: ListView.builder(
itemCount: state.data.length,
itemBuilder: (BuildContext context, int index) {
return AlertCardWidget(
positionId: state.data[index]["datas"]["8020074"],
shipowner: state.data[index]["datas"]["8020076"],
customer: state.data[index]["datas"]["8020170"],
salesRepresenter: state.data[index]["datas"]["8020176"],
operationRepresenter: state.data[index]["datas"]["8020177"],
textContentFontColor:
AppTheme(Theme.of(context).brightness)
.cardFontBackgroundColor,
textfont: Colors.redAccent,
);
},
),
),
),
),
If that doesn't work, would you mind showing us which data are you trying to retrieve?
Your itemBuilder function does not return a value.
Edit: It should return a single Widget for every entry in your list.
Something like this should work.
Also, Padding Widget is missing the padding property.
Flexible(
child: Padding(
child: SingleChildScrollView(
child: ListView.builder(
itemCount: state.data.length,
itemBuilder: (BuildContext context, int index) {
final f = state.data[index];
return AlertCardWidget(
positionId: "${f["8020074"]}",
shipowner: "${f["8020076"]}",
customer: "${f["8020170"]}",
salesRepresenter: "${f["8020176"]}",
operationRepresenter: "${f["8020177"]}",
textContentFontColor:
AppTheme(Theme.of(context).brightness)
.cardFontBackgroundColor,
textfont: Colors.redAccent,
);
},
),
),
),
),