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

Question

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!

Answer 1

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