如何根據值更改 Flutter 中的邊框顏色？

Question

我有一個帶有某種顏色邊框的容器小部件。 如果 TextField 中輸入的值大於或小於某個值，我希望能夠更改邊框的顏色。 實現這一目標的最佳方法是什么？

Answer 1

1. 在類中定義一個_color變量：

Color _color = Colors.purple;

2. 將_color變量分配給Container的邊框：

                   Container(
                      height: 100,
                      width: 100,
                      decoration: BoxDecoration(
                        border: Border.all(
                          width: 5.0,
                          // assign the color to the border color
                          color: _color,
                        ),
                      ),
                    ),

3. 在TextField的onChanged回調中測試您的條件是否滿足並根據您的需要更改_color ：

                    TextField(
                      onChanged: (newValue) {
                        if (newValue.length > 5) { // test for your condition
                          setState(() {
                            _color = Colors.red; // change the color
                          });
                        } else {
                          setState(() {
                            _color = Colors.blue; // change the color if the condition is not met
                          });
                        }
                      },
                    ),

Answer 2

這是您的 TextField 控制器；

final yourTextFieldControler = TextEditingController();

只需從控制器獲取值並更改為 int。

Container(
   
  decoration: BoxDecoration(
    border: Border.all(color: yourTextFieldControler.text.toInt > 5 ?  Colors.red:Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

這是你的 TextField

TextField(
  controler : yourTextFieldControler,
         onChanged: (newValue) {
setState((){})
}