Question

我正在尝试为我的TextFormField添加渐变颜色，但是由于我不确定该怎么做而无法执行。

以下是我到目前为止的代码



    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Interest Calculator'),
      ),
      body: Form(
        key: _formKey,
        child: Column (
          children: [
            Padding(
              padding: EdgeInsets.only(top: 10.0, bottom: 5.0, left: 15.0, right: 15.0),
              child: TextFormField(
        keyboardType: textInputType,
        style: Theme
              .of(context)
              .textTheme
              .title,
        controller: textController,
         decoration: InputDecoration(
           labelStyle: TextStyle(
                  color: Colors.grey,
                  fontSize: 16.0
           ),
           contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
             errorStyle: TextStyle(
             color: Colors.red,
             fontSize: 15.0
           ),
           enabledBorder: OutlineInputBorder(
             borderSide:  BorderSide(color: colorTextInput, width:1.0),
             borderRadius: BorderRadius.circular(5.0)
           )
         )
    )
            ),


      ),
    );
  }

我正在寻找一个类似于下图的渐变。而不是从上到下或从下到上的渐变。我正在寻找从左到右的渐变。我想从左侧的颜色“ #fafafa”开始，在文本字段的右侧以颜色“ #EDEDED”结束。有人可以帮助我解决问题吗？预先感谢

Answer 1

    // below is custom color class
    class HexColor extends Color {
      static int _getColorFromHex(String hexColor) {
        hexColor = hexColor.toUpperCase().replaceAll("#", "");
        if (hexColor.length == 6) {
          hexColor = "FF" + hexColor;
        }
        return int.parse(hexColor, radix: 16);
      }

      HexColor(final String hexColor) : super(_getColorFromHex(hexColor));
    }

    class SharedColor {
      Color brightBlue = HexColor("cfe3e5");
    }

    // below is the container widget you need to add decoration in your text field container and you asked from left to right gradient change.

  return Scaffold(
      appBar: AppBar(
        title: Text('Simple Interest Calculator'),
      ),
      body: Form(

          child: Column (
              children: [

      Container(
                    decoration: BoxDecoration(
                      // Box decoration takes a gradient
                      gradient: LinearGradient(
                        // Where the linear gradient begins and ends
                        begin: Alignment.topRight,
                        end: Alignment.bottomLeft,
                        // Add one stop for each color. Stops should increase from 0 to 1
                        stops: [0.1, 0.4, 0.7, 0.9],
                        colors: [
                          // Colors are easy thanks to Flutter's Colors class.
                          SharedColor().brightBlue.withAlpha(800),
                          SharedColor().brightBlue.withAlpha(500),
                          SharedColor().brightBlue.withAlpha(400),
                          SharedColor().brightBlue.withAlpha(100),
                        ],
                      ),
                    ),
          child: TextFormField(
              style: Theme
                  .of(context)
                  .textTheme
                  .title,
              controller: _textController,
              decoration: InputDecoration(
                  labelStyle: TextStyle(
                      color: Colors.grey,
                      fontSize: 16.0
                  ),
                  contentPadding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                  errorStyle: TextStyle(
                      color: Colors.red,
                      fontSize: 15.0
                  ),
                  enabledBorder: OutlineInputBorder(
                      borderSide:  BorderSide(color: Colors.black, width:1.0),
                      borderRadius: BorderRadius.circular(5.0)
                  )
              )
          )
      ),
])));

无法在Flutter中向TextFormField添加渐变

1 个答案: