How could I do so that on the onTap of the line I open another ListTile below?
return ListTile(
title: Html(data: "<br/> <b>${team[index]['code']}</b>"),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
setState(() {
// call open colapsed or child listtile here
});
},
);
If I understand your question correctly, you want to show more ListTile items when the user taps on one of the ListTile items?
If that's the case, you can use ExpansionTile instead.
Here is an example code:
ExpansionTile(
onExpansionChanged: (res) {
print(res ? 'Open' : 'Close');
},
title: Text('Dropdown'),
children: [
ListTile(
title: Text('Test #1'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('Test #1');
},
),
ListTile(
title: Text('Test #1'),
trailing: Icon(Icons.keyboard_arrow_right),
onTap: () {
print('Test #1');
},
),
],
)
P.S. You can also nest ExpansionTile inside another ExpansionTile.
Related
Is there a widget that is kind of like the Modal BottomSheet() where you call using the showModalBottomSheet function, but instead it is not sticking at the bottom but floating in the middle of the screen? like an alert dialog but you can add textField into it.
Do you mean SimpleDialog?
SimpleDialog(
title: Text('Choose food'),
children:[
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, "Pizza"); },
child: const Text('Pizza'),
),
SimpleDialogOption(
onPressed: () {
Navigator.pop(context, "Burger");
},
child: const Text('Burger'),
),
],
elevation: 10,
//backgroundColor: Colors.green,
)
Okay, so I think I am stuck with flutter builder a little bit.
I've created simple app, just to make my question easier:
I have a data class:
class DataLists {
List<ListTile> lists = [
ListTile(
leading: Text('Tile Leading 1'),
title: Text('Tile Title 1'),
subtitle: Text('Tile Subtitle 1'),
trailing: Text('Tile Trailing 1'),
),
ListTile(
leading: Text('Tile Leading 2'),
title: Text('Tile Title 2'),
subtitle: Text('Tile Subtitle 2'),
trailing: Text('Tile Trailing 2'),
),
ListTile(
leading: Text('Tile Leading 3'),
title: Text('Tile Title 3'),
subtitle: Text('Tile Subtitle 3'),
trailing: Text('Tile Trailing 3'),
),
ListTile(
leading: Text('Tile Leading 4'),
title: Text('Tile Title 4'),
subtitle: Text('Tile Subtitle 4'),
trailing: Text('Tile Trailing 4'),
),
ListTile(
leading: Text('Tile Leading 5'),
title: Text('Tile Title 5'),
subtitle: Text('Tile Subtitle 5'),
trailing: Text('Tile Trailing 5'),
),
];
}
And main dart file:
import 'package:flutter/material.dart';
import 'package:learning/data.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: TestTile(),
);
}
}
class TestTile extends StatefulWidget {
#override
_TestTileState createState() => _TestTileState();
}
class _TestTileState extends State<TestTile> {
DataLists dataLists = DataLists();
TextEditingController leadingController = TextEditingController();
TextEditingController titleController = TextEditingController();
TextEditingController subtitleController = TextEditingController();
TextEditingController trailingController = TextEditingController();
Future<String> createDialog(BuildContext context) {
return showDialog(context: context, builder: (context) {
return SimpleDialog(
title: Text('Input data: '),
children: [
TextField(
controller: leadingController,
),
TextField(
controller: titleController,
),
TextField(
controller: subtitleController,
),
TextField(
controller: trailingController,
),
MaterialButton(
child: Text('Submit'),
onPressed: () {
Navigator.of(context).pop(leadingController.text);
setState(() {
List<ListTile> tempList = dataLists.lists;
if (titleController.text.isNotEmpty && leadingController.text.isNotEmpty && subtitleController.text.isNotEmpty && trailingController.text.isNotEmpty) {
tempList.add(
ListTile(
leading: Text(leadingController.text),
title: Text(titleController.text),
subtitle: Text(subtitleController.text),
trailing: Text(trailingController.text),
),
);
dataLists.lists = tempList;
} else {
print('Null values');
}
leadingController.clear();
titleController.clear();
subtitleController.clear();
trailingController.clear();
});
},
),
],
);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test Tile'),
),
body: Container(
child: SafeArea(
child: ListView(
children: <ListTile>[
for (ListTile e in dataLists.lists)
e
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
createDialog(context);
setState(() {
});
},
child: Icon(Icons.add),
backgroundColor: Colors.blue,
),
);
}
}
The problem is: I cannot make it work in other way. Can someone change my implementation to a ListView.builder? I am stuck a little bit :(
Key goal:
Idea:
Click on a button -> form appear -> after you press a submit button list is updated instantly
I'll add a delete function later, just learning docs, nothing more.
Can someone review my code and, if no one mind, try to rewrite the same idea, but using ListView.builder?
I've tried several times, but cannot get properties correctly from the form, and update listtile using builder, need help
Cheers!
ListView.builder requires a static height, so keep a track on that one. Now, coming to the question, that you want to use ListView.builder. You can do via this
Container(
height: give_your_height,
child: ListView.builder(
shrinkWrap: true,
itemCount: dataLists.lists.length,
itemBuilder: (context, index) {
return dataLists.lists[index];
}
)
)
Try this, it may solve your issue.
ListView(
children: [
for (ListTile e in dataLists.lists)
Card(child: e)
],
),
or with ListView.builder()
ListView.builder(
itemCount: dataLists.lists.length,
itemBuilder: (context, index) {
return dataLists.lists[index];
},
);
Further Reference: https://api.flutter.dev/flutter/material/ListTile-class.html
I am facing a problem that my PopupMenuButton not showing when I click on, I tried many solutions but without success.
I am also searched in google but with not results.
I am afraid I am facing a bug.
Here is my code
enum MyMenuEntries { edit, delete }
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () =>
PopupMenuButton<MyMenuEntries>(
onSelected:
(MyMenuEntries entry) {},
itemBuilder:
(BuildContext context) => [
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.edit,
child: ListTile(
leading: Icon(Icons.edit),
title: Text("Edit")),
),
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.delete,
child: ListTile(
leading: Icon(Icons.delete),
title: Text("Delete")),
),
],
))
Please any answer could help me.
Thanks!
Instead of using an IconButton, you can use the PopUpMenuButton as is and supply the icon to its icon property. It will automatically show the PopUpMenuButton items.
So you should remove the IconButton and your code will be:
PopupMenuButton<MyMenuEntries>(
onSelected:
(MyMenuEntries entry) {},
itemBuilder:
(BuildContext context) => [
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.edit,
child: ListTile(
leading: Icon(Icons.edit),
title: Text("Edit")),
),
PopupMenuItem<MyMenuEntries>(
value: MyMenuEntries.delete,
child: ListTile(
leading: Icon(Icons.delete),
title: Text("Delete")),
),
],
icon: Icon(Icons.more_vert),
)
I have a home screen, there is a bottom tab bar with 4 bars. Now my concern is for the 1st tab bar.
There are different categories displayed in 1st tab bar for eg. as you can see in the screenshot there are 2 categories :
1) Category 1 (Motorcross, Road, and Accessories)
2) Popular categories
Now when I click on any of Category 1, I want the tab bar (4 tab bar) in the bottom but when I open the popular category I don't want that tab bar.
So I am stuck here.
My code snippet is below.
Scaffold(
backgroundColor: Colors.white,
body: GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(new FocusNode());
},
child: SafeArea(
top: true,
child: SizedBox.expand(
child: PageView(
physics: new NeverScrollableScrollPhysics(),
controller: _pageController,
onPageChanged: (index) {
setState(() => currentIndex = index);
},
children: <Widget>[
Products(),
News(),
Service(),
Events(),
],
),
),
),
),
floatingActionButton: FloatingActionButton(
elevation: 0,
child: Image.asset('assets/icons/bottom_center.png'),
backgroundColor: Colors.transparent,
focusElevation: 10,
disabledElevation: 10,
highlightElevation: 10,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return WorldCategories();
}));
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentIndex,
onTap: (index) {
setState(() {
currentIndex = index;
_pageController.jumpToPage(index);
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit), title: Text("A")),
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit), title: Text("X")),
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit), title: Text("Y")),
BottomNavigationBarItem(
icon: Icon(Icons.ac_unit), title: Text("Z")),
]),
);
and also floatingActionButton set to top on the second screen.
What is think is you can use the GestureDetector for the Popular categories text and on tap redirect it to your desired page.
GestureDetector(
onTap: () async {
// here you make your navigation for your desired page
Navigator.push(
context,
MaterialPageRoute(builder: (context) => youPage()),
);
},
child: Padding(
child: Text(
'Populat Categoreies',
),
))
Add two layouts inside products and when click motocross hide the 1st layout and display motocross layout and when clicking on popular categories
do a page navigation like
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return popularCategories();
}));
I'm trying to get a popupmenu under a ListTile. The title displays a description, the subtitle displays the selected value with some message and the onTap opens the popupmenu in which a user can select a value.
I tried putting a DropdownButtonHideUnderline in the subtitle, but this displays an arrow and does not respond to the ListTile onTab obviously.
How can I get a popupmenu on a ListTile?
Maybe you can try PopuMenuButton,
PopupMenuButton<String>(
onSelected: (String value) {
setState(() {
_selection = value;
});
},
child: ListTile(
leading: IconButton(
icon: Icon(Icons.add_alarm),
onPressed: () {
print('Hello world');
},
),
title: Text('Title'),
subtitle: Column(
children: <Widget>[
Text('Sub title'),
Text(_selection == null ? 'Nothing selected yet' : _selection.toString()),
],
),
trailing: Icon(Icons.account_circle),
),
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'Value1',
child: Text('Choose value 1'),
),
const PopupMenuItem<String>(
value: 'Value2',
child: Text('Choose value 2'),
),
const PopupMenuItem<String>(
value: 'Value3',
child: Text('Choose value 3'),
),
],
)
Take a look at How to open a PopupMenuButton?