颤振小部件的圆形背景

Question

这是安蒂卡。从几天前开始，我就开始学习编写代码了，我只熟悉HTML/CSS/JS，以及dart/的基础知识。

开发人员级：初学者

Project & language：我正在为自己开发一个学习计划程序，使用flutter。

Problem --我尝试过许多方法来创建一个小部件，其中有任务的详细信息--，，带有类似于进度条的背景。

类似的东西(小部件)-

如何用颤振创建这样的Widget。

​

​

Answer 1

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
      ],
    )),

​

​

Answer 2

我就是这样做的：

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,
            ),
          )
        ],
      ),
    ),
  ),
);