Flutter-如何在多个地方重用一些代码

Question

嗨，我有一个应用程序，我将在那里制作一本书，这本书将带有图像，

我正在尝试重用代码，这意味着如何在一个方法中添加代码，然后在不同的区域使用该方法，但只更改每个方法中的图像。使代码更加可重用？？？代码将保持不变，但每个代码块中的图像将发生变化。。。我不想一次又一次地复制粘贴代码。

import 'dart:ui';
import 'package:adobe_xd/adobe_xd.dart';
import 'dart:io';
import 'package:Quran_highlighter/main.dart';
import 'package:flutter/rendering.dart';
import 'package:system_shortcuts/system_shortcuts.dart';
import 'package:Quran_highlighter/Widgets/NavDrawer.dart';
import 'package:flutter/material.dart';
import 'package:zoom_widget/zoom_widget.dart';
import 'package:flutter/gestures.dart';
import 'package:Quran_highlighter/Widgets/size_config.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class Aliflaammeem extends StatefulWidget {
@override
_AliflaammeemState createState() => _AliflaammeemState();
}

class _AliflaammeemState extends State<Aliflaammeem> {

@override
Widget build(BuildContext context) {
var screenSizes = MediaQuery.of(context).size;
return Scaffold(
appBar: new AppBar(title: new Text("1 Alif-laam-meem آلم, Pg2")),
// return DefaultTextStyle(
// style: Theme.of(context).textTheme.bodyText2,
body: LayoutBuilder(builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Stack(children: <Widget>[
new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: 0.10,
// body: Center,
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child: new Container(
**child: new Image.asset(
"test/assets/Para 1 - Alif-laam-meem no color/quranpg2.png",**
fit: BoxFit.cover,
),
),
),
actions: <Widget>[
new IconSlideAction(
caption: 'English',
// color: Colors.lightBlue,
color: Colors.blueGrey,
icon: Icons.language,
foregroundColor: Colors.lightBlue,
// color: Colors.black,
// ),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Changepg2topg3()),
);
}),
new IconSlideAction(
caption: 'Forward',
// color: Colors.greenAccent,
// color: Colors.black87,
icon: Icons.arrow_back_ios,
foregroundColor: Colors.greenAccent,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Changepg2topg3()),
);
}),
// ),
],
secondaryActions: <Widget>[
new IconSlideAction(
caption: 'Back',
// color: Colors.red[200],
icon: Icons.arrow_forward_ios,
foregroundColor: Colors.red[200],
// color: Colors.black87,

// onTap: () => _showSnackBar('More'),
),
new IconSlideAction(
caption: 'Arabic',
// color: Colors.yellow[800],
icon: Icons.brightness_4,
foregroundColor: Colors.yellow[800],
color: Colors.blueGrey,

// onTap: () =>
),
],
),
]));
}));
}
}
//I WANT THE TOP CODE TO BE THE GLOBAL CODE WHICH WILL REUSED AGAIN AND 
AGAIN IN THE SAME CLASS - AND IF I CHANGE SOMETHING UP THERE, I WANT IT TO AUTOMATICALLY CHANGE THROUGHOUT ALL THE PAGES 
AND BELOW WE HAVE THE SAME CODE WHICH I COPIED AND PASTED - AND JUST CHANGED THE IMAGE AND APPBAR TITLE....  I NEED TO SEE HOW I CAN ACHIEVE THIS WITHOUT COPY AND PASTING....

class Changepg2topg3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
var screenSizes = MediaQuery.of(context).size;
return Scaffold(
appBar: new AppBar(title: new Text("1 Alif-laam-meem آلم, Pg3")),
// return DefaultTextStyle(
// style: Theme.of(context).textTheme.bodyText2,
body: LayoutBuilder(builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
child: Stack(children: <Widget>[
new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: 0.10,
// body: Center,
child: SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child: new Container(
// padding: EdgeInsets.zero,
**child: new Image.asset(
`"test/assets/Para 1 - Alif-laam-meem no color/quranpg3.png",*`*
// fit: BoxFit.fitidth,
fit: BoxFit.cover,
),
),
),
actions: <Widget>[
new IconSlideAction(
caption: 'English',
color: Colors.lightBlue,
icon: Icons.language,

// onTap: () =>
),
new IconSlideAction(
caption: 'Forward',

color: Colors.greenAccent,
icon: Icons.arrow_back_ios,
// onTap: () => _showSnackBar('Share'),
),
],
secondaryActions: <Widget>[
new IconSlideAction(
caption: 'Back',
color: Colors.red[200],
icon: Icons.arrow_forward_ios,
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Aliflaammeem()),
);
}),
// ),
new IconSlideAction(
caption: 'Arabic',
color: Colors.yellow[800],
icon: Icons.brightness_4,
// onTap: () =>
),
],
),
]));
// );
}));
}
}

// }

Answer 1

1.创建一个返回列表的类2.制作一个新的Widget函数，并将列表传递给该函数