Flutter: How to fix and add a border and color to outlined button?

Issue

Can someone tell me why my code is not making the border blue, and let it have width of 3.0?

This is what it looks like (L: my app, R: tutorial app):

The code:

class CreateRoomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: () => print('Create Room'),
      style: ButtonStyle(
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            side: BorderSide(
              color: Colors.blueAccent[100],
              width: 3.0,
            ),
            borderRadius: BorderRadius.circular(30.0),
          ),
        ),
      ),
      child: Row(
        children: [
          ShaderMask(
            shaderCallback: (rect) =>
                Palette.createRoomGradient.createShader(rect),
            child: Icon(
              Icons.video_call,
              color: Colors.white,
              size: 35.0,
            ),
          ),
          const SizedBox(width: 4.0),
          Text(
            'Create\nRoom',
            style: TextStyle(color: Colors.blueAccent[100]),
          ),
        ],
      ),
    );
  }
}

Also I have to add this somewhere (but since textColor is depreciated in flutter 2.0, idk what to do with it…):

textColor: Palette.facebookblue,

thx!

Solution

just change your OutlinedButton to this:

OutlinedButton(
    onPressed: () => print('Create Room'),
    style: OutlinedButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30.0),
      ),
      side: BorderSide(width: 3.0, color: Colors.blueAccent[100]),
    )
    child: yourChildWidget,
)

Answered By – Kartik Patel

Answer Checked By – Mildred Charles (FlutterFixes Admin)