flutter 小部件的圆形背景作为进度条

Question

这是安提卡。我从几天前开始学习编码，只熟悉 HTML/CSS/JS 和 dart/flutter

的基础知识

开发人员级别：初学者
项目类型和语言：我正在为自己开发一个Study planner app，使用flutter。

问题 - 我尝试了很多方法来创建一个小部件，具有任务的详细信息，带有进度条 - 如背景.

像这样的东西（小工具）-

如何使用 flutter 创建这样的 Widget。

Answer 1

我会这样做：

final double _width = 300;
final double _height = 110;

return SafeArea(
  child: Scaffold(
    body: Center(
      child: Stack(
        children: [
          Container(
            width: _width,
            height: _height,
            color: Colors.blue,
          ),
          Container(
            //0.74 is percentage
            width: _width * 0.74,
            height: _height,
            color: Colors.amber,
          ),
          SizedBox(
            width: _width,
            height: _height,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      'BioWopin',
                      style: TextStyle(fontSize: 20),
                    ),
                    Text(
                      'Due in 26 days',
                      style: TextStyle(fontSize: 16),
                    )
                  ],
                ),
                Text(
                  '74%',
                  style: TextStyle(fontSize: 18),
                )
              ],
              crossAxisAlignment: CrossAxisAlignment.center,
            ),
          )
        ],
      ),
    ),
  ),
);

Answer 2

LinearProgressIndicator可以用SizedBox包裹起来。

ClipRRect(
    borderRadius: BorderRadius.circular(12), // have border decoration
    child: Stack(
      // you may need to wrap with sizedBOx
      children: [
        SizedBox(
          height: 100, //stack size, or use fit
          width: 400,
          child: LinearProgressIndicator(
            value: sliderValue,
          ),
        )

        //place your widget
      ],
    )),

flutter 小部件的圆形背景作为进度条

Circular background of flutter widget as progressbar

dart

flutter

flutter-layout

flutter-animation

flutter-web