如何将下面的飞镖代码缩短为一个函数

Question

我很难将下面的代码缩短为一个函数。我希望将下面的提升按钮复制到屏幕上的数百个按钮中，因此相信函数是最好的方法，然后我可以在页面中调用函数。

ElevatedButton(
style:
TextButton.styleFrom(backgroundColor: Colors.grey.shade200),
child: Align(
alignment: Alignment.centerLeft,
child: RichText(
textAlign: TextAlign.justify,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "Diploma in Business | ",
style: TextStyle(color: Colors.black),
),
TextSpan(
text: "Tayloru0027s",
style: TextStyle(
color: Colors.black, fontWeight: FontWeight.bold),
),
],
),
),
),
onPressed: () {
sendAnalyticsEvent(
eventName: "diplomainbusiness_taylors",
clickevent: "User clicked dipt");
showModalBottomSheet(
isScrollControlled: true,
context: context,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
)),
builder: (context) => Container(
padding: EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [        
Image.network(
'https://i.imgur.com/bcAC3cA.jpg',
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return const CircularProgressIndicator();      
},
errorBuilder: (context, error, stackTrace) =>
const Text('Some errors occurred!'),
),
ListTile(
title: Text(
'nThis programme is specifically designed to equip students with solid business knowledge and skills, with a central focus on instilling a global mindset as well as creative and critical thinking, set in an experimental learning environment. Upon successful completion of the programme, students will be able to seamlessly transition into our degree and have the competitive advantage required to seek global employment opportunities.n',
textAlign: TextAlign.justify,
),
),
ListTile(
title: Text(
'• April and August Intake n• 2 years programmen• Scholarships available',
textAlign: TextAlign.justify,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: double.infinity,
child: CupertinoButton.filled(
child: Text("Interested? Get more info!"),
onPressed: () => openBrowserTab(),
),
),
),
],
),
),
);
},
),

基本上，升高的按钮会触发一个底部表单，在底部表单内，有一个图像、一些文本(列表平铺(等等。有可能将其变成一个函数吗？或者，这是可能的最短代码吗？请对此提供一些指导。

非常感谢！

Answer 1

像这样声明

import 'package:flutter/material.dart';
class CustomElevatedButton extends StatelessWidget {
final String name;
final String education;
final String eventName;
final String clickEvent;
final String imageURl;
final String errorMessage;
final String information1;
final String information2;
final String information3;
const CustomElevatedButton(
{Key? key,
required this.name,
required this.education,
required this.eventName,
required this.clickEvent,
required this.imageURl,
required this.errorMessage,
required this.information1,
required this.information2,
required this.information3})
: super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
style: TextButton.styleFrom(backgroundColor: Colors.grey.shade200),
child: Align(
alignment: Alignment.centerLeft,
child: RichText(
textAlign: TextAlign.justify,
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: education,
style: const TextStyle(color: Colors.black),
),
TextSpan(
text: name,
style:
const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
],
),
),
),
onPressed: () {
sendAnalyticsEvent(
eventName: eventName,
clickevent: clickEvent);
showModalBottomSheet(
isScrollControlled: true,
context: context,
shape: const RoundedRectangleBorder(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(20),
)),
builder: (context) => Container(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.network(
imageURl,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return const CircularProgressIndicator();
},
errorBuilder: (context, error, stackTrace) =>
Text(errorMessage),
),
ListTile(
title: Text(
information1,
textAlign: TextAlign.justify,
),
),
ListTile(
title: Text(
information2,
textAlign: TextAlign.justify,
),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: double.infinity,
child: CupertinoButton.filled(
child: Text(information3),
onPressed: () => openBrowserTab(),
),
),
),
],
),
),
);
},
);
}
}

像这样使用

const CustomElevatedButton(
clickEvent: 'User clicked dipt',
education: 'Diploma in Business | ',
errorMessage: 'Some errors occurred!',
eventName: 'diplomainbusiness_taylors',
imageURl: 'https://i.imgur.com/bcAC3cA.jpg',
information1: 'nThis programme is specifically designed to equip students with solid business knowledge and skills, with a central focus on instilling a global mindset as well as creative and critical thinking, set in an experimental learning environment. Upon successful completion of the programme, students will be able to seamlessly transition into our degree and have the competitive advantage required to seek global employment opportunities.n',
information2: '• April and August Intake n• 2 years programmen• Scholarships available',
information3: 'Interested? Get more info!',
name: 'Tayloru0027s',
),

您可以提取任何您想要的内容，包括样式和未压缩的回调。

如果你有任何疑问，请随时询问。