Removing Specific Border Side from OutlineInputBorder

user_1941485 0
Viewed 384

My goal is to display two textfield's above each other with a solid border around them. Unfortunately, I'm not able to specify that for the top textfield, there should be no bottom border. The following picture shows what the current status is. Between the two textfields, there is a thick border which is twice the size of the individual borders as the two textfields.

My question is now: is there a simple way to make this border between the two textfields the same size as the standard border by removing either the bottom border side from the first textfield or the top border side from the second textfield respectively?

enter image description here

The corresponding code looks as follows:

body: Column(
children: <Widget>[
  Container(
    padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
    child: TextField(
      decoration: InputDecoration(
        filled: true,
        fillColor: Color(0xffff8f00),
        enabledBorder: const OutlineInputBorder(
          borderSide: const BorderSide(
            color: Colors.white,
            width: 3.0,
            //style: BorderStyle.none,
          ),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(20),
            topLeft: Radius.circular(20),
          ),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.white, width: 3.0),
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(20),
            topLeft: Radius.circular(20),
          ),
        ),
        hintText: "Email or username",
        hintStyle: TextStyle(
          fontSize: 16,
          color: Colors.white70,
        ),
      ),
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w700,
      ),
      controller: myEmailUsernameController,
    ),
  ),
  Container(
    padding: EdgeInsets.fromLTRB(20, 0, 20, 0),
    child: TextField(
      decoration: InputDecoration(
        filled: true,
        fillColor: Color(0xffff8f00),
        enabledBorder: const OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.white, width: 3.0),
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.white, width: 3.0),
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
          ),
        ),
        hintText: "Password",
        hintStyle: TextStyle(
          fontSize: 16,
          color: Colors.white70,
        ),
      ),
      style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w700,
      ),
      obscureText: showPW,
      controller: myPasswordController,
    ),
  ),
],
),

flutter-layout flutter
1 Answers

Here is your solution:

Container(
        color: Color(0xffff8f00),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.white, width: 3)
          ),
          clipBehavior: Clip.antiAlias,
          margin: EdgeInsets.all(20),
          child: Column(
            children: <Widget>[
              TextField(
                decoration: InputDecoration(
                  filled: true,
                  border: InputBorder.none,
                  hintText: "Email or username",
                  hintStyle: TextStyle(
                    fontSize: 16,
                    color: Colors.white70,
                  ),
                ),
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                ),
              ),
              Divider(
                color: Colors.white,
                thickness: 3,
              ),
              TextField(
                decoration: InputDecoration(
                  filled: true,
                  border: InputBorder.none,
                  // enabledBorder: const OutlineInputBorder(
                  //   borderSide: const BorderSide(color: Colors.white, width: 3.0),
                  //   borderRadius: BorderRadius.only(
                  //     bottomLeft: Radius.circular(20),
                  //     bottomRight: Radius.circular(20),
                  //   ),
                  // ),
                  hintText: "Password",
                  hintStyle: TextStyle(
                    fontSize: 16,
                    color: Colors.white70,
                  ),
                ),
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ],
          ),
        ),
      ),
user_183603210
Related