textFormField borders with shadows

user_9258283 0
Viewed 273

I'm new to flutter. I just saw this beautiful design and therefore I've been trying to implement something like attached below - Image

Unfortunately, I've been unable to do so after a lot of tries with InputBorders, Material widget etc.

Can someone please let me know how we can implement such textFormFields with the exact same design ?

textformfield dart flutter user-interface
2 Answers

You can use neumorphic package, You can achieve a similar effect using this package.

 Neumorphic(
          margin: EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 4),
          style: NeumorphicStyle(
            depth: NeumorphicTheme.embossDepth(context),
            boxShape: NeumorphicBoxShape.stadium(),
          ),
          padding: EdgeInsets.symmetric(vertical: 14, horizontal: 18),
          child: TextField(
            onChanged: this.widget.onChanged,
            controller: _controller,
            decoration: InputDecoration.collapsed(hintText: this.widget.hint),
          ),
        )
user_107112160

If you look at TextField docs on Flutter API, there's the decoration property.

Blurred effect in borders

This property is the class InputDecoration (read its API).

To add a simple border, in the border property (classes Border and for each side of the border the class BorderSide) see the code below.

Border(
      top: BorderSide(width: 16.0, color: Colors.lightBlue.shade50),
      bottom: BorderSide(width: 16.0, color: Colors.lightBlue.shade900),
),

Border class has a color property, you can use it with Colors.blue[50] to do a blurred effect or a higher number. Read Colors class.

Shadow style

enter image description here To do these shadows, you can use the properties contentPadding, enabledBorder and border. Look at this answer https://stackoverflow.com/a/54195097/9192954. It uses InputDecoration (the code is from 2019, then borderSide currently doesn't exist, instead use border).

Hope this helps you.

user_91929540
Related