textFormField borders with shadows

flutter dart user-interface textformfield

129

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),
          ),
        )

129

Author by

Divyam Dhadwal

I've always loved coding. I started with developing my own themes and custom firmwares for Symbian OS back when I was in school. Later I moved on to develop my own website using WordPress. I really loved how the applications worked and hence decided to fully understand the system I was working on. From that point onwards I've developed my expertise & worked with a lot of such languages like HTML, CSS, Bootstrap, Javascript, PHP, Python, Flutter, NodeJS, Java, SQL, etc. Besides my technical skills, I'm a photographer, videographer & an enthusiast traveler.

Updated on January 01, 2023

Comments

Divyam Dhadwal over 1 year

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

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 ?