Блог

Я не понимаю, как динамически изменять цвет виджета постоянно на основе данных в реальном времени из socket.io. Я хочу изменить цвет виджета, когда данные будут поступать из базы данных.

 Widget build(BuildContext context) { return FutureBuilderlt;Roomgt;(  future: roomService.getRoom(),  builder: (context, snapshot){  if(snapshot.hasData){  return GridView.builder(  itemCount: snapshot.data!.data.length,  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),  itemBuilder: (context, index){  var values = snapshot.data!.data[index];  return GestureDetector(  onTap: (){  Navigator.push(context, CupertinoModalPopupRoute(builder: (context)=gt;RoomDetailScreen(20, 30, 20 30)));  },  child: Card(  shape: RoundedRectangleBorder(  borderRadius: BorderRadius.circular(15.r),  ),  color: Colors.green, //have to change here  elevation: 6,  child: Container(  alignment: Alignment.center,  child:Text(  "${values['RType']}",  style: TextStyle(  fontWeight: FontWeight.bold,  fontSize: 16.sp,  color: AppColors.whiteSec),  ),  ),  ),  );  },  );  }else if(snapshot.hasError){  return Center(  child: Column(  children: const [  Center(child: Icon(Icons.error,color: AppColors.yellowPri,)),  ],  ),  );  }  return const Center(child: CircularProgressIndicator());  } );  

}

Если вам просто нужно переключаться между 2 цветами в зависимости от данных.

 child: Card(  shape: RoundedRectangleBorder(  borderRadius: BorderRadius.circular(15.r),  ),  color: snapshot.data == 'Room-1' ? Colors.green : Colors.blue,  elevation: 6,  

предполагая, что одно из ваших значений данных- «Комната-1».

Если вы будете переключаться между несколькими цветами…

 builder: (context, snapshot){  Maplt;String, Colourgt; colours = {  'Room-1': Colours.green,  'Room-2': Colours.blue,  'Room-3': Colours.red,  builder: (context, snapshot){  if(snapshot.hasData){  return GridView.builder(  itemCount: snapshot.data!.data.length,  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),  itemBuilder: (context, index){  var values = snapshot.data!.data[index];  return GestureDetector(  onTap: (){  Navigator.push(context, CupertinoModalPopupRoute(builder: (context)=gt;RoomDetailScreen(20, 30, 20 30)));  },  child: Card(  shape: RoundedRectangleBorder(  borderRadius: BorderRadius.circular(15.r),  ),  color: Colors.green, //have to change here  elevation: 6,  child: Container(  };  if(snapshot.hasData){  return GridView.builder(  itemCount: snapshot.data!.data.length,  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 5),  itemBuilder: (context, index){  var values = snapshot.data!.data[index];  return GestureDetector(  onTap: (){  Navigator.push(context, CupertinoModalPopupRoute(builder: (context)=gt;RoomDetailScreen(20, 30, 20 30)));  },  child: Card(  shape: RoundedRectangleBorder(  borderRadius: BorderRadius.circular(15.r),  ),  color: colours[snapshot.data],  elevation: 6,  child: Container(  

Примечание: В вашем вопросе говорится, что вы хотите изменить цвет «когда данные будут поступать из базы данных». Но так как вы уже используете snapshot.hasData , GridView само изображение не будет отображаться без каких-либо данных из БД.