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

标签 flutter dart mobile flutter-layout flutter-dependencies

嗨,我有一个应用程序,我将在其中制作一本书,这本书将带有图像,
我正在尝试重用代码,这意味着如何在方法中添加代码,而不是在不同区域使用该方法,但只更改每个方法中的图像.. . 使代码更可重用???代码将保持不变,但每个代码块中的图像会改变......我不想一次又一次地复制和粘贴代码。

    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: () =>
                    ),
                  ],
                ),
              ]));
              // );
            }));
      }
    }
    
    // }

最佳答案

1.制作一个返回列表的类
2.制作一个New Widget函数并将列表传入这个函数

关于Flutter - 如何在多个地方重用一些代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64346690/

相关文章:

flutter - 在 Flutter 中向脚手架添加文本、图像或 ListView

dart - If 语句在 flutter 中即使是 true 也不起作用

flutter - 根据TabBarView的事件 View 显示不同的晶圆厂

android - 优化移动网页

jquery - iOS 使用 cordova 上传图像无法正常工作

ios - `<PBX...` >` 试图用未知的 UUID 初始化一个对象。这可能是合并的结果,未知的 UUID 被丢弃

flutter - 分页gridview失败

flutter - 如何实现 pull_to_refresh 到 streambuilder

Dart Js-Interop 函数类型参数

html - 移动设备中的 TranslateZ 性能问题