如何在Flutter中创建指定样式的自定义进度加载器

可以通过HTML+CSS快速实现你需要的进度加载器，以下是完整代码示例：

HTML结构 #

<div class="loader-container">
  <div class="progress-bar">
    <div class="progress-fill"></div>
    <div class="blue-pipe"></div>
  </div>
</div>

CSS样式 #

/* 加载器容器，控制整体尺寸与背景 */
.loader-container {
  width: 300px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

/* 进度条容器，承载进度填充与管道末端 */
.progress-bar {
  height: 100%;
  display: flex;
  align-items: center;
  animation: progressMove 2s linear infinite;
}

/* 深色进度填充部分 */
.progress-fill {
  height: 100%;
  background-color: #333;
  flex-grow: 1;
}

/* 蓝色管道末端 */
.blue-pipe {
  width: 30px;
  height: 100%;
  background-color: #2196f3;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
}

/* 管道口细节模拟 */
.blue-pipe::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
}

/* 进度动画：从左到右填充 */
@keyframes progressMove {
  0% { width: 0%; }
  100% { width: 100%; }
}

自定义说明 #

• 颜色调整：直接修改background-color的值，就能替换深色进度和蓝色管道的颜色
• 尺寸适配：修改.loader-container的width和height，可以调整加载器的整体大小
• 使用参考图片：如果想用你提供的图片替代纯色样式，只需将对应元素的background-color替换为background: url('图片路径')，并根据图片特性调整background-repeat、background-size等属性

内容的提问来源于stack exchange，提问作者Sheetal Savani