dart - 在 flutter/dart 中重用小部件

Question

我有以下 Flutter 代码，我正在尝试弄清楚如何将第 1 部分放入一个单独的类中，以便我可以在多个屏幕上重用它，然后分别重用(不是同时，而是)，如何将第 2 节(代码的较大部分)放入单独的类中，以及如何使用变量在多个页面上重用它以便能够更改标题。目前，我只是将整个代码复制并粘贴到每个屏幕中，但我知道必须有更好的方法来重用代码。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(

        //------------------START SECTION 2---------------------------------------------

        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text(
            "Welcome",
            style: TextStyle(color: Colors.white),
          ),
          actions: <Widget>[
            // action button

            //------------------START SECTION 1---------------------------------------------

            PopupMenuButton<String>(
              //onSelected: showMenuSelection
              //icon: new Icon(Icons.add, color: Colors.blueGrey),
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                    const PopupMenuItem<String>(
                        value: 'Item 1', child: Text('Item 1')),
                    const PopupMenuItem<String>(
                        value: 'Item 2', child: Text('Item 2')),
                  ],
            ),

            //------------------END SECTION 1---------------------------------------------

          ],
        ),

        //------------------END SECTION 2---------------------------------------------

        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Answer 1

VS 代码让您只需点击几下即可提取小部件，如果您使用的是 VS 代码 - 选择小部件代码开始的行。点击 Ctrl + .，选择 Extract widget 选项，输入您选择的名称。然后您可以自定义提取的小部件以接收不同的参数并相应地返回小部件。任何 IDE 都可以完成同样的操作，但我不知道该过程。

编辑 1:由于我现在无法发布屏幕截图，所以我发现这个 SO 答案可以提供帮助。 :) https://stackoverflow.com/a/51235410/4794396