在Flutter中制作具有渐变背景的ElevatedButton,可以通过自定义ElevatedButton的style来实现。以下是一个示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Gradient ElevatedButton Example'),
),
body: Center(
child: GradientElevatedButton(),
),
),
);
}
}
class GradientElevatedButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
print('Button pressed!');
},
child: Text('Gradient Button'),
style: ElevatedButton.styleFrom(
primary: Colors.transparent,
onPrimary: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
visualDensity: VisualDensity.standard,
elevation: 0,
backgroundColor: Colors.transparent,
splashColor: Colors.grey.withOpacity(0.2),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
clipBehavior: Clip.antiAlias,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.blue.withOpacity(0.7),
Colors.blue.withOpacity(0.3),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Text(
'Gradient Button',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
),
);
}
}
这种渐变背景的ElevatedButton可以用于需要视觉吸引力的按钮,例如在应用的主页、设置页面或任何需要突出显示的按钮上。
通过这种方式,你可以轻松地在Flutter中创建具有渐变背景的ElevatedButton,并根据需要调整渐变颜色和方向。
领取专属 10元无门槛券
手把手带您无忧上云