Custom red button with red border in flutter - flutter

Question

I wanted to create a button like the picture. I am a beginner in flutter so I don't know how to start. Let me add that I would like to add a red glow effect to the button.

Answer 1

Try below code
OutlinedButton(
onPressed: () {
print('button pressed');
//write your onPressed function here
},
child: Text(
'TEXT',
style: TextStyle(
fontSize: 40,
),
),
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
20,
),
),
primary: Colors.red,
backgroundColor: Colors.red.shade100,
fixedSize: Size(200, 100),
side: BorderSide(
width: 10.0,
color: Colors.red,
),
),
),
Result screen->

Answer 2

You can use InkWell with custom style,
here is an example
InkWell(
onTap: (){
//YOUR FUNCTION
},
radius: 16.0,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(12),
),
child: Text('Text', style: TextStyle(color: Colors.red),),
),
),
this will give you the you the output:

Answer 3

This should be a little more flexible, allowing the customization of color, shadow, light vs. dark backgrounds plus, of course, text.
Also, this doesn't use containers. You can't make containers constant, so many of us try to avoid them now:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: const Center(
child: CustomButton(
// Places a black or white backing behind the inside, translucent color.
backgroundIsDark: true,
// The color of everything.
color: Colors.red,
// The shadow *outside* the border.
shadowSize: 2.0,
text: 'Test',
),
),
);
}
}
class CustomButton extends StatelessWidget {
const CustomButton({
Key? key,
required this.backgroundIsDark,
required this.shadowSize,
required this.text,
required this.color,
}) : super(key: key);
final double shadowSize;
final String text;
final Color color;
final bool backgroundIsDark;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
// TODO Implement Me.
},
radius: 16.0,
child: DecoratedBox(
decoration: BoxDecoration(
color: backgroundIsDark ? Colors.black : Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: color,
width: 4,
),
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: color.withOpacity(0.4),
blurRadius: shadowSize,
spreadRadius: shadowSize,
offset: const Offset(0.0, 0.0),
),
],
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Text(
text,
style: TextStyle(color: color),
),
),
),
),
);
}
}