Ad
Flutter - How To Get Faded Color Border Along A Circle?
See how the edges are faded and merged with the color of the button? How do you get something like that in flutter?
I have the button, don't know how to get that effect.
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 30),
child: Column(
children: [
//OUTER CIRCLE (BUTTON INSIDE)
Container(
height: 275,
width: 275,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(150),
border: Border.all(
width: 3,
color: Colors.grey.withOpacity(0.6),
style: BorderStyle.solid,
),
),
child: Padding(
padding: const EdgeInsets.all(40),
//SHADOW (Button inside)
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0xfffd194b).withOpacity(0.7),
spreadRadius: 10,
blurRadius: 40,
offset: const Offset(0, 25),
),
],
),
//BUTTON
child: RecordButtonWithText(
buttonText: _buttonText,
startStopRecording: startStopRecording,
),
),
),
),
],
),
);
class RecordButtonWithText extends StatelessWidget {
const RecordButtonWithText({
Key? key,
required String buttonText,
required this.startStopRecording,
}) : _buttonText = buttonText,
super(key: key);
final String _buttonText;
final VoidCallback startStopRecording;
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
startStopRecording();
},
style: ElevatedButton.styleFrom(
elevation: 10,
padding: const EdgeInsets.all(30),
shape: const CircleBorder(),
shadowColor: const Color(0xfffd194b),
primary: const Color(0xfffd194b),
),
child: Text(
_buttonText.toUpperCase(),
style: const TextStyle(fontSize: 22, letterSpacing: 3),
),
);
}
}
Ad
Answer
If the you don't have to use the "ElevatedButton" widget, you can achieve what you want like that:
class RecordButtonWithText extends StatelessWidget {
final String _buttonText;
final VoidCallback startStopRecording;
final EdgeInsets padding;
final double size;
const RecordButtonWithText({
Key? key,
required String buttonText,
required this.startStopRecording,
this.padding = const EdgeInsets.all(30.0),
this.size = 275.0,
}) : _buttonText = buttonText,
super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: size,
width: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 2,
color: Colors.grey.withOpacity(0.4),
style: BorderStyle.solid,
),
),
child: Padding(
padding: EdgeInsets.all(size * 0.145),
//SHADOW (Button inside)
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0xfffd194b).withOpacity(0.7),
spreadRadius: size * 0.03,
blurRadius: size * 0.145,
offset: Offset(0, size * 0.09),
),
],
),
//BUTTON
child: InkWell(
borderRadius: BorderRadius.circular(size / 2),
onTap: () {
startStopRecording();
},
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(size * 0.1),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
gradient: RadialGradient(colors: [
const Color(0xfffd194b),
const Color(0xfffd194b),
const Color(0xfffd194b).withOpacity(0.5),
], stops: const [
0,
0.8,
1
]),
),
child: Text(
_buttonText.toUpperCase(),
style: TextStyle(
color: Colors.white,
fontSize: size * 0.08,
),
),
),
),
),
),
);
}
}
Ad
source: stackoverflow.com
Related Questions
- → How do you create a 12 or 24 mnemonics code for multiple cryptocurrencies (ETH, BTC and so on..)
- → Flutter: input text field don't work properly in a simple example..... where am I wrong?
- → Can I customize the code formatting of Dart code in Atom?
- → Is it possible to develop iOS apps with Flutter on a Linux virtual machine?
- → Display SnackBar in Flutter
- → JSON ObjectMapper in Flutter
- → Material flutter app source code
- → TabBarSelection No such method error
- → How do I set the animation color of a LinearProgressIndicator?
- → Add different routes/screens to Flutter app
- → Is there a way to get the size of an existing widget?
- → How to share a file using flutter
- → Is there an easy way to find particular text built from RichText in a Flutter test?
Ad