可重用性的自定义 SnackBar 类型类 - flutter

Question

您好，我很想知道如何创建 Type SnackBar 的自定义类以实现可重用性 - 这样我就可以在仅接受

SnackBar 类型

而不是 StatelessWidget 的 ScaffoldMessenger.of(context).showSnackBar() 方法中使用它

---

我想要一个可重复使用的 SnackBar，所以我创建了这个自定义的

SnackysnackBar

，从

StatelessWidget

扩展而来

class SnackysnackBar extends StatelessWidget {
  const SnackysnackBar({Key? key, required this.snackText}) : super(key: key);
  final String snackText;

  @override
  Widget build(BuildContext context) => SnackBar(
    content: Text(
      '$snackText',
      textAlign: TextAlign.center,
    ),
    backgroundColor: Colors.green[300],
  );
}

我想我可以在我的 :

中重复使用它

ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(SnackysnackBar(snackText: "I'm a snack Text look at me"));
      }, 

结果它只接受

parameter of type 'SnackBar'

• 所以我想我应该像这样从 SnackBar 扩展一个类，对吗？

class SnackysnackBar extends SnackBar {
  final String snackText;
  
const SnackysnackBar({Key? key, required this.snackText,}) : super(key: key, this.content,);
  @override
  Widget build(BuildContext context) => SnackBar(
        content: Text(
          '$snackText',
          textAlign: TextAlign.center,
        ),
        backgroundColor: Colors.green[300],
      );
}

但这似乎不是正确的方法 - 或者是吗？

---

我收到此错误：“命名参数‘内容’是必需的，但没有相应的参数。”

Answer 1

只需创建一个函数

SnackBar getSnackBar(String snackText) => SnackBar(
      content: Text(
        '$snackText',
        textAlign: TextAlign.center,
      ),
      backgroundColor: Colors.green[300],
    );

并传递给大家

ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(getSnackBar("I'm a snack Text look at me"));
      }, 

Answer 2

我受到happy-san给出的答案的启发。我是以这种结构化的方式来的。 为警报创建单独的文件。我将其命名为alert_utils.dart

import 'package:flutter/material.dart';

class Alert {
  BuildContext context;

  Alert.of(this.context);

  // show an error message
  void showError(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        backgroundColor: Colors.red,
        content: Text(
          message,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  // show an error message
  void showSuccess(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        backgroundColor: Colors.green,
        content: Text(
          message,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    );
  }
}

您可以根据需要添加更多消息类型。

现在代替这个，

ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(getSnackBar("I'm a snack Text look at me"));
      }
      ...
)

这样做，

ElevatedButton(
    onPressed: () {
         Alert.of(context).showSuccess("I'm a snack Text look at me");
    }
    ...
)