web-dev-qa-db-ja.com

FlutterのBlocを使用してDropdownButtonの値を適切に設定するにはどうすればよいですか？

私はブロックプログラミングパターンに不慣れで、ドロップダウンで使用すると問題が発生します。これは私のブロッククラスにあります。

final _dropDown = BehaviorSubject<String>();
Stream<String> get dropDownStream => _dropDown.stream;
Sink<String> get dropDownSink => _dropDown.sink;
final _dropdownValues = BehaviorSubject<List<String>>(seedValue: [
    'One',
    'Two',
    'Three',
    'Four',
  ].toList());
  Stream<List<String>> get dropdownValuesStream => _dropdownValues.stream;

ウィジェットページに次のドロップダウンウィジェットを追加して、すべてがBlocクラスによって処理されるようにしました。

StreamBuilder<List<String>>(
                      stream: _exampleBloc.dropdownValuesStream,
                      builder: (BuildContext contextValues, AsyncSnapshot snapshotValues) {
                        return StreamBuilder<String>(
                            stream: _exampleBloc.dropDownStream,
                            builder: (BuildContext context, AsyncSnapshot snapshot) {
                              return InputDecorator(
                                decoration: InputDecoration(
                                  icon: const Icon(Icons.color_lens),
                                  labelText: 'DropDown',
                                ),
                                child: DropdownButtonHideUnderline(
                                  child: DropdownButton<String>(
                                    value: snapshot.data,
                                    onChanged: (String newValue) => _exampleBloc.dropDownSink.add(newValue),
                                    items: snapshotValues.data != null ? snapshotValues.data.map<DropdownMenuItem<String>>((String value) {
                                      return DropdownMenuItem<String>(
                                        value: value,
                                        child: Text(value),
                                      );
                                    }).toList() : <String>[''].map<DropdownMenuItem<String>>((String value) {
                                      return DropdownMenuItem<String>(
                                        value: value,
                                        child: Text(value),
                                      );
                                    }).toList(),
                                  ),
                                ),
                              );
                            },
                          );
                      },
                    ),

しかし、そのようにすると、DropdownButtonの値（値：snapshot.data）を設定するときにこのエラーが発生します。

I/flutter ( 5565): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter ( 5565): The following assertion was thrown building StreamBuilder<String>(dirty, state:
I/flutter ( 5565): _StreamBuilderBaseState<String, AsyncSnapshot<String>>#70482):
I/flutter ( 5565): 'package:flutter/src/material/dropdown.Dart': Failed assertion: line 514 pos 15: 'items == null ||
I/flutter ( 5565): value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1': is not
I/flutter ( 5565): true.
I/flutter ( 5565):
I/flutter ( 5565): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 5565): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 5565): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 5565):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 5565):
I/flutter ( 5565): When the exception was thrown, this was the stack:
I/flutter ( 5565): #2      new DropdownButton (package:flutter/src/material/dropdown.Dart:514:15)
I/flutter ( 5565): #3      _ExamplePageState.build.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:financeiro_mobile/src/ui/exemple/example_page.Dart:129:42)
I/flutter ( 5565): #4      StreamBuilder.build (package:flutter/src/widgets/async.Dart:423:74)
I/flutter ( 5565): #5      _StreamBuilderBaseState.build (package:flutter/src/widgets/async.Dart:125:48)
I/flutter ( 5565): #6      StatefulElement.build (package:flutter/src/widgets/framework.Dart:3809:27)
I/flutter ( 5565): #7      ComponentElement.performRebuild (package:flutter/src/widgets/framework.Dart:3721:15)
I/flutter ( 5565): #8      Element.rebuild (package:flutter/src/widgets/framework.Dart:3547:5)
I/flutter ( 5565): #9      StatefulElement.update (package:flutter/src/widgets/framework.Dart:3878:5)
I/flutter ( 5565): #10     Element.updateChild (package:flutter/src/widgets/framework.Dart:2742:15)
I/flutter ( 5565): #11     ComponentElement.performRebuild (package:flutter/src/widgets/framework.Dart:3732:16)
I/flutter ( 5565): #12     Element.rebuild (package:flutter/src/widgets/framework.Dart:3547:5)
I/flutter ( 5565): #13     BuildOwner.buildScope (package:flutter/src/widgets/framework.Dart:2286:33)
I/flutter ( 5565): #14     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.Dart:676:20)
I/flutter ( 5565): #15     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.Dart:219:5)
I/flutter ( 5565): #16     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.Dart:990:15)
I/flutter ( 5565): #17     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.Dart:930:9)
I/flutter ( 5565): #18     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.Dart:842:5)
I/flutter ( 5565): #19     _invoke (Dart:ui/hooks.Dart:154:13)
I/flutter ( 5565): #20     _drawFrame (Dart:ui/hooks.Dart:143:3)
I/flutter ( 5565): (elided 2 frames from class _AssertionError)

設定時にsnapshotValues.dataがnullでないかどうかを確認するなど、さまざまなアイデアを試しました。値はリストからのものかnullでなければならないことを私は知っています。しかし、私がそこに置いたロジックは、このエラーをなくしません。値をnullに設定すると機能しますが、選択した値が表示されません。私はこれを間違っていますか？うまくいくより良い方法はありますか？この問題を解決するにはどうすればよいですか？ありがとう！

dartflutterbloc
6
GustavoAndrade

ブロック内の2つのストリームを使用して解決しました。1つは要素のリスト用で、もう1つは値用です。したがって、これらのビルドでは、2つのチェーンされたStreamBuilderが必要であり、データを含む両方のスナップショットを取得したら、ビルドをロードします。そのように：

Widget _holdingDropDown() {
return StreamBuilder(
    stream: bloc.holding,
    builder: (BuildContext context, AsyncSnapshot<Holding> snapshot) {
      return Container(
        child: Center(
          child: snapshot.hasData
              ? StreamBuilder(
                  stream: bloc.obsHoldingList,
                  builder: (BuildContext context,
                      AsyncSnapshot<List<Holding>> holdingListSnapshot) {
                    return holdingListSnapshot.hasData ?
                    DropdownButton<Holding>(
                      value: snapshot.data,
                      items: _listDropDownHoldings,
                      onChanged: (Holding h) {
                        _changeDropDownItemHolding(h);
                      },
                    ): CircularProgressIndicator();
                  },
                )
              : CircularProgressIndicator(),
        ),
      );
    });
}

データを含むスナップショットがない場合は、循環進行状況インジケーターを使用して戻ります。お役に立てば幸いです。

1
Rostan

これは、StreamBuilderを使用しているためです。そのため、最初にスナップショットが空になったときに、検証を行う必要があります。

_        return snapshot.hasData ? 
             InputDecorator(
                                        decoration: InputDecoration(
                                          icon: const Icon(Icons.color_lens),
                                          labelText: 'DropDown',
                                        ),
                                        child: DropdownButtonHideUnderline(
                                          child: DropdownButton<String>(
                                            value: snapshot.data,
                                            onChanged: (String newValue) => _exampleBloc.dropDownSink.add(newValue),
                                            items: snapshotValues.data != null ? snapshotValues.data.map<DropdownMenuItem<String>>((String value) {
                                              return DropdownMenuItem<String>(
                                                value: value,
                                                child: Text(value),
                                              );
                                            }).toList() : SizedBox(height: 0.0)
                                        ),
                                      ) : SizedBox(height: 0.0);
_

空のウィジェットを表示するSizedBox(height: 0.0)またはCircleProgressIndicator

1
diegoveloper