If i use Navigator, class is finished by itself.
I just want to delete the list.
code image is here
body: Container(
child: Center(
child: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: launchButton('linkbutton','https://stackoverflow.com/questions/ask'),
trailing: OutlinedButton(
onPressed: () {
},
child: Icon(Icons.delete_forever),
Add an itemCount to your ListView.Builder.
Then if you want to delete the item at the given index, you can create a function and put it in your onpressed
deleteItem(int index){
yourList.removeWhere(index);
}
Related
I have a ListView inside a Column:
SizedBox(width: 100, height: 100, child: ListView.builder(
shrinkWrap: true,
itemCount: _listHours.length,
itemBuilder: (context, index) {
return ListTile(
title: Center(child: Text(_listHours[index].toString())),
selected: index == _selectedIndexHours,
dense: true,
selectedTileColor: Colors.indigo.withOpacity(0.6),
onTap: () {
setState(() {
_selectedIndexHours = _listHours[index];
});
},
);
}
),),
When an item is selected, the selection itself is visible by scrolling the entire length of the screen.
You are having a problem similar to this one where the ListTile's decoration renders outside the ListView. There is no solution for this yet but you can implement some workarounds. In this section of code, I set on "null" the ListTile's "onTap" parameter and wrapped it with a GestureDetector widget. Like this:
SizedBox(width: 100, height: 100, child: ListView.builder(
shrinkWrap: true,
itemCount: _listHours.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
setState(() {
_selectedIndexHours = _listHours[index];
});
}
child: ListTile(
title: Center(child: Text(_listHours[index].toString())),
selected: index == _selectedIndexHours,
dense: true,
selectedTileColor: Colors.indigo.withOpacity(0.6),
onTap: null
)
);
}
),
),
I hope this works for you.
I have a Post class that creates a Post model. And I want to create this model every time a user clicks the flat button. What's the best way to go about this using the onPressed function?
It's going to be a post that holds the text the user adds to the text field and when they submit it will show on a new post.
u can try use listview.builder, this the simple example how to use it. i just edit default code when we created new project.
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView.builder(
itemCount: _counter,
reverse: true,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
color: Colors.red,
child: Center(child: Text('data $index')),
),
);
},
)
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
Basically you want to add items to a list, and then render the contents of that list.
List<String> messages = [];
...
onPressed: ()=> setState(()=>messages.add("SomeText"))
Then render the list:
//Can use the map() api, to convert the list of Strings into a list of widgets:
List<Widget> children = messages.map((m) => Text(m));
return ListView(children: children);
//Or, use ListView.builder() to create the widgets on demand:
return ListView.builder(
itemBuilder: (context, index)=>Text(messages[index]),
itemCount: messages.length
)
The builder method is better optimized for large lists.
here is simple demo
List<String> posts = [];
#override
Widget build(BuildContext context) {
return Scaffold(body: Column(
children: <Widget>[
ListView.builder(
itemCount: posts.length,
itemBuilder: (BuildContext ctxt, int index) {
return new Text(posts[index]);//use any widget
}
),
FloatingActionButton(
backgroundColor: Colors.white,
child: Icon(
Icons.close,
color: Colors.red,
),
onPressed: () {
setState(() {
posts.add(newpost);//add what you want
});
},
),
]),
);
}
i hope it helps..
I want to create listview like this image. How can I achieve this using flutter?
Please do a favour if you know how to make it?
You need a List view widget and with builder which contains a card widget which has Row as child.
ListView :-
ListView.builder(
padding: EdgeInsets.all(10.0),
shrinkWrap: false,
itemCount: model.length,
itemBuilder: (BuildContext context, int index) {
return listItem(context, index);
},
List item :-
model is removed
Widget listItem(BuildContext context, int index) {
return Card(
child: Row(
children: <Widget>[
Container(margin: EdgeInsets.all(10),child: Text("1")),
Container(height: 20,width: 1,color: Colors.blue,),
Container(margin:EdgeInsets.all(10),child: Text("asdasd"))
],
),
);
}
I want to know how can i make items in a list view builder clickable so i can change text in the body (outside list view builder) because I am using a map<> data
ListView.builder(
itemCount: values.length,
itemBuilder: (BuildContext context, int index) {
String key = values.keys.elementAt(index);
return new Column(
children: <Widget>[
new ListTile(
title: new Text("$key"),
subtitle: new Text("${values[key]}"),
),
new Divider(
height: 2.0,
),
],
);
},
);
new Text("${values[key]}"), i want to use this on body and change the text when i click on specific item .. thanks
You can use a variable to keep track on changes
1* declare variable
var myVar = "";
2* Edit your code
ListView.builder(
itemCount: values.length,
itemBuilder: (BuildContext context, int index) {
String key = values.keys.elementAt(index);
return new GestureDetector(
onTap: (){
setState((){myVar = values[key]});},
child: Column(
children: <Widget>[
new ListTile(
title: new Text("$key"),
subtitle: new Text("${values[key]}"),
),
new Divider(
height: 2.0,
),
],
));
},
);
3* Then on body you can use it like this
Text(myVar)
I am trying to build a ListView with dividers between each ListTile.
I saw that there is a static method to do that called divideTiles() but i did not understand how to use that.. How/where is this function used?
My code is a simple ListView with ListTiles as children.
ListView(
children: ListTile.divideTiles(
context: context,
tiles: [
// your widgets here
]
).toList(),
)
Alternatively you can go with ListView.separated:
ListView.separated(
itemCount: 42,
itemBuilder: (context, index) {
// your widget here
},
separatorBuilder: (context, index) {
return Divider();
},
);
Here is a supplemental answer that shows what the divider looks like:
ListView(
children: ListTile.divideTiles(
context: context,
tiles: [
ListTile(
title: Text('Horse'),
),
ListTile(
title: Text('Cow'),
),
ListTile(
title: Text('Camel'),
),
ListTile(
title: Text('Sheep'),
),
ListTile(
title: Text('Goat'),
),
]
).toList(),
)
From here
If you are using listview you can go with this alternate
ListView.builder(itemBuilder: (context, index){
return ListTile(title: new Column(children: <Widget>[
new Text('Hello how are you?'),
new Divider(height: 20.0,)// add value for height or leave it blank for default
],) );
})