I've just recently gotten into flutter and am loving it so far but I've gotten stuck on some UI changes. Any help is appreciated!
My goal is to get a circular button that has an icon with a blue background but then have a border around the outside that is a darker blue. There are pictures attached.
My approach was:
I got stuck on step 3 because I do not know how to add a border, or if it is even possible given the way I approached the problem. The specific colors do not matter to me at the moment, I will change the theme later.
This is what I currently have code wise:
var messageBtn = new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(20.0),
child: new RawMaterialButton(
onPressed: _messages,
child: new Padding(
padding: const EdgeInsets.all(20.0),
child: new Icon(
Icons.message,
size: 30.0,
color: Colors.white,
),
),
shape: new CircleBorder(),
fillColor: Colors.deepPurple,
),
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new Text(
'Send Messages',
style: new TextStyle(
fontSize: 20.0,
),
)),
],
);
It produces this:
I want this:
Hi Kathleen and welcome!
You can achieve what you want by diving a little deeper into the widgets that make up MaterialButton
.
First you need the Ink widget. This offers more flexible styling using a BoxDecoration .
Ink
can then contain an InkWell widget which recognises onTap
and draws the splash effect. By default, the splash continues to the edges of the containing box, but you can make it circular by giving InkWell
a really big borderRadius
.
Here's an example of the button you're after:
Material(
type: MaterialType.transparency, //Makes it usable on any background color, thanks @IanSmith
child: Ink(
decoration: BoxDecoration(
border: Border.all(color: Colors.indigoAccent, width: 4.0),
color: Colors.indigo[900],
shape: BoxShape.circle,
),
child: InkWell(
//This keeps the splash effect within the circle
borderRadius: BorderRadius.circular(1000.0), //Something large to ensure a circle
onTap: _messages,
child: Padding(
padding:EdgeInsets.all(20.0),
child: Icon(
Icons.message,
size: 30.0,
color: Colors.white,
),
),
),
)
),
And here's the result:
Just wrap an IconButton
into a Container
and set its decoration
as following:
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 4),
color: Colors.yellow,
shape: BoxShape.circle,
),
child: IconButton(
iconSize: 56,
icon: Icon(Icons.check),
onPressed: () {},
),
),
Can Using FloatingActionButton with Border :
FloatingActionButton(
mini: false,
backgroundColor: Colors.blue.shade900,
splashColor: Colors.black,
onPressed: () {
logOutDialog(context);
},
hoverElevation: 1.5,
shape: StadiumBorder(
side: BorderSide(
color: Colors.blue, width: 4)),
elevation: 1.5,
child: Icon(
Icons.logout,
color: _foregroundColor,
),
)
In Flutter 2 there is TextButton
:
TextButton(
style: ButtonStyle(
side: RedSelectedBorderSide(),
),
child: Text(
"Button"
),
onPressed: (){}
);
Where RedSelectedBorderSide()
is:
class RedSelectedBorderSide extends MaterialStateBorderSide {
@override
BorderSide resolve(Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return BorderSide(
width: 2,
color: Colors.red,
); //
}
return null;// Defer to default value on the theme or widget.
}
}
For TextButton
inside style
use side
with MaterialStateProperty
with BorderSide
.
TextButton(
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(width: 1, color: Colors.black),
),
),
child: Text(
"My Button"
),
onPressed: (){}
);
I came here to find out how to add border to "CupertinoButton". I'll post my finding here. Hope it will help to someone.
Result:
Code:
import 'package:flutter/cupertino.dart';
...
CupertinoButton(
minSize: 20,
padding: const EdgeInsets.all(0), // remove button padding
color: CupertinoColors.white.withOpacity(0), // use this to make default color to transparent
child: Container( // wrap the text/widget using container
padding: const EdgeInsets.all(10), // add padding
decoration: BoxDecoration(
border: Border.all(
color: const Color.fromARGB(255, 211, 15, 69),
width: 1,
),
borderRadius: const BorderRadius.all(Radius.circular(10)), // radius as you wish
),
child: Wrap(
children: const [
Icon(CupertinoIcons.videocam_circle_fill, color: CupertinoColors.systemPink,),
Text(" Upload video", style: TextStyle(color: CupertinoColors.systemPink),)
],
),
),
onPressed: () {
// on press action
},
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.