如何实现Flutter自定义样式通知？求示例代码

DevOps 小满

2026-6-30

实现类似示例的通知组件

下面是匹配你需求的通知组件实现代码，包含成功、警告两种状态样式，和示例图的视觉风格一致：

HTML 结构

<div class="notification success">
  <div class="notification-icon">✓</div>
  <div class="notification-content">
    <h4 class="notification-title">操作成功</h4>
    <p class="notification-text">您的设置已成功保存</p>
  </div>
</div>

<div class="notification warning">
  <div class="notification-icon">⚠️</div>
  <div class="notification-content">
    <h4 class="notification-title">注意提醒</h4>
    <p class="notification-text">您有未完成的任务，请及时处理</p>
  </div>
</div>

CSS 样式

/* 基础通知容器样式 */
.notification {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  max-width: 400px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}

/* 成功状态样式 */
.notification.success {
  background-color: #f0fdf4;
  border-left: 4px solid #22c55e;
}

.notification.success .notification-icon {
  color: #22c55e;
  font-size: 20px;
}

/* 警告状态样式 */
.notification.warning {
  background-color: #fffbeb;
  border-left: 4px solid #f59e0b;
}

.notification.warning .notification-icon {
  color: #f59e0b;
  font-size: 20px;
}

/* 内容区域样式 */
.notification-content {
  flex: 1;
}

.notification-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}

.notification.success .notification-title {
  color: #166534;
}

.notification.warning .notification-title {
  color: #92400e;
}

.notification-text {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}