몇 개의 버튼이 있고 버튼 클릭에 따라 카드보기의 색상을 설정해야합니다. 기본적으로 게시물에 테마를 추가하고 있으므로 미리보기 페이지에서 사용자가 버튼을 클릭하여 원하는 색상을 선택할 수 있도록해야합니다.
스크린 샷 : 버튼이있는 CardView 페이지
버튼 코드 :
Padding( padding: const EdgeInsets.only(top: 10), child: Row( children: [ Expanded( child: MaterialButton( onPressed: () {}, color: Colors.yellow, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.orange, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.brown, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.blue, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.green, shape: CircleBorder(), ), ), Expanded( child: MaterialButton( onPressed: () {}, color: Colors.black, shape: CircleBorder(), ), ), ], ), ),
Cardview 코드 :
Card( child: Container( decoration: BoxDecoration( color: Colors.blue, border: Border.all( color: MyColors.black, width: 1.5), borderRadius: BorderRadius.circular(10)), child: Column( children: [ Row( children: [ Padding( padding: const EdgeInsets.all(8.0), child: CircleAvatar( backgroundImage: CachedNetworkImageProvider( _profileurl), ), ), Text(_username), ], ), Padding( padding: const EdgeInsets.all(8.0), child: Obx( () => Text( pollDataController1.question.value, style: TextType.boldHeading, ), ), ), Obx( () => ClipRRect( borderRadius: BorderRadius.circular(10), child: Image.asset( (pollImageController.imageDisplay.value), width: 320, height: 170, fit: BoxFit.cover, ), ), ), Padding( padding: const EdgeInsets.symmetric( vertical: 10.0), child: Column( children: [ Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx( () => Text( pollDataController1 .op1.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1 .op1Emoji.value), ), SizedBox( width: 25.0, ), Obx( () => Text( pollDataController1 .op2.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1 .op2Emoji.value), ), ], ), ], ), SizedBox(height: 13.0), Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx( () => Text( pollDataController1 .op3.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1 .op3Emoji.value), ), SizedBox( width: 25.0, ), Obx( () => Text( pollDataController1 .op4.value + " ", style: TextStyle( color: MyColors.offBlack, fontSize: 16.0, ), ), ), Obx( () => Text(pollDataController1 .op4Emoji.value), ), ], ), ], ), ], ), ), ], ), ), ),
색상에 전역 변수를 사용하고 각 원 버튼을 탭할 때 색상을 변경하는 기능을 사용할 수 있습니다.
따라서 예는 다음과 같습니다.
Color cardBackgroundColor = Colors.white;
void changeColor(Color changeToColor) {
setState(() {
cardBackgroundColor = changeToColor;
});
}
그런 다음 버튼 코드에서 다음과 같이 사용하십시오.
Expanded(
child: MaterialButton(
onPressed: changeColor(Colors.yellow),
color: Colors.yellow,
shape: CircleBorder(),
),
),
그리고 Cardview 코드에서 다음과 같이 변경하십시오.
Card(child: Container(
decoration: BoxDecoration(
color: cardBackgroundColor,
border: Border.all(
color: MyColors.black, width: 1.5),
borderRadius: BorderRadius.circular(10)),
이것이 가장 깨끗하지는 않지만 가장 빠른 방법입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다