This is my Json data:
call_record: [
{
"machine_location":"Restaurant",
"allocation_date:"2008-08-31"
"status":"C",
"customer_address":"pune"
}
{
"machine_location":"Restaurant",
"allocation_date:"2008-08-31"
"status":"N",
"customer_address":"pune"
}
{
"machine_location":"Restaurant",
"allocation_date:"2008-08-31"
"status":"O",
"customer_address":"pune"
}]
In my app i want to show data in listview whose date is allocation_date=2008-08-31
Here is my code for display data in ListView:
Widget todayCall(BuildContext context,resultCheck3){
return Container(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child:Text("Today's Calls"),
),
],
),
FutureBuilder(
future: api3,
builder: (context,snapshot){
if (snapshot.data != null) {
return Container(
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext conxt, int index) {
return Card(
child: Padding(
child: ExpansionTile(
title: Text('${snapshot.data[index]['customer_name']}')
subtitle: Text('${snapshot.data[index] ['error_message']}'"\n"'${snapshot.data[index]['allocation_date']}'
trailing: Icon(Icons.arrow_drop_down,size: 30.0,
children: <Widget>[
ListTile(
title: Text("Machine Model",style: TextStyle(fontSize:13)),
subtitle: Text('${snapshot.data[index]['machine_type']}')
),
ListTile(
title: Text("Location",style: TextStyle(fontSize:13)),
subtitle: Text('${snapshot.data[index]['location_address']}')
),
])))
}))
}}))])
I called this method in Body():
body: Stack(
children: <Widget>[
ListView(
children: <Widget>[
callSummary(context,resultCheck2),
todayCall(context,resultCheck3),
],
),
],
),
[now in my output all data in list view ][1]
[1]: https://i.stack.imgur.com/B3VIz.png .show data whose allocation_date is 2008-08-31
Before returning a widget in the future builder, you can check if the date condition is satisfied.
if (snapshot.data != null) {
return Container(
child: ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext conxt, int index) {
if(snapshot.data[index]['allocation_date'] == '2008-08-31'){
return Card(.....
.
.
.
else{
return Container(height: 0); //return a container with zero height in the else case because you cant return a null and your return must be a widget
}
.
.
.
You can create a filter icon above the listview, so you can use the date picker to select the date and based on the date you can filter the list and show it in your list view.
let me know if this works for you.
Thanks
Related
This is the code where the error occurred using GetX. If anyone want to help thanks for advance
body: SafeArea(
child: Column(
children: [
Expanded(
child: GetX<CustomerController> (
builder: (customerController) {
return ListView.builder(
itemCount: customerController.count,
itemBuilder: (context, index) {
return ListTile(
selectedTileColor:Colors.blueGrey.shade50,
title: Text(customerController.results.string),
);
});
},
),
)
],
),
),
Create a GetX Controller and then assign it to your GetX Widget
GetX<ControllerName>(
builder: (customerController) {
return ListView.builder(
itemCount: customerController.controllervalueinobx.length, //should be obx/Rx type variable
itemBuilder: (context, index) {
return ListTile(
selectedTileColor: Colors.blueGrey.shade50,
title: Text(
"customerController.results.string",
), );
});
},
),
How I can display list View with multi-type for example(item 1: text, item 2: image with Text ...)
using flutter?
Here is the code:
I need to make the ListView show onlyText in item1, imageWithText for item2 and so on, How I can do that?
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
SizedBox(height: 5),
ListView.separated(
shrinkWrap: true,
itemBuilder: (context, index) => onlyText(),
separatorBuilder: (context, index) => SizedBox(height: 10),
itemCount: 100,
),
],
),
);
}
}
Widget imageWithText() => Container(
child: Card(
child: Row(
children: [
Text(
'sara ahmad',
style: TextStyle(fontSize: 16),
),
SizedBox(width: 10),
Image.network(
'https://th.bing.com/th/id/R.e3a5da5209f4c39f1899456c94371a6f?rik=mz9sVBWxRJKGgA&riu=http%3a%2f%2fmedia1.santabanta.com%2ffull1%2fAnimals%2fHorses%2fhorses-62a.jpg&ehk=o%2fS9l8DSJtUbl%2bYcrwLMJy6W4MfUby7bTUHRwJu7a%2bU%3d&risl=&pid=ImgRaw&r=0',
width: 100,
height: 100,
),
],
),
),
);
Widget onlyText() => Container(
child: Card(
child: Row(
children: [
Text(
'sara ahmad',
style: TextStyle(fontSize: 16),
),
SizedBox(width: 10),
Text('Nour'),
],
),
),
);
In the itemBuilder you can check if the item is only text or image with text with a ternary operator ?:, i.e. condition ? expr1 : expr2, like so:
itemBuilder: (context, index) => index == 0 ? onlyText() : imageWithText(),
Or, if you have a list of more than 2 items it could be something like this (assuming the items have a property bool isOnlyText):
itemBuilder: (context, index) => _chats[index].isOnlyText
? onlyText()
: imageWithText(),
Below is the result of the 1st snippet above:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
SizedBox(height: 5),
Expanded(
child: ListView.separated(
shrinkWrap: true,
itemBuilder: (context, index) =>
index == 0 ? onlyText() : imageWithText(),
separatorBuilder: (context, index) => SizedBox(height: 10),
itemCount: 100,
),
),
],
),
);
}
///crete an empty widget list
List<Widget> item_list=[];
///create a function to add data to list and call this function in the initstate
add_items_to_list()async{
item_list.add(Text(('data')));
item_list.add(Image.asset('name'));
///add as much as you want
}
///use widget as below
Widget items()=>ListView(
children: item_list,
);
if you want to show static list, you can do like this
itemBuilder: (context, index) => index.isEven
? onlyText()
: imageWithText(),
or you have dynamic data then follow below
let's assume you have list of Model class like this
class Model{
String text,
String img,
}
var list = <Model>[]; //your data will be here
and to check if is there only image, you need condition like below,
so in your ListView you can check like this
itemBuilder: (context, index) => list[index].img == null
? onlyText()
: imageWithText(),
I'm creating a chat feature in flutter but noticed this behavior on IOS that doesnt shrink the list so you can see the last sent message. How can I have the listview builder shrink to show the last message when the keyboard appears?
Note: This issue doesn't happen on Android
Scaffold(
resizeToAvoidBottomInset: true,
body: Stack(
children: <Widget>[
StreamBuilder(
stream: _chats,
builder: (context, snapshot) {
if (!snapshot.hasData) return Container();
return snapshot.hasData
? GestureDetector(
onPanDown: (_) {
FocusScope.of(context).requestFocus(FocusNode());
},
child: ListView.builder(
shrinkWrap: true,
controller: _scrollController,
padding: EdgeInsets.only(top: 10, bottom: 100),
itemCount: snapshot.data.docs.length,
itemBuilder: (context, index) {
return MessageWidget(
tripId: widget.docId,
uid: snapshot.data.docs[index].data()["uid"],
messageId: snapshot.data.docs[index].id,
message: snapshot.data.docs[index].data()["message"],
sender: snapshot.data.docs[index].data()["senderName"],
sentByMe: widget.uid ==
snapshot.data.docs[index].data()["uid"],
mediaFileUrl:
snapshot.data.docs[index].data()["mediaFileUrl"],
);
}),
)
: Container();
},
);
]
)
)
I think you can try the 'reverse' property from the ListView.builder.
Tell me if this example didn't fit your needs, can you share us your code ? (I didn't see why you use a Stack and what could be the issue around that).
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: Stack(
children: <Widget>[
StreamBuilder<dynamic>(
builder: (context, dynamic snapshot) {
return GestureDetector(
onPanDown: (_) {
FocusScope.of(context).unfocus();
},
child: ListView.builder(
reverse: true,
shrinkWrap: true,
itemCount: 100,
padding: const EdgeInsets.only(top: 10, bottom: 10),
itemBuilder: (context, index) {
return ListTile(title: Text(index.toString()));
},
),
);
},
),
],
),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.black12,
child: const TextField(),
),
],
),
);
}
}
I will describe my problem from the very first time. I have a page with BottomNavigationBar, ListView, and a Custom Search Widget (using TextField inside it). Whenever I use the Search Widget the keyboard appears and bringing unnecessary white box on it (I have browsed this problem a lot and found this fix by using resizeToAvoidBottomInset: false as my Scaffold property. Using that property fixes the white box problem, but it gives a new problem: bottom-half of my ListView is now blocked by the keyboard because the ListView height is not getting resized when the keyboard appears.
Here is my view code:
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
},
child: SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: double.infinity,
margin: EdgeInsets.all(16),
child: const Text("Inventory",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: "Quicksand",
fontSize: 20,
fontWeight: FontWeight.w700)),
),
Container(
child: _buildSearch(),
),
Flexible(
child: Container(
child: FutureBuilder(
future: _fetchData(),
builder: (context, AsyncSnapshot snapshot) {
if (isFiltered) {
isFiltered = false;
return ListView.builder(
// itemCount: snapshot.data.length,
physics: BouncingScrollPhysics(),
itemCount: arrFilteredStock.length,
itemBuilder: (context, index) {
var id = arrFilteredStock[index].id;
var code = arrFilteredStock[index].itemCode;
var comname = arrFilteredStock[index].itemComname;
var unit = arrFilteredStock[index].itemUnit;
var qty =
arrFilteredStock[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
} else {
if (snapshot.data == null) {
return Container(
child: const Center(
child: Text("Loading..."),
));
} else {
return ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
var id = snapshot.data[index].id;
var code = snapshot.data[index].itemCode;
var comname = snapshot.data[index].itemComname;
var unit = snapshot.data[index].itemUnit;
var qty =
snapshot.data[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
}
}
}),
)
)
]))),
);
}
I have found a temporary solution:
White necessary white box is gone, ListView can be scrolled until the last data in it. Only problem is after scrolled until the final data of ListView, the white box appears again. I think this is better comparing to other solutions.
Here's the revisioned code:
#override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
return GestureDetector(
onTap: () {
FocusManager.instance.primaryFocus?.unfocus();
},
child: SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
Container(
width: double.infinity,
margin: EdgeInsets.all(16),
child: const Text("Inventory",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: "Quicksand",
fontSize: 20,
fontWeight: FontWeight.w700)),
),
Container(
child: _buildSearch(),
),
Flexible(
child: Container(
child: FutureBuilder(
future: _fetchData(),
builder: (context, AsyncSnapshot snapshot) {
if (isFiltered) {
isFiltered = false;
return ListView.builder(
// itemCount: snapshot.data.length,
padding: EdgeInsets.only(bottom: bottom),
physics: BouncingScrollPhysics(),
itemCount: arrFilteredStock.length,
itemBuilder: (context, index) {
var id = arrFilteredStock[index].id;
var code = arrFilteredStock[index].itemCode;
var comname = arrFilteredStock[index].itemComname;
var unit = arrFilteredStock[index].itemUnit;
var qty =
arrFilteredStock[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
} else {
if (snapshot.data == null) {
return Container(
child: const Center(
child: Text("Loading..."),
));
} else {
return ListView.builder(
padding: EdgeInsets.only(bottom: bottom),
physics: BouncingScrollPhysics(),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
var id = snapshot.data[index].id;
var code = snapshot.data[index].itemCode;
var comname = snapshot.data[index].itemComname;
var unit = snapshot.data[index].itemUnit;
var qty =
snapshot.data[index].itemStockBalanceQty;
return StockCard(
stock: Stock(id, code, comname, unit, qty));
},
);
}
}
}),
)),
]))),
);
}
This is just a temporary solution. Any solution will be appreciated.
Add this padding in your code at the top of your fields when you add data keyboard appears first wrape in container then check other area I resolved same issue adding this
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom));
i can't seem to solve this problem, for me the code it's correct, but i can't see where the error is. What do i need to return for the listview? Should i put the listview.builder in another place? the listbuild is returning the _buildTitleSection and the _buildCreditCard so i can't seem to understand it.
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListView.builder(
itemCount: users == null ? 0 : users.length,
itemBuilder: (context, index) { //This is giving me "error" ***
_buildTitleSection(
title: "Names", subTitle: "User informations");
_buildCreditCard(
url: users[index].imageURL,
color: Color(0xFF1E90FF),
cardExpiration: users[index].cardExpiration,
cardHolder: users[index].cardHolder,
cardNumber: users[index].cardNumber);
SizedBox(
height: 15,
);
},
),
],
),
),
);
}
***This function has a return type of 'Widget', but doesn't end with a return statement.
Try adding a return statement, or changing the return type to 'void'.
Builder methods need to return an object of type Widget so in order to get your code working you need to return your widgets, you have more than one widget, you have to wrap them in a Column or a Row..
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ListView.builder(
itemCount: users == null ? 0 : users.length,
itemBuilder: (context, index) {
return Column(
children: [
_buildTitleSection(
title: "Names", subTitle: "User informations"),
_buildCreditCard(
url: users[index].imageURL,
color: Color(0xFF1E90FF),
cardExpiration: users[index].cardExpiration,
cardHolder: users[index].cardHolder,
cardNumber: users[index].cardNumber),
SizedBox(
height: 15,
),
]
);
},
),
],
),
),
);
}