xxxxxxxxxx
//Text in Button
TextButton(
onPressed: ()=>{},
child: const Text("Signout")
),
//Text button with icon
TextButton.icon(
label: Text('Signout'),
icon: Icon(Icons.logout),
onPressed: () {}
),
//Text button with filled background
TextButton(
child: Text("button"),
style: TextButton.styleFrom(
primary: Colors.white, //Text Color
backgroundColor: Colors.teal, //Button Background Color
),
onPressed: () {},
),
xxxxxxxxxx
// Updated version
ElevatedButton(
child: Text(
"Buy now".toUpperCase(),
style: TextStyle(fontSize: 14)
),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.zero,
side: BorderSide(color: Colors.red)
)
)
),
onPressed: () => null
)
// Learn Flutter inside VS Code at sideguide.dev/courses/flutter?ref=grepper
xxxxxxxxxx
TextButton(
onPressed: () {
print('I got clicked');
},
child: Text('Button'),
style: TextButton.styleFrom(
primary: Colors.white,
textStyle: TextStyle(fontSize: 20.0),
backgroundColor: Colors.red),
),
xxxxxxxxxx
import 'package:flutter/material.dart';
class ButtonComponent extends StatelessWidget {
final VoidCallback? onTap;
final String? title;
final double? fontSize, borderCircular, height, width;
final Color? color, fontColor;
final FontWeight? fontWeight;
final LinearGradient? linearGradient;
final BoxDecoration? boxDecoration;
final TextStyle? textStyle;
const ButtonComponent(
this.title, {
Key? key,
this.onTap,
this.fontSize,
this.color,
this.fontWeight,
this.borderCircular,
this.fontColor,
this.linearGradient,
this.height,
this.boxDecoration,
this.textStyle,
this.width,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
width: width ?? MediaQuery.of(context).size.width,
height: height ?? 54,
decoration: boxDecoration ??
BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 4),
blurRadius: 5.0)
],
gradient: linearGradient ??
LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xff427ECF), Color(0xff2D5994)],
),
color: color,
borderRadius: BorderRadius.circular(borderCircular ?? 16)),
child: ElevatedButton(
onPressed: onTap,
style: ButtonStyle(
shadowColor: MaterialStateProperty.all(Colors.transparent),
backgroundColor: MaterialStateProperty.all(Colors.transparent),
elevation: MaterialStateProperty.all<double>(0),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
borderCircular ?? 20,
),
),
),
),
child: Text(
title!,
style: textStyle ??
TextStyle(
color: fontColor ?? Colors.white,
fontSize: fontSize ?? 16,
fontWeight: fontWeight ?? semiBold),
),
),
);
}
}