How to make border on FloatingActionButton?
774
Solution 1
just use shape: BoxShape.circle,
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.brown, width: 5, style: BorderStyle.solid)),
margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
width: 80,
height: 80,
child: FloatingActionButton(
focusColor: Colors.white54,
backgroundColor: Colors.white,
onPressed: () {},
child: const Icon(
Icons.add,
color: Colors.black,
size: 50,
),
),
)
output:
Solution 2
In FloatingActionButton widget you have property
named shape
using that you can achieve your desired result.
FloatingActionButton(
backgroundColor: Colors.white,
onPressed: (){},
child: Icon(Icons.add,color: Colors.black,size: 30,),
shape: RoundedRectangleBorder(side: BorderSide(width: 3,color: Colors.brown),borderRadius: BorderRadius.circular(100)),
)
Solution 3
Try below code
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(
80,
),
border: Border.all(
color: Colors.green,
width: 5,
style: BorderStyle.solid,
),
),
margin: const EdgeInsets.fromLTRB(0, 0, 0, 55),
width: 80,
height: 80,
child: FloatingActionButton(
focusColor: Colors.white54,
backgroundColor: Colors.white,
onPressed: () {},
child: const Icon(
Icons.add,
color: Colors.black,
size: 50,
),
),
),
Author by
Malak
Updated on December 31, 2022Comments
-
Malak over 1 year
my problem is i want to do border around my floatingactionbutton. I tried to put it into container and do like this, but it's not what i want.
decoration: BoxDecoration( border: Border.all( color: Colors.brown, width: 5, style: BorderStyle.solid)), margin: const EdgeInsets.fromLTRB(0, 0, 0, 55), width: 80, height: 80, child: FloatingActionButton( focusColor: Colors.white54, backgroundColor: Colors.white, onPressed: () {}, child: const Icon( Icons.add, color: Colors.black, size: 50, ), ), ),
I have this:
I want this:
-
Jahidul Islam over 2 yearswhat you actually want can you share any images
-
Malak over 2 yearsI want this square to by rounded like button
-
Diwyansh over 2 yearsYou can achieve the same without wrapping it to Container, check answer.
-
Malak over 2 yearsYup i know it, thx, but i actually need it to resize button
-
Diwyansh over 2 yearsresize + Icon size or whole button?
-
Malak over 2 yearsto resize whole button
-
Diwyansh over 2 yearsOkay for that I will prefer to use SizedBox rather than Container and rest is as per your suitability .
-
Malak over 2 yearsokey thx ur right
-
-
Malak over 2 yearswe gucci thx mate