flutter - 如何使用 Flutter bloc 构建一个文本字段，在用户键入时将其值更新为另一个小部件？

Question

我正在寻找与您在 Google 字体上所拥有的内容相近的东西。https://fonts.google.com/

标签： flutter

Answer 1

我创建了一个像这样工作的示例演示

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

void main() {
  // for bloc transition trace
  //BlocSupervisor.delegate = SimpleBlocDelegate();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider<TextUpdateBloc>(
      create: (context) => TextUpdateBloc(),
      child: MaterialApp(
        home: Scaffold(body: DeleteWidget()),
      ),
    );
  }
}

class TextInputState {}

class TextInputInitState extends TextInputState {
  String text;
  TextInputInitState({this.text});
}

class TextInputDataChange extends TextInputState {
  String text;
  TextInputDataChange({this.text});
}

class TextEvents {}

class TextInit extends TextEvents {}

class TextChange extends TextEvents {
  final String data;
  TextChange({@required this.data});
}

class TextUpdateBloc extends Bloc<TextEvents, TextInputState> {
  @override
  get initialState => TextInputInitState(text: "");

  @override
  Stream<TextInputState> mapEventToState(event) async* {
    if (event is TextInit) {
      yield TextInputInitState(text: "");
    } else if (event is TextChange) {
      yield TextInputInitState(text: event.data);
    }
  }
}

class DeleteWidget extends StatelessWidget {
  const DeleteWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TextUpdateBloc counterBloc = BlocProvider.of<TextUpdateBloc>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('test app'),
      ),
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              onChanged: (value) => counterBloc.add(TextChange(data: value)),
            ),
            Container(
              child: BlocBuilder<TextUpdateBloc, TextInputState>(
                builder: (context, state) {
                  if (state is TextInputInitState) {
                    return Text(state.text.toString());
                  } else if (state is TextInputDataChange) {
                    return Text(state.text.toString());
                  } else {
                    return Text("something worng");
                  }
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}