时间戳

首页 > 解决方案 > 如何从颜色列表中选择更改容器颜色？

flutter - 如何从颜色列表中选择更改容器颜色？

问题描述

我有一个待办事项应用程序，我想要在添加该任务时选择文本容器的颜色。任务容器在另一个屏幕上，选择颜色的选项在另一个屏幕上，我也在使用 Provider 进行状态管理。

这是一个屏幕上的任务容器：

Container(
          margin: EdgeInsets.symmetric(vertical: 15),
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          alignment: Alignment.centerLeft,
          height: screenHeight * 0.1,
          width: screenWidth * 0.74,
          decoration: BoxDecoration(
            color: Colors.blue , // choosen color ill be here
            borderRadius: BorderRadius.only(
              topRight: Radius.circular(10),
              topLeft: Radius.circular(10),
              bottomRight: Radius.circular(10),
              bottomLeft: Radius.circular(0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                blurRadius: 6,
                offset: Offset(-3, 3),
              ),
            ],
          ),
          child: Text(
            widget.taskTile,
            style: TextStyle(
              decoration: isDone ? TextDecoration.lineThrough : null,
              decorationColor: Colors.black,
              decorationThickness: 3,
              fontSize: 18,
              color: Theme.of(context).primaryTextTheme.bodyText1.color,
            ),
          ),
        ),

这里有 4 个圆形容器可供选择颜色：

    int _selectedIndex;
    Form(
            key: _formKey,
            child: TextFormField(
              validator: (val) => val.isEmpty ? 'Enter task' : null,
              autofocus: true,
              onChanged: (val) {
                taskTitle = val;
              },
            ),
          ),
          SizedBox(height: 70),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              chooseContainerColor(Colors.red, 0),
              chooseContainerColor(Colors.amberAccent, 1),
              chooseContainerColor(Colors.teal, 2),
              chooseContainerColor(Colors.blue, 3),
            ],
          ),
          SizedBox(height: 60),
          FlatButton(
            padding: EdgeInsets.symmetric(vertical: 20),
            onPressed: () {
              addTask();
            },
            color: CustomColors().primaryColor,
            child: Text(
              'Add',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
         Widget chooseContainerColor(Color color, int index){
          return GestureDetector(
          onTap: (){
          setState(() {
        _selectedIndex = index;
           });
       },
     child: Container(
     height: 50,
      width: 50,
      decoration: BoxDecoration(
       border: index == _selectedIndex ? Border.all(width: 5, color: Colors.black) :    Border.all(width: 0) ,
      shape: BoxShape.circle,
      color: color,
    ),
  ),
);

}

标签： flutterdartflutter-layoutdart-html

解决方案

为了解决这个问题，您需要创建一个 Color 变量。每次调用 onPressed 时，更改变量的值并调用 setState() 来告诉小部件更新 UI。
将颜色声明为变量：

Color containerColor=Colors.red;

在您的 onPressed() 中：

setState(() {
  containerColor= Colors.teal;
});

在您的容器的装饰中：

decoration: BoxDecoration(
   color: containerColor,
)

推荐阅读