如何在容器颤动中添加文本

Question

我是 flutter 的新手，正在尝试实现仪表板屏幕。下面的第一张图片显示了我到目前为止的代码实现。我想输入图标下方的文字作为第二张图片。我试过了，但我仍在努力寻找方法。我怎样才能做到这一点？感谢您对此的帮助。 .... ..........

Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.lightBlue,
                ),

              child: Padding(
                padding: const EdgeInsets.only(right: 10, top: 10),
                child: Align(
                    alignment: Alignment.topRight,
                    child: Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          color: Colors.white24,
                        ),
                        child: Icon(Icons.message, color: Colors.white,size: 18, ),


                    ),

                ),

              ),

              ),
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.deepPurple,
                ),

                child: Padding(
                  padding: const EdgeInsets.only(right: 10, top: 10),
                  child: Align(
                      alignment: Alignment.topRight,
                      child: Container(
                          width: 30,
                          height: 30,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.white24,
                          ),
                          child: Icon(Icons.notifications_active, color: Colors.white,size: 18,  ))),
                ),
              ),
              Container(
                height: 100,
                width: 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.teal,
                ),
                child: Padding(
                  padding: const EdgeInsets.only(right: 10, top: 10),
                  child: Align(
                      alignment: Alignment.topRight,
                      child: Container(
                          width: 30,
                          height: 30,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20),
                            color: Colors.white24,
                          ),
                          child: Icon(Icons.star, color: Colors.white,size: 18,  ))),
                ),
              ),
            ],
          ),

Answer 1

试试下面的代码希望对你有帮助。我试过一个 Container 你试试其他的，如下所示。

Container(
  padding: EdgeInsets.all(8.0),
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.lightBlue,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            '0',
            style: TextStyle(
              fontSize: 20,
              color: Colors.white,
            ),
          ),
          Container(
            width: 30,
            height: 30,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: Colors.white24,
            ),
            child: Icon(
              Icons.message,
              color: Colors.white,
              size: 18,
            ),
          ),
        ],
      ),
      SizedBox(
        height: 10,
      ),
      Text(
        'Total Leads',
        style: TextStyle(
          color: Colors.white,
        ),
      ),
    ],
  ),
),

结果屏幕->

如何在容器颤动中添加文本

how to add text inside a container flutter

flutter

containers