Flutter - 带有更改开/关图标的通知按钮

Question

我想将这个带有“通知开/关”功能的提升按钮转换为带有更改图标的按钮，类似于下面的按钮，用于暗/亮模式。只有随着通知的开启和关闭而停止，图标才会改变......

                          child: ElevatedButton(
                            style: ElevatedButton.styleFrom(
                                primary: Color(0xFF34445C)),
                            onPressed: () {
                              setState(() {
                                _notificationsEnabled =
                                    !_notificationsEnabled;
                                _updateNotifications(_notificationsEnabled);
                              });
                            },
                            child: Text(
                                _notificationsEnabled
                                    ? 'PUSH-BENACHRICHTIGUNGEN AKTIVIERT'
                                    : 'PUSH-BENACHRICHTIGUNGEN DEAKTIVIERT',
                                style: TextStyle(
                                    fontSize: 11.0)),
                          ),

所以行 (isDark?Icons.wb_sunny: Icons.brightness_2,) 必须连接到 _notificationsEnabled 函数，以便图标不会根据暗/亮模式而改变，而是通知开/关图标.

                    child: ClipOval(
                      child: Material(
                        color: Color(0xFF282C39),
                        child: InkWell(
                          splashColor: Colors.blue,
                          child: SizedBox(
                              width: 32,
                              height: 32,
                              child: Icon(
                                  isDark ? Icons.wb_sunny : Icons.brightness_2,
                                  size: 20,
                                  color: Colors.white)),
                          onTap: () {
                            isDark
                                ? Magazin.of(context)!
                                .setBrightness(Brightness.light)
                                : Magazin.of(context)!
                                .setBrightness(Brightness.dark);
                          },
                        ),
                      ),
                    ),

Answer 1

您应该使用 ElevatedButton.icon。这是一个基于您的代码的示例。

        ElevatedButton.icon(
            icon: _notificationsEnabled
                ? Icon(Icons.notifications_active)
                : Icon(Icons.notifications_off),
            label: Text(
              _notificationsEnabled
                  ? 'PUSH-BENACHRICHTIGUNGEN AKTIVIERT'
                  : 'PUSH-BENACHRICHTIGUNGEN DEAKTIVIERT',
              style: TextStyle(fontSize: 11.0),
            ),
            onPressed: () {
              setState(() {
                _notificationsEnabled = !_notificationsEnabled;
                _updateNotifications(_notificationsEnabled);
              });
            },
          ),