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.
-
use flutter glow pub.dev/packages/flutter_glowSarthak Raval– Sarthak Raval2022-05-24 13:31:39 +00:00Commented May 24, 2022 at 13:31
Add a comment
|
3 Answers
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-> 
1 Comment
Daniel
This doesn't solve it. The question asker wanted to have a red "glow" effect.
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:
1 Comment
Daniel
This doesn't solve it. The question asker wanted to have a red "glow" effect.
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),
),
),
),
),
);
}
}
