I am getting an error while trying to compile my code could anyone help me fix it? I am trying to create a list of buttons that will navigate to another screen. It was previously a expansion tile and I am trying to switch it to a list tile.
return ListTile(
title: Text(StudyViewModel.studies[index].name,
style: TextStyle(fontSize: 18.0)),
children: <Widget>[
ListView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemCount: StudyViewModel.studies[index].tasks.length,
itemBuilder: (context, int taskIndex) {
return ListTile(
title: Text(StudyViewModel.studies[index].tasks[taskIndex].name),
contentPadding: EdgeInsets.symmetric(horizontal: 32.0),
subtitle: Text(
StudyViewModel.studies[index].tasks[taskIndex].elapsedTime),
);
},
),
Based off of responses, the goal of this code is to create a list of buttons that have previously been defined in a template. These buttons will be used in a time study app. I would like to be able to upload the activities into a new page. Originally, the code was written as an expansiontile, but I am trying to change it to a listtile. The error we are encountering is:
lib/pages/home_page.dart:107:7: Error: No named parameter with the name 'children'.
children: [
^^^^^^^^
../../lib/flutter/packages/flutter/lib/src/material/list_tile.dart:762:9: Context: Found this candidate, but the arguments don't match.
const ListTile({
^^^^^^^^
Failed to compile application
Error code for ListView
The ListTile widget doesn't contain a parameter named children. In your code you're setting a parameter 'children' which is invalid.
This might help:
return ListView(
children: <Widget>[
Text(StudyViewModel.studies[index].name,
style: TextStyle(fontSize: 18.0),
),
ListView.builder(
shrinkWrap: true,
primary: false,
itemCount: StudyViewModel.studies[index].tasks.length,
itemBuilder: (context, int taskIndex) {
return ListTile(
title: Text(StudyViewModel.studies[index].tasks[taskIndex].name),
contentPadding: EdgeInsets.symmetric(horizontal: 32.0),
subtitle: Text(StudyViewModel.studies[index].tasks[taskIndex].elapsedTime),
);
},
),
Related
I'm a new flutter learner. I need to show a list of text in my app in any way.
Please let me know if there more way.
This is my List variable:
List<Text> howtoreach = [
const Text('How to become rich in 7 steps'),
const Text(
'1, Identify your goals. Before you get started on becoming rich, devise a financial plan. ...'),
const Text('2, End your high-interest debt. ...'),
const Text('3, Start budgeting and saving money. ...'),
const Text('4, Pay yourself first. ...'),
const Text('5, Start investing as soon as possible. ...'),
const Text('6, Increase your income. ...'),
const Text('7, Have the right mindset.'),
];
This is my text widget:
Text(
howtoreach,
style:
const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
textAlign: TextAlign.justify,
),
This is the error I'm getting:
The argument type 'List' can't be assigned to the parameter type 'String'.
Here I'm including my complete code for reference only
import 'package:flutter/material.dart';
List<Text> howtoreach = [
const Text('How to become rich in 7 steps'),
const Text(
'1, Identify your goals. Before you get started on becoming rich, devise a financial plan. ...'),
const Text('2, End your high-interest debt. ...'),
const Text('3, Start budgeting and saving money. ...'),
const Text('4, Pay yourself first. ...'),
const Text('5, Start investing as soon as possible. ...'),
const Text('6, Increase your income. ...'),
const Text('7, Have the right mindset.'),
];
class DescriptionBlog extends StatelessWidget {
const DescriptionBlog({
super.key,
required this.title,
required this.image,
});
final String title;
final String image;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const Size.fromHeight(50),
child: AppBar(
title: Text(title),
backgroundColor: const Color.fromARGB(255, 43, 9, 75),
toolbarOpacity: 0.99,
),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Image.asset(image),
Text(
title,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
***Text(
howtoreach,***
style:
const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
textAlign: TextAlign.justify,
),
],
),
),
),
);
}
}
Your howtoreach list is list of widget, so you can't use its item inside Text widget, because Text widget only accept string as its data, you have three options.
one: change your list to new list that contains a list of string like this:
List<String> howtoreach = [
'How to become rich in 7 steps',
'1, Identify your goals. Before you get started on becoming rich, devise a financial plan. ...',
'2, End your high-interest debt. ...',
...,
];
two: remove your Text widget and return the list's item like this:
ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) {
return howtoreach[index];
},
itemCount: howtoreach.length,
)
three: change your widget to this:
ListView.builder(
shrinkWrap: true,
itemBuilder: (context, index) {
return Text(
howtoreach[index].data,
style:
const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
textAlign: TextAlign.justify,
);
},
itemCount: howtoreach.length,
)
you can do all three way their output is the same. You can replace number two and three with your Text widget inside Column.
In order to populate data from a list of objects in this case List of Text Widgets, you need to use Listview() widget.
ListView constructor creates all items all at once.
Text(
title,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.green,
),
),
ListView(
shrinkWrap: true,
children: howtoreach,
),
You can also try lazy loading items if you have very long list using ListView.builder() widget
ListView.builder() constructor creates items as they’re scrolled onto the screen
ListView.builder(
itemCount: howtoreach.length,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return howtoreach[index];
},
),
Setting shrinkWrap as true will constraint the List to take only the space it requires. If shrinkWrap is not set true, it will take infinite space and throw error. Also you need set scrollPhysics as NeverScrollablePhysics if you have SingleChildScrollView as the Parent Widget.
Output:
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.
I am trying to create an app with a scroll view and the objects are clickable like the google news app. Can anyone answer how to animate the container to have a white glow on holding the tile?
Here is the list view builder I have for the app
Container(
padding: EdgeInsets.only(top: 16),
child: ListView.builder(
physics: ClampingScrollPhysics(),
itemCount: article.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (context, index) {
return news_tile(
imageurl: article[index].urlToimage,
news_title: article[index].title,
news_desc: article[index].description,
web_url: article[index].url
);
}),
)
and this is the contents of the tile which the list view builder calls
class news_tile extends StatelessWidget {
String imageurl, news_title, news_desc,web_url;
news_tile({this.imageurl, this.news_title, this.news_desc,this.web_url});
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(
builder: (context) => article_view(
web_url: web_url,
)
));
},
child: Container(
margin: EdgeInsets.only(bottom: 16),
child: Column(
children: <Widget>[
ClipRRect(borderRadius: BorderRadius.circular(6), child: Image.network(imageurl)),
SizedBox(
height: 8,
),
Text(news_title, style: TextStyle(fontSize: 17,fontWeight: FontWeight.w600)),
SizedBox(
height: 8,
),
Text(news_desc, style: TextStyle(color: Colors.black54))
],
),
),
);
}
}
You could go with the InkWell Widget. It provides a tapping/holding color effect similar to that. Have a look at the official docs here:
https://api.flutter.dev/flutter/material/InkWell-class.html
Note that you need a Material Widget as an ancestor of your InkWell, but the docs explain that more.
Hope it works for you!
Edit: Sorry, since you are working with a Container, Ink is also important for you:
https://api.flutter.dev/flutter/material/Ink-class.html
Check the docs section "The ink splashes aren't visible!" for why that is.
Click Here for Image! Click here to see error when i input 'itemCount' I want to ask, I am having trouble using the List.builder () feature. where I can't limit the data contained in the list so that it will display an error message about the error range. Here is the source code that I gave.
_sort = <Sort>[
Sort(
category: 'By Games',
item: new Container(
height: 200,
child: new Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
//itemCount: allGames['games'].length,
itemBuilder: (context, index) {
return Container(
child: Padding(
padding: const EdgeInsets.all(15),
child: Text(allGames['games'][index]['game_title'].toString(), style: new TextStyle(color: Colors.white)),
),
);
},
)))),
and here i call the 'Category' and 'Item'. I wrap it in a wrap widget. then for categories, I did divide it into 3 parts. then every part in the category I named 'items' and the problem is the items here have excess capacity so that the data displayed is leftover and not on target.
child: Wrap(
children: <Widget>[
ListView.builder(
shrinkWrap: true,
itemCount: 3,
itemBuilder: (context, index) {
context = context;
if (index < 2) {
final sort = _sort[index];
return ExpansionTile(
title: ListTile(
title: Text(
sort.category,
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
),
children: <Widget>[
ListTile(
title: sort.item,
)
],
);
} else {
),
You're accessing allGames["games"] and it says that you're trying to use [] on null.
Seems like allGames is null, so put an eye on that.
Other than that, your use of itemCount is fine!
You can add some null awareness by doing something like this:
itemCount = allGames != null ? (allGames["games"]?.length ?? 0) : 0
I think when the build method runs at the first time, your allGames is null. So, try to add a default value, for example:
itemCount: allGames['games'].length ?? 0
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,
);
},
),
),
),
),