几个具有相似小部件的屏幕 - 如何编码（Flutter，Dart）

Question

我有一个带有几个屏幕的项目，它总是包含一个带有正文和父窗口小部件的类（在我的例子中是一个卡片）。父窗口小部件始终具有类似的属性，但不同的子项如按钮，文本或容器等。

我的问题是：我是否应该每次为每个屏幕复制父窗口小部件（卡片）的代码？或者最好将卡放入另一个只包含卡的类或功能或小部件中（这样我只需要一次卡的整个代码）？

如果有人能编写代码示例，我将非常感激。

Answer 1

上周我遇到了类似的问题。登录屏幕和注册屏幕非常相似，或者至少是它们的顶部横幅部分。

我所做的是为两个屏幕创建自己的小部件。

此自定义小部件的代码：

class AuthBanner extends StatelessWidget {
  const AuthBanner({
    Key key,
    @required this.text,
  }) : super(key: key);

  final String text;

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
            image: DecorationImage(
          image: AssetImage(backdrop),
          fit: BoxFit.cover,
        )),
        height: 220,
        width: double.infinity,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.bottomLeft,
              child: Padding(
                padding: const EdgeInsets.only(left: 30.0, bottom: 20.0),
                child: Text(text.toUpperCase(),
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 32,
                      fontWeight: FontWeight.w600,
                    )),
              ),
            ),
          ],
        ));
  }
}

这可以类似于其他小部件使用，例如Text小部件。例如，如果我在登录屏幕上，我使用：

AuthBanner(text: "login")