Flutter - How to make clean non-uniforms side border on textfields

Hedwin
November 2, 2023
166 views
0 votes
2 Answers

I want to reproduce this effect

I have tried multiple solutions :

A borderRadius can only be given for uniform borders -> this one doesn’t suits me because whenever you resize the widget, the area gets bigger
https://stackoverflow.com/a/72155716/21357698 -> this one is my last solution if there are no other solution because I would like to use native flutter without any package to do that.
I’ve seen that flutter have added this recently but from my understanding it only works when the color is uniform between each side which is not my case : https://github.com/flutter/flutter/pull/121921
I have tried to add a BoxDecoration with a border only on left side that I wanted to round but i got the following error :

A borderRadius can only be given on borders with uniform colors and styles.

Linked code :

decoration: const BoxDecoration(
              border: Border(
                left: BorderSide(width: 6, color: Colors.red),
              ),
              // borderRadius: BorderRadius.all(Radius.circular(4)),
            ),
            child: pfTextField,

I have tried to create my custom OutlineInputBorder so that i paint what i want but it just blink each time the view is rebuilt (if you have a solution to this it will suits me)

Here is the code i’ve done for this custom OutlineInputBorder :

import 'package:flutter/material.dart';


class CustomInputBorder extends OutlineInputBorder {

  final Color? leftBorderSideColor;

  /// Constructeur
  const CustomInputBorder ({
    this.leftBorderSideColor,
    super.borderRadius,
    super.borderSide,
    super.gapPadding,
  });

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
   
    RRect newRect = RRect.fromLTRBAndCorners(
      rect.left,
      rect.top,
      
      
      rect.left + 4,
      rect.bottom,
     
      topLeft: const Radius.circular(4),
      bottomLeft: const Radius.circular(4),
    );
    canvas.drawRRect(
      newRect,
      borderSide.toPaint()
        ..color = leftBorderSideColor ?? Colors.transparent
        ..style = PaintingStyle.fill,
    );
    super.paint(
      canvas,
      rect,
      gapStart: gapStart,
      gapExtent: gapExtent,
      gapPercentage: gapPercentage,
      textDirection: textDirection,
    );
  }
}

I feel like i’m missing something, it must be a way to do it simply. Have you an idea on how i can achieve that or on what is my error on the last solution ?

Answers

If you want to do this without any package, I have solution and I think you have not tried that yet!
add a prefix Icon in decoration, I have not found a icon just like that but you can use an asset icon. I’ve rotated the most similar icon to help you out

TextFormField(
          controller: _textController,
          decoration: InputDecoration(
            labelText: 'Enter Text',
            prefixIcon: Stack(
  alignment: Alignment.center,
  children: [
    Transform.rotate(
      angle: 90 * 3.141592653589793 / 180, // 90 degrees in radians
      child: Icon(
        Icons.linear_scale,
        color: Colors.orange,
      ),
    ),
  ], ),

),
),

this image will the first.
second make every thing custom

Center(
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Email-TextEmailField',
          style: TextStyle(fontSize: 14.0),
        ),
        Container(
          padding: EdgeInsets.all(0.0),
          color: Colors.white,
          child: Row(
            children: [
              Card(
                color: Colors.orange,
                child: Container(
                  width: 5,
                  height: 40,
                ),
              ),
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'Enter Text',
                    filled: true,
                    fillColor: Colors.white,
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),

this is 3rd and last most similar answer I got in my mind

 Column(
    crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Email-TextEmailField',
          style: TextStyle(fontSize: 14.0),
        ),
        Container(
          padding: EdgeInsets.all(0.0),
           decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(5.0),
              border: Border.all(
                color: Colors.black, // Specify the border color
                width: 1.0, // Adjust the border width as needed
              ),// Adjust the radius as needed
            ),      
          child: Row(
            children: [
              Card(
                color: Colors.orange,
                child: Container(
                  width: 5,
                  height: 40,
                ),
              ),
              Expanded(
                child: TextField(
                decoration: InputDecoration(
                  hintText: 'Enter Text',
                  filled: true,
                  fillColor: Colors.white,
                  border: InputBorder.none, // Remove the border
                ),
              ),
              ),
            ],
          ),
        ),
      ],
    ),

if you have any question do a comment I will help you

You can combine Container and TextField in Row to get the same effect.

Here is a sample you can refer to:

class EnterEmailWidget extends StatelessWidget {
  const EnterEmailWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Enter email',
          style: GoogleFonts.aBeeZee(
            fontSize: 16.sp,
            fontWeight: FontWeight.w600,
            color: const Color(0xFF1C283E),
          ),
        ),
        SizedBox(height: 12.w),
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: SizedBox(
            height: 48.w,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                border: Border.all(
                  color: const Color(0xFFD2D5D9), // Specify the border color here
                  width: 1, // Set the border width if desired
                ),
              ),
              child: Row(
                children: [
                  Container(
                    width: 3,
                    color: Colors.amber,
                  ),
                  const SizedBox(width: 8),
                  Expanded(
                    child: TextField(
                      style: GoogleFonts.aBeeZee(
                        fontSize: 13.sp,
                        fontWeight: FontWeight.w400,
                        color: Colors.white,
                      ),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Enter email',
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Result

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – How to make clean non-uniforms side border on textfields

Answers