#sql-server #flutter #dart #socket.io #flutter-layout
Вопрос:
Я не понимаю, как динамически изменять цвет виджета постоянно на основе данных в реальном времени из 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()); } );
}
Ответ №1:
Если вам просто нужно переключаться между 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
само изображение не будет отображаться без каких-либо данных из БД.
Комментарии:
1. спасибо @sidrao2006 . но данные об изменении цвета будут поступать из другого api. Я должен изменить цвет, сопоставив этот номер комнаты с этим номером комнаты и проверив статус. пример: если(снимок.данные! .данные[индекс][‘RNo’]==номер новой комнаты и статус новой комнаты == ‘R’){Цвета.красный}иначе, если(снимок.данные! .данные[индекс][‘RNo’]==номер новой комнаты и статус новой комнаты == ‘C’){Цвета.зеленый}еще{Цвета.зеленый}. Я не понимаю, как это реализовать. Однако данные будут поступать из сокета ввода-вывода. Изменение цвета будет происходить в реальном времени.