CODEWITHSUNDEEP
fluttercolorsflutter2.0border-radius
giannik28
giannik28

Reputation: 463

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

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): enter image description here

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!

Upvotes: 1

Views: 2589

Answers (2)

Abdullah Bilal Khanzada
Abdullah Bilal Khanzada

Reputation: 100

Like this and in child you can write your widget

OutlinedButton(
      style: OutlinedButton.styleFrom(
      side: BorderSide(color: Colors.teal),
    ),
    onPressed: () {},
    child: null,
),

Upvotes: 0

Kartik Patel
Kartik Patel

Reputation: 627

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

Upvotes: 4

Related Questions