Flutter通知提示插件another_flushbar的使用

插件介绍

another_flushbar 是一个用于Flutter应用的通知提示插件，它提供了比原生Toast和Snackbar更丰富的自定义选项。无论你是Android开发者还是iOS开发者，这个插件都能帮助你创建出美观且功能强大的通知提示框。

你可以通过这里查看安装说明。

快速参考

以下是一些常用的属性及其作用：

更多属性请参见官方文档。

示例代码

基础用法

import 'package:another_flushbar/flushbar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Hello flushbar:'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          await Flushbar(
            title: 'Hey Ninja',
            message:
                'Lorem Ipsum is simply dummy text of the printing and typesetting industry',
            duration: Duration(seconds: 3),
          ).show(context);
        },
        tooltip: 'Show Flushbar',
        child: Icon(Icons.add),
      ),
    );
  }
}

高级用法

自定义样式

Flushbar(
  title: "Hey Ninja",
  titleColor: Colors.white,
  message: "Customized message with advanced styling.",
  flushbarPosition: FlushbarPosition.TOP,
  flushbarStyle: FlushbarStyle.FLOATING,
  reverseAnimationCurve: Curves.decelerate,
  forwardAnimationCurve: Curves.elasticOut,
  backgroundColor: Colors.red,
  boxShadows: [BoxShadow(color: Colors.blue[800], offset: Offset(0.0, 2.0), blurRadius: 3.0)],
  backgroundGradient: LinearGradient(colors: [Colors.blueGrey, Colors.black]),
  isDismissible: false,
  duration: Duration(seconds: 4),
  icon: Icon(
    Icons.check,
    color: Colors.greenAccent,
  ),
  mainButton: FlatButton(
    onPressed: () {},
    child: Text(
      "CLAP",
      style: TextStyle(color: Colors.amber),
    ),
  ),
  showProgressIndicator: true,
  progressIndicatorBackgroundColor: Colors.blueGrey,
  titleText: Text(
    "Hello Hero",
    style: TextStyle(
        fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.yellow[600], fontFamily: "ShadowsIntoLightTwo"),
  ),
  messageText: Text(
    "You killed that giant monster in the city. Congratulations!",
    style: TextStyle(fontSize: 18.0, color: Colors.green, fontFamily: "ShadowsIntoLightTwo"),
  ),
)..show(context);

输入框

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

Flushbar<List<String>> flush = Flushbar<List<String>>(
  userInputForm: Form(
    key: _formKey,
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        TextFormField(
          initialValue: "Initial Value",
          style: TextStyle(color: Colors.white),
          maxLength: 100,
          maxLines: 1,
          maxLengthEnforced: true,
          decoration: InputDecoration(
            fillColor: Colors.white10,
            filled: true,
            icon: Icon(Icons.label, color: Colors.grey[500]),
            border: UnderlineInputBorder(),
            helperText: "Helper Text",
            helperStyle: TextStyle(color: Colors.grey),
            labelText: "Label Text",
            labelStyle: TextStyle(color: Colors.grey),
          ),
        ),
        TextFormField(
          initialValue: "Initial Value Two",
          style: TextStyle(color: Colors.white),
          maxLength: 100,
          maxLines: 1,
          maxLengthEnforced: true,
          decoration: InputDecoration(
            fillColor: Colors.white10,
            filled: true,
            icon: Icon(Icons.label, color: Colors.grey[500]),
            border: UnderlineInputBorder(),
            helperText: "Helper Text",
            helperStyle: TextStyle(color: Colors.grey),
            labelText: "Label Text",
            labelStyle: TextStyle(color: Colors.grey),
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Padding(
            padding: const EdgeInsets.only(top: 8.0),
            child: MaterialButton(
              textColor: Colors.amberAccent,
              child: Text("SUBMIT"),
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  // Perform action on form submit
                  flush.dismiss(["Value1", "Value2"]);
                }
              },
            ),
          ),
        ),
      ],
    ),
  ),
)..show(context).then((result) {
  if (result != null) {
    print("User input: ${result.join(", ")}");
  }
});

以上就是关于another_flushbar的基本使用方法以及一些高级特性的示例代码。希望这些信息能够帮助到你！如果你有任何问题或者需要进一步的帮助，请随时提问。