دوره زبان تخصصی برای برنامه‌نویسان (هدیه ویژه ثبت‌نام در دوره‌های متخصص) (فرصت محدود ⏰)
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ محمد علی
مشکل icon فعال
یلدا محصلی حل شده توسط یلدا محصلی

چطور رو آیکون قلب کیک کنم پرشود ؟ چه کد هایی باید پیاده سازی کنم؟

باید یک ویجت statefull تعریف کنید که شامل یک مقدار bool هست. زمانی که روی آیکون کلیک میکنید باید مقدار این متغیرتون toggle بشه و setState رو صدا بزنید تا ویجتتون rebuild بشه. از طرفی باید براساس مقدار همین متغیر تعیین کنید که قلب تو پر نمایش داده بشه یا تو خالی. مثلا چنین چیزی:

 

import 'package:flutter/material.dart';
class ToggleHeartWidget extends StatefulWidget {
 @override
 _ToggleHeartWidgetState createState() => _ToggleHeartWidgetState();
}
class _ToggleHeartWidgetState extends State<ToggleHeartWidget> {
 bool isHeartFilled = false; // مقدار اولیه متغیر bool
 void toggleHeart() {
   setState(() {
     isHeartFilled = !isHeartFilled; // تغییر مقدار متغیر
   });
 }
 @override
 Widget build(BuildContext context) {
   return IconButton(
     icon: Icon(
       isHeartFilled ? Icons.favorite : Icons.favorite_border, // انتخاب آیکون
       color: isHeartFilled ? Colors.red : Colors.grey, // تغییر رنگ آیکون
     ),
     onPressed: toggleHeart, // متد toggle برای کلیک
   );
 }
}
بهترین پاسخ
یلدا محصلی ۱۸ دی ۱۴۰۳، ۰۶:۳۱