向TextFormField的边框添加渐变

时间:2020-08-16 23:10:51

标签: android flutter flutter-layout

是否可以在Flutter中向TextFormField的边框添加渐变?我想实现以下目标:wanted result

1 个答案:

答案 0 :(得分:0)

您可以做一个简单的技巧,只需将TextFormField和Container包装在Column中,然后将Container背景颜色设置为渐变即可。这是一个例子

Container(
              width: 200,
              height: 60,
              child: Column(
                children: [
                  TextFormField(
                    decoration: new InputDecoration(
                        border: InputBorder.none,
                        focusedBorder: InputBorder.none,
                        enabledBorder: InputBorder.none,
                        errorBorder: InputBorder.none,
                        disabledBorder: InputBorder.none,
                        contentPadding:
                        EdgeInsets.only(left: 15, bottom: 5, top: 11, right: 15),
                        hintText: "Moje imie"),
                  ),
                  Container(
                    height: 2,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Colors.red, Colors.blue],
                          begin: const FractionalOffset(0.0, 0.0),
                          end: const FractionalOffset(0.5, 0.0),
                          stops: [0.0, 1.0],
                          tileMode: TileMode.clamp
                      ),
                    ),
                  )
                ],
              ),
            )

输出:

output