Показать диалог Подсказка, как на веб-странице во флаттере

Question

Я хочу показать диалоговое окно, например, уведомление / приглашение. Вот так изображение, показанное здесь можно ли показывать в флаттере

Answer 1

Вы можете скопировать и запустить полный код ниже
Вы можете использовать пакет https://pub.dev/packages/flushbar
В pubspec.yaml для решения проблемы

flushbar:
    git:
      url: https://github.com/AndreHaueisen/flushbar.git
      ref: 13c55a8

код фрагмент

flush = Flushbar(
      title: "Hey Ninja",
      message:
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      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: true,

рабочая демонстрация

полный код

import 'package:flutter/material.dart';
import 'package:flushbar/flushbar.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, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Flushbar flush;

  void _incrementCounter() {
    flush = Flushbar(
      title: "Hey Ninja",
      message:
          "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
      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: true,
      //duration: Duration(seconds: 10),
      icon: Icon(
        Icons.camera,
        color: Colors.greenAccent,
      ),
      showProgressIndicator: true,
      progressIndicatorBackgroundColor: Colors.blueGrey,
      titleText: Text(
        "Hello Hero",
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20.0,
            color: Colors.yellow[600],
            fontFamily: "ShadowsIntoLightTwo"),
      ),
      messageText: Column(
        children: <Widget>[
          Text(
            "You killed that giant monster in the city. Congratulations!",
            style: TextStyle(
                fontSize: 18.0,
                color: Colors.green,
                fontFamily: "ShadowsIntoLightTwo"),
          ),
          Row(children: <Widget>[
            FlatButton(
              onPressed: () {
                flush.dismiss();
              },
              child: Text(
                "NO THANKS",
                style: TextStyle(color: Colors.amber),
              ),
            ),
            FlatButton(
              onPressed: () {
                flush.dismiss();
              },
              child: Text(
                "ALLOW",
                style: TextStyle(color: Colors.amber),
              ),
            )
          ])
        ],
      ),
    )..show(context);
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}