First of all I don't know what i am facing, but I'll do my best to explain the situation.
I'm trying to build chat app and i have two sections on same page. These two different sections are rendering inside same ListView. Only thing that changing is the data which i am using to feed the ListView. I need to get the status of user in real time so i am putting tagged controllers for each tile which is rendering inside list view. Here comes the problem. The tiles rendered at the same index are not showing the true states of themselves until some state changes on that tile for example position of any Stack item.
Here is the code.
In this part I'm rendering ListView
ListView.builder(
itemCount: chatController.currentChats!.length,
itemBuilder: (context, index) {
return GetBuilder<UserOnlineController>(
global: false,
init: Get.find<UserOnlineController>(tag: chatController.currentUserID == chatController.currentChats![index].user1 ? chatController.currentChats![index].user2 : chatController.currentChats![index].user1),
builder: (userController) {
return Stack(
children: [
Positioned(
child: Container(
color: Colors.black,
width: Get.width,
height: Dimensions.h100,
child: Center(
child: Text(
"${userController.user!.name!}",
style: TextStyle(
color: Colors.white
),
),
),
)
)
],
);
}
);
}),
This is the part that I'm putting controllers and listening chats in real time.
void listenChats() async {
var chatController = Get.find<ChatController>();
var messagesController = Get.find<MessagesController>();
String userID = Get.find<SharedPreferenceService>().getUserID();
var currentUserDoc = (await firestoreService.getCollection('users').where('userID', isEqualTo: userID).get()).docs[0];
Stream<DocumentSnapshot> userStream = firestoreService.getCollection('users').doc(currentUserDoc.id).snapshots();
Stream<QuerySnapshot> chatStream = firestoreService.getCollection('chats').snapshots();
await for(var user in userStream){
var userObject = UserModel.fromJson(user.data() as Map<String,dynamic>);
await for(var chats in chatStream) {
List<Chat> activeChats = [];
List<Chat> unActiveChats = [];
List<Chat> newMatches = [];
List<Chat> allChats = [];
var filteredChats = chats.docs.where((chat) => userObject.chat!.active_chats!.contains(chat['chatID'])).toList();
filteredChats.forEach((chatDoc) {
var currentChat = Chat.fromJson(chatDoc.data() as Map<String,dynamic>);
if(currentChat.user1 == userID){
Get.put(
UserOnlineController(firestoreService: firestoreService, userID: currentChat.user2!),
tag: currentChat.user2!,
);
}
else{
Get.put(
UserOnlineController(firestoreService: firestoreService, userID: currentChat.user1!),
tag: currentChat.user1!
);
}
allChats.add(currentChat);
if(currentChat.isActive!){
if(currentChat.isStarted!){
activeChats.add(currentChat);
}
else{
newMatches.add(currentChat);
}
}
else{
unActiveChats.add(currentChat);
}
});
messagesController.generatePositions(activeChats.length, true);
messagesController.generatePositions(unActiveChats.length, false);
chatController.setAllChats(allChats);
chatController.setCurrentChats();
chatController.setChats(activeChats, unActiveChats, newMatches);
}
}
}
And this is the part that I'm using to control the UI state
void setAllChats(List<Chat> allChats) {
_allChats = allChats;
}
void setCurrentChats() {
_currentChats = _allChats!.where((chat) => chat.isActive! == isActiveMessages).toList();
update();
}
void setIsActiveMessages(bool state){
_isActiveMessages = state;
_currentChats = _allChats!.where((chat) => chat.isActive! == state).toList();
update();
}
In the above pictures all of these users are different but only true one is the third one at second screen shot.
Hello again this question basically explains all the details.
Multiple Instance with GetX tag not working in flutter
Basically you need to add key parameter.
GetBuilder<UserChatController>(
key: Key(currentUserControllerTag),
tag: currentUserControllerTag,
global: false,
init: Get.find<UserChatController>(tag: currentUserControllerTag),
builder: (controller) {
return controller.user != null ? Container(
width: Get.width,
height: Dimensions.h100,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
child: Container(
height: Dimensions.h100,
width: double.maxFinite,
color: Colors.black,
child:Center(
child: Text(
controller.user != null ? controller.user!.name! : "",
style: TextStyle(
color: Colors.white
),
),
)
))
],
),
) : Container();
},
)
Related
I have a listview.builder with data that you can click on and they will be added to the List, after this List I want to display on another screen (I do it through the provider). When clicking on the selected data for a long time, they should be deleted from the List, but I keep getting an error RangeError(index): Invalid value: Not in inclusive range 0..2: 5
my main screen
ListView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: searchMethodProvider.searchResult.length,
itemBuilder: (context, index) {
return Material(
color: Colors.transparent,
child: InkWell(
onLongPress: (){
setState(() {
searchMethodProvider.searchResult[index]['bool'] = true;
var modelApp = searchMethodProvider.marksList[index]['model'];
var indexApp = searchMethodProvider.marksList[index]['index'];
searchMethodProvider.addMark(indexApp, modelApp);
});
},
onTap: (){
setState(() {
searchMethodProvider.deleteDataIndex(index);
print(searchMethodProvider.dataMark);// searchMethodProvider.deleteDataIndex(index, context);
searchMethodProvider.searchResult[index]['bool'] = false;
});
},
child: Container(
height: 53,
width: double.infinity,
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: 0.8,
color: Color.fromRGBO(237, 237, 237, 1)
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(
left: 14.22
),
child: Text(
searchMethodProvider.searchResult[index]['mark'],
style: TextStyle(
fontFamily: ConstantsFonts.sfProRegular,
fontSize: 16,
color: Color.fromRGBO(0, 0, 0, 1)
),
),
),
),
searchMethodProvider.searchResult[index]['bool'] == true ?
Icon(
Icons.keyboard_arrow_down,
size: 18,
color: Color.fromRGBO(87, 184, 238, 1),
) : Container()
],
),
),
),
);
}
)
this is my provider and him functions
class SearchMethodInMarkFilterProvider extends ChangeNotifier {
List<Map<String, dynamic>> marksList = [
{
'mark': 'Aston Martin',
'bool': false,
'index': 1,
'model': ['x5', '23']
},
{
'mark': 'Audi',
'bool': false,
'index': 2,
'model': ['x5', '23']
},
{
'mark': 'BMW',
'bool': false,
'index': 3,
'model': ['x5', '23']
},
];
List dataMark = [];
Map addData = {};
List<Map<String, dynamic>> searchResult = [];
void addMark(int indexApp, List markData){
addData = {
'indexApp': indexApp,
'markData': markData,
};
dataMark.add(addData);
print(dataMark);
}
void deleteDataIndex(int index){
dataMark.removeAt(index);
notifyListeners();
}
SearchMethodInMarkFilterProvider(){
searchResult = marksList;
}
void runFilter(String enteredKeyword) {
List<Map<String, dynamic>> results = [];
if (enteredKeyword.isEmpty) {
results = marksList;
} else {
results = marksList
.where((user) =>
user['mark'].toLowerCase().contains(enteredKeyword.toLowerCase()))
.toList();
}
searchResult = results;
notifyListeners();
}
}
maybe I'm creating the data model incorrectly, that's why I can't delete it properly, I'll be glad of any help
This happened because your listview build on the searchResult list, but you try use its index on marksList. You have two options, either make list with marksList or change your delete function and do that on searchResult.
Sub AddStartOfMonthDates()
'set the starting date
Dim startDate As Date
startDate = DateValue("01/01/2021")
'set the ending date
Dim endDate As Date
endDate = DateValue("12/31/2021")
'set the starting row for the dates
Dim rowNum As Integer
rowNum = 1
'loop through the dates
Do While startDate <= endDate
'add the date to the column
Cells(rowNum, 1).Value = startDate
'increment the row number
rowNum = rowNum + 1
'move to the next month
startDate = DateAdd("m", 1, startDate)
Loop
End Sub
You can also adjust the starting and ending dates, as well as the starting row number, to suit your needs.
I think it will help you.
I want to figure out the position of scroll and depending on that results, I want to show some buttons.
This is my code of Scroll Widget.
Flexible(
child: Container(
constraints: BoxConstraints(
maxWidth: 730,
),
child: ListView.separated(
controller: _platformController,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
String platform = platformlistA[index].toLowerCase();
return InkWell(
onTap: () {
if (platformIndex !=
platformlistA.indexWhere(
(element) => element == platformlistA[index])) {
setState(() {
platformIndex = platformlistA.indexWhere(
(element) => element == platformlistA[index]);
});
} else {
setState(() {
platformIndex = -1;
});
}
},
child: Container(
alignment: Alignment.center,
height: 37,
width: platform != 'fortnite' ? 100 : 85,
padding: EdgeInsets.symmetric(
horizontal: 5,
),
child: WebsafeSvg.asset(
'assets/$platform.svg',
color: platformIndex ==
platformlistA.indexWhere(
(element) => element == platformlistA[index])
? Colors.black
: Color(0xffb7b7b7),
),
),
);
},
separatorBuilder: (context, index) {
return SizedBox(width: 7);
},
itemCount: platformlistA.length),
),
),
and this is the code getting the position of Scroll widget.
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
setState(() {
if (_platformController.position.maxScrollExtent > 0) {
if (_platformController.position.atEdge) {
if (_platformController.position.pixels == 0) {
print('left edge');
// show -> button at right
} else {
print('right edge');
// show <- button at left
}
} else {
print('middle of the scroll');
// show <-, -> buttons at both side
}
} else {
print('not scrollable');
// do not show any button.
}
});
});
I used WidgetsBinding.instance!.addPostFrameCallback because, it shows error if I handle with controller before the build.
Eventually, this works functionally, but it is too slow since WidgetsBinding.instance!.addPostFrameCallback in build function continues to run. I cannot put it in initstate because if() phrase has to be called everytime when the size of web application changes.
Is there any faster way than this method??? Please help!!
Map<String, dynamic> toJson() => {
'name': name,
'email': email,
};
Try adding => front of toJson()
I'm trying to build a sort function in order to sort JSON data.
For this, I have a button that opens a "showModalBottomSheet".
Within it I can choose the following data of the school class numbers.
So in my data I have 6 classrooms when loading in my constructor.
My filter is represented by buttons which are active or not if the filter contains the number of the classroom. My code works pretty much, my problem is that when I select a filter button in order to activate or not the filter, the button is deleted instead of staying but changing color
My notifier :
class TablesNotifier with ChangeNotifier {
// Services
// ---------------------------------------------------------------------------
final jsonSelectorService = locator<JsonSelectorService>();
// Variables
// ---------------------------------------------------------------------------
//all data from my classerooms in JSON
List<ClassroomModel> classrooms;
// Data that I will display and reconstruct based on my filter parameters
List<ClassroomModel> classroomsFiltered;
List<int> numberOfClassrooms = List();
// Model which will store the parameters of my filters and as a function I will load the data to display
FilterClassroomsModel filterClassroomsModel = FilterClassroomsModel();
// Constructor
// ---------------------------------------------------------------------------
TablesNotifier(){
_initialise();
}
// Initialisation
// ---------------------------------------------------------------------------
Future _initialise() async{
classrooms = await jsonSelectorService.classrooms('data');
classroomsFiltered = classrooms ;
// I install the number of existing classrooms
// Here the result is [1,2,3,4,5,6]
classrooms.forEach((element) {
if(!numberOfClassrooms.contains(element.type)){
numberOfClassrooms.add(element.type);
}
});
// I install the number of classrooms activated by default in my filter
// As I decide to display all my classrooms by default
// My filter on the classrooms must contain all the loaded classrooms
filterClassroomsModel.classrooms = numberOfClassrooms;
notifyListeners();
}
// Functions public
// ---------------------------------------------------------------------------
void saveClassroomsSelected(int index)
{
// Here my classroom model also contains the numbers of the classrooms that I want to filter
if(filterClassroomsModel.classrooms.contains(index)){
filterClassroomsModel.classrooms.remove(index);
}else{
filterClassroomsModel.classrooms.add(index);
}
notifyListeners();
}
}
I have identified that in my function initialize () if I change my code by this it works :
filterClassroomsModel.classrooms= numberOfClassrooms; // this
filterClassroomsModel.classrooms= [1,2,3,4,5,6]; // By this
I am losing the dynamic side of my classroom calculation and that does not suit me. But I don't understand this behavior.
My view :
class TableScreen extends StatelessWidget {
final String title;
TableScreen({Key key, #required this.title}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: MenuDrawerComponent.builder(context),
appBar: AppBar(
backgroundColor: AppColors.backgroundDark,
elevation: 0,
centerTitle: true,
title: Text(title),
),
floatingActionButton: FloatingActionButton.extended(
icon: Icon(Icons.sort),
label: Text('Filter'),
onPressed: () async{
slideSheet(context);
},
backgroundColor: AppColors.contrastPrimary,
),
body: _buildBody(context),
);
}
Widget _buildBody(BuildContext context)
{
var _tableProvider = Provider.of<TablesNotifier>(context);
if(_tableProvider.chargesFiltered == null){
return Center(
child: CircularProgressIndicator(
backgroundColor: AppColors.colorShadowLight,
),
);
}else{
return Column(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.only(top: 10, right : 20, left : 20),
child: ListView.builder(
itemCount: _tableProvider.classroomsFiltered.length,
itemBuilder: (context, index){
return Container(
child: Column(
children: [
Row(
// Some classrooms data
),
],
),
);
},
),
)
),
],
);
}
}
void slideSheet(BuildContext context) {
var _tableProvider = Provider.of<TablesNotifier>(context, listen:false);
showModalBottomSheet(
context: context,
isScrollControlled: true,
isDismissible: true,
builder: (context) {
return Wrap(
children: [
Container(
color: Color(0xFF737373),
child: Container(
child: Column(
children: <Widget>[
// Some filters ...
// Here I want to rebuild the list of button for show the changes
ChangeNotifierProvider.value(
value: _tableProvider,
child: Consumer<TablesNotifier>(
builder: (context, model, child){
return _listOfClassrooms(context);
}
),
),
],
),
),
),
]
);
});
}
Widget _listOfClassrooms(BuildContext context){
var _tableProvider = Provider.of<TablesNotifier>(context);
List<Widget> list = List<Widget>();
var listClassrooms = _tableProvider.numberOfClassrooms;
var filterClassrooms = _tableProvider.filterClassroomsModel.classrooms;
for (var i = 0; i < listClassrooms.length; i++) {
int selectIndex = 0;
if(filterClassrooms.contains(listClassrooms[i])){
selectIndex = listClassrooms[i];
}
list.add(
RadioComponent(
text: "${listClassrooms[i]}",
index: listClassrooms[i],
width: (MediaQuery.of(context).size.width - 56) /3,
selectedIndex: selectIndex,
onPressed: _tableProvider.saveChargesSelected,
),
);
}
return Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 8.0, // gap between lines
children: list
);
}
}
My FilterClassroomsModel :
class FilterClassroomsModel {
int order;
int sort;
List<int> classrooms;
FilterClassroomsModel ({
this.order = 0,
this.sort = 0,
this.classrooms = const[],
});
#override
String toString() {
return '{ '
'${this.order}, '
'${this.sort}, '
'${this.classrooms}, '
'}';
}
}
EDIT : Resolved topic. Thanks to Javachipper.
In the notifier I replace that :
filterClassroomsModel.classrooms = numberOfClassrooms;
By that :
filter.classrooms = List<int>();
filter.classrooms.addAll(numberOfClassrooms);
change this:
filterClassroomsModel.classrooms = numberOfClassrooms;
to:
filterClassroomsModel.classrooms.addAll(numberOfClassrooms);
Update (you can also do it like this):
filterClassroomsModel.classrooms= new List<int>();
filterClassroomsModel.classrooms.addAll(numberOfClassrooms);
Here's the context:
In my app, users can create a question, and all questions will be displayed on a certain page. This is done with a ListView.builder whose itemBuilder property returns a QuestionTile.
The problem:
If I create a new question, the text of the new question is (usually) displayed as the text of the previous question.
Here's a picture of me adding three questions in order, "testqn123", "testqn456", "testqn789", but all are displayed as "testqn123".
Hot restarting the app will display the correct texts for each question, but hot reloading wont work.
In my _QuestionTileState class, if I change the line responsible for displaying the text of the question on the page, from
child: Text(text)
to
child: Text(widget.text)
the issue will be resolved for good. I'm not super familiar with how hot restart/reload and state works in flutter, but can someone explain all of this?
Here is the code for QuestionTile and its corresponding State class, and the line changed is the very last line with words in it:
class QuestionTile extends StatefulWidget {
final String text;
final String roomName;
final String roomID;
final String questionID; //
QuestionTile({this.questionID, this.text, this.roomName, this.roomID});
#override
_QuestionTileState createState() => _QuestionTileState(text);
}
class _QuestionTileState extends State<QuestionTile> {
final String text;
int netVotes = 0;
bool expand = false;
bool alreadyUpvoted = false;
bool alreadyDownvoted = false;
_QuestionTileState(this.text);
void toggleExpansion() {
setState(() => expand = !expand);
}
#override
Widget build(BuildContext context) {
RoomDbService dbService = RoomDbService(widget.roomName, widget.roomID);
final user = Provider.of<User>(context);
print(widget.text + " with questionID of " + widget.questionID);
return expand
? ExpandedQuestionTile(text, netVotes, toggleExpansion)
: Card(
elevation: 10,
child: Padding(
padding: const EdgeInsets.fromLTRB(10, 7, 15, 7),
child: GestureDetector(
onTap: () => {
Navigator.pushNamed(context, "/ChatRoomPage", arguments: {
"question": widget.text,
"questionID": widget.questionID,
"roomName": widget.roomName,
"roomID": widget.roomID,
})
},
child: new Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Column(
// the stack overflow functionality
children: <Widget>[
InkWell(
child: alreadyUpvoted
? Icon(Icons.arrow_drop_up,
color: Colors.blue[500])
: Icon(Icons.arrow_drop_up),
onTap: () {
dynamic result = dbService.upvoteQuestion(
user.uid, widget.questionID);
setState(() {
alreadyUpvoted = !alreadyUpvoted;
if (alreadyDownvoted) {
alreadyDownvoted = false;
}
});
},
),
StreamBuilder<DocumentSnapshot>(
stream: dbService.getQuestionVotes(widget.questionID),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
} else {
// print("Current Votes: " + "${snapshot.data.data["votes"]}");
// print("questionID: " + widget.questionID);
return Text("${snapshot.data.data["votes"]}");
}
},
),
InkWell(
child: alreadyDownvoted
? Icon(Icons.arrow_drop_down,
color: Colors.red[500])
: Icon(Icons.arrow_drop_down),
onTap: () {
dbService.downvoteQuestion(
user.uid, widget.questionID);
setState(() {
alreadyDownvoted = !alreadyDownvoted;
if (alreadyUpvoted) {
alreadyUpvoted = false;
}
});
},
),
],
),
Container(
//color: Colors.red[100],
width: 290,
child: Align(
alignment: Alignment.centerLeft,
child: Text(text)), // problem solved if changed to Text(widget.text)
),
}
}
You can wrap your UI with a Stream Builder, this will allow the UI to update every time any value changes from Firestore.
Since you are using an item builder you can wrap the widget that is placed with the item builder.
That Should update the UI
I have a grid data on my page. I want to compare these data to another list like (id 1,2,3,4,5).
GridView.builder(
itemCount: course == null ? 0 : course.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (MediaQuery.of(context).orientation == Orientation.portrait) ? 3 : 4),
itemBuilder: (BuildContext context, int index) {
return Card(
child:InkWell(
onTap: () {
setState(() {
courseid = course[index]['id'];
coursename=course[index]['name'];
});
addCourse(course[index]['about']);
},
child:Column(
children: <Widget>[
Text((coursedata['courseid'] == course[index]['id']) ? "Added" : ""),
IconButton(
icon: index.isEven ? Icon(Icons.school) : Icon(Icons.book),
iconSize:MediaQuery.of(context).orientation == Orientation.portrait ?30 : 30,
color: index.isOdd ? Colors.amber[800]: Colors.green[800],
onPressed: (){
getcourseData();
},
),
Text(course[index]['name']),
],
),
),
);
},
),
This is another list data gets from a firebase database.
getcourseData() async {
databaseReference.collection(user.email).getDocuments().then((querySnapshot) {
querySnapshot.documents.forEach((result) {
coursedata=result.data;
});
});
}
Both the above lists are compared using data ids.
coursedata['courseid'] == course[index]['id']) ? "Added" : ""
Kindly help on how to compare data in Gride view builder. Currently, only one data show "Added" though there are other data too not showing "Added" in view.
I have created a demo. Change as per your requirement.
import 'package:flutter/material.dart';
void main() =>
runApp(MaterialApp(home: GridViewDemo()));
class GridViewDemo extends StatefulWidget {
#override
_GridViewDemoState createState() => _GridViewDemoState();
}
class _GridViewDemoState extends State<GridViewDemo> {
// already added indices numbers
List<int> alreadyAddedIndices = [3,4,5,6,7];
var courseid = 0;
var coursename = "default";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(("GridView Demo")),
),
body: SingleChildScrollView(
child: Column(
children: [
GridView.builder(
itemCount: 5,
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (MediaQuery.of(context).orientation == Orientation.portrait) ? 3 : 4),
itemBuilder: (BuildContext context, int index) {
return Card(
child:InkWell(
onTap: () {
setState(() {
// change as per your code
courseid = index;
coursename=index.toString();
// add index in list if not available
// tapping again, remove index from list
alreadyAddedIndices.contains(index)?alreadyAddedIndices.remove(index):alreadyAddedIndices.add(index);
});
},
child:Column(
children: <Widget>[
Text((alreadyAddedIndices.contains(index)) ? "Added" : ""),
Icon(index.isEven ? Icons.school : Icons.book,
size:MediaQuery.of(context).orientation == Orientation.portrait ?30 : 30,
color: index.isOdd ? Colors.amber[800]: Colors.green[800],),
// course name text
const Text("course Name"),
],
),
),
);
},
),
],
),
),
);
}
}
Output:
Note:
This is a demo code. You can get all the added course ids in alreadyAddedIndices list. Change code as per the need.
The line,
Text((coursedata['courseid'] == course[index]['id']) ? "Added" : ""),
is only comparing one value as you are iterating over only one list. Try calling a method that returns a boolean value or a Text widget by iterating over both the lists. If the function returns false only then do you add to the list. Here is an example of a sudo code that return a Text widget:
_ComparingLists(int id) {
bool temp = false;
for (int i = 0; i < coursedata['courseid'].length; i++) {
if ((coursedata['courseid'][i] == id)) {
temp = true;
break;
} else {
temp = false;
}
}
// student is already enrolled
if (temp == true) {
return Text("Student is enrolled ...");
}
// student is not enrolled
else {
// do your operations like adding to the list here ....
return Text("No match");
}
}
You can call the method by :
_ComparingLists(course[index]['id'])
Hope that helps :)