Flutter:块,如何显示警报对话框

sy5wg1nm  于 2023-01-27  发布在  Flutter
关注(0)|答案(7)|浏览(245)

我是块模式和流模式的新手。我想在按下按钮时显示一个警告对话框,但我找不到方法。实际上我的代码是:

Widget button() {
  return RaisedButton(
      child: Text('Show alert'),
      color: Colors.blue[700],
      textColor: Colors.white,
      onPressed: () {
        bloc.submit();
      });
   }


return Scaffold(
        appBar: AppBar(
          title: Text("Title"),
        ),
        body: StreamBuilder(
            stream: bloc.getAlert,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text("I have Dataaaaaa ${snapshot.data}");
              } else
                return ListView(
                  children: <Widget>[
                    Container(
                     button()
                    )
                ...

以及BLoC:

final _submissionController = StreamController();
Stream get submissionStream=> _submissionController.stream;
Sink get submissionSink=> _submissionController.sink;

我试着做一些像这样的事情:

Widget button() {
  return StreamBuilder(
stream: submissionStream
builder: (context, snapshot){
if (snapshot.hasData){
return showDialog(...)
}else
 return RaisedButton(
      child: Text('Show alert'),
      color: Colors.blue[700],
      textColor: Colors.white,
      onPressed: () {
        bloc.submit();
      });
   }

但是,当然,它没有起作用。

ldioqlga

ldioqlga1#

当构建工作时,你不能显示对话框。当你有了新的数据,你就创建一个新的小部件。在这种情况下,不使用流可能更好,但如果有必要,你应该使用
小部件绑定。示例。addPostFrameCallback((_)=〉您的函数(上下文));

未来的微任务(()=〉showDialogFunction(上下文));
如果你
if (snapshot.hasData) { WidgetsBinding.instance.addPostFrameCallback((_) => showDialogFunction(context)); }
此代码将在生成方法之后启动,因此对话框将立即显示。
块函数始终返回小部件,因此当流包含数据时,始终返回button()或不同的小部件

ws51t4hk

ws51t4hk2#

您可以使用BlocListener来显示对话框、小吃栏或导航到新页面。
使用这种方法,您可能希望重构以依赖块状态,而不是直接访问流。
监听器保证每次状态改变只被调用一次,但是构建器可以被调用很多次。而且你不能在构建器上做一些操作,比如导航到另一个页面。

return Scaffold(
  appBar: AppBar(
    title: Text("Title"),
  ),
  body: BlocProvider<YourBloc>(
    create: () => YourBloc(),
    child: Stack([
      SnackbarManager(),
      YourScreen(),
    ]),
  ),
);
...

/// This is basically an empty UI widget that only
/// manages the snackbar
class SnackbarManager extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocListener<YourBloc, YourBlocState>(
      listener: (context, state) {
        if (state.hasMyData) {
          Scaffold.of(context).showSnackBar(SnackBar(
            content:
                Text("I got data"),
          ));
        }
      },
      child: Container(),
    );
  }
}
bhmjp9jg

bhmjp9jg3#

我知道我迟到了,但也许这会帮助一些人。我最近正在学习BLoC,也遇到了类似的问题。
首先,我想推荐flutter_bloc package from pub.dev,它包含了一些小部件来帮助你,比如BlocListenerBlocConsumer
如果您不想使用它,可以尝试分别使用StatefulWidgetlisten,并使用您的逻辑显示对话框(还要确保您的流像我的示例中那样广播,这样它可以有多个侦听器)。
我做了一个例子,你可以复制过去到dartpad.dev/flutter

import 'dart:async';
import 'package:flutter/material.dart';

final myStream = StreamController<bool>.broadcast();

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

  initState() {
    super.initState();
    myStream.stream.listen((show){
      if(show)
        showDialog(
        barrierDismissible: false,
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('MyDialog'),
            actions: [
              TextButton(
                child: Text('Close'),
                onPressed: (){
                  myStream.sink.add(false);
              }),
            ]
          );
        }
      );
      if(!show) {
        Navigator.pop(context);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(child: ElevatedButton(
      child: Text('Show Alert'),
    onPressed: (){
      myStream.sink.add(true);
    }));
  }
}
fivyi3re

fivyi3re4#

这是我所做的,这可能是错误的,因为我也是新的Flutter。但工程为我的情况。

Widget build(BuildContext context) {
final authBloc = BlocProvider.of<AuthBloc>(context);

authBloc.outServerResponse.listen((serverResponse) {
  if (serverResponse.status == 'success') {
    _navigateToLogin();
  } else {
    _showSnakBar(serverResponse.message);
  }
});
.... Rest of the code which returns the widget, 
which in my case is form widget with button for submitting as follows,
onPressed: () {
  if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      authBloc.processRegister.add(_registrationData.toMap());
  }
}

outServerResponse是API POST调用完成后输出的流。
processRegister是将表单数据传递给我的Auth API服务提供程序的输入接收器。
_nagivateToLogin和_showSnakBar是简单的函数

_navigateToLogin() {
      Navigator.of(context).pop();
}

_showSnakBar(String msg) {
     Scaffold.of(context).showSnackBar(
      SnackBar(
        content: Text(msg),
      ),
     );
 }
yeotifhr

yeotifhr5#

这个过程对我有用。2我在返回小部件之前调用了我的对话框
未来的微任务(()=〉showLoginSuccess(构建上下文上下文));

ao218c7q

ao218c7q6#

如果您正在使用我建议使用的flutter_bloc包,您应该使用提供的 BlocListener 小部件,它可以监听状态更改并执行逻辑代码。例如:

BlocListener<BlocA, BlocAState>(
    listener: (context, state) {
    // do stuff here based on BlocA's state
    },
    child: Container(),
);

但如果您还需要构建小部件,则应使用 BlocConsumer 小部件,该小部件同时具有侦听器和构建器:

BlocConsumer<BlocA, BlocAState>(
    listener: (context, state) {
    // do stuff here based on BlocA's state
     },
    builder: (context, state) {
    // return widget here based on BlocA's state
     }
 );

显示对话框而不更改构建小部件是很常见的,因此 BlocConsumer 针对这种情况提供了 buildWhen 选项,该选项采用先前和当前状态来决定构建器:

buildWhen: (state, currentState){
                  if (state is MainComplexTableState && currentState is NewComplexRegistration) {
                    return false;
                  }
                  if (state is ErrorToShowUp) {
                    return false;
                  }
                  return true;
                },
hkmswyz6

hkmswyz67#

  • 我通过维护以下两个上下文解决了这个问题***
BlocProvider of type A  ==>widget class B(showdialog(context:context,builder(context2){
Blocprvider.value(value:Blocprovider.of<A>.context)
child:BlocListener(
listner(context2,state)
{// 
 your works
//}
child:AlertDialog( some widgets
a button function ()=> context.read<A>().function or property name
//

1.此处我们称之为旧上下文,实际上它已向提供程序注册,2.上下文2仅用于构建新的构建器小部件。3.因此,我们通过导航传递块,并在导航的警报小部件中访问块,而无需创建它

相关问题