web-dev-qa-db-ja.com

Flutter：ブロック、アラートダイアログの表示方法

私はブロックパターンとストリームのものに新しいです。ボタンを押したときに警告ダイアログを表示したいのですが、方法がわかりません。実際に私のコードは：

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();
      });
   }

しかし、もちろん、それは機能しませんでした。

viewstreamflutteralert
10
Little Monkey

ビルドが機能しているときはダイアログを表示できません。新しいデータを取得したら、新しいウィジェットを作成します。この場合はおそらくストリームを使用しない方が良いでしょうが、必要な場合は使用する必要があります

WidgetsBinding.instance.addPostFrameCallback（（_）=> yourFunction（context））;

または

Future.microtask（（）=> showDialogFunction（context））;

あなたの場合

if (snapshot.hasData) { WidgetsBinding.instance.addPostFrameCallback((_) => showDialogFunction(context)); }

このコードはビルドメソッドの後に起動されるため、ダイアログがすぐに表示されます。

Bloc関数は常にウィジェットを返すため、ストリームにデータがある場合は常にbutton（）または別のウィジェットを返します

14
Mateusz

これは私がやったことですが、私も羽ばたくのが初めてなので間違っているかもしれません。しかし、私のシナリオでは機能します。

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呼び出しの終了後に出力されるストリームです。

authBloc.processRegisterは、フォームデータをAuth APIサービスプロバイダーに渡すための入力シンクです。

_nagivateToLogin＆_showSnakBarは単純な関数です

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

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