RichText in TextFieldBlocBuilder

[pitanni]

Is there a possibility to use RichText?
I would need it for tag management

[WahdanZ]

you can use this example and it's depend on this package https://pub.dev/packages/rich_text_view

import 'package:flutter/material.dart';
import 'package:flutter_form_bloc/flutter_form_bloc.dart';
import 'package:rich_text_view/rich_text_view.dart';

void main() {
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(20),
          ),
        ),
      ),
      builder: (context, child) {
        return FormThemeProvider(
          theme: FormTheme(
            checkboxTheme: CheckboxFieldTheme(
              canTapItemTile: true,
            ),
            radioTheme: RadioFieldTheme(
              canTapItemTile: true,
            ),
          ),
          child: child!,
        );
      },
      home: FormBlocExample(),
    );
  }
}

class MyFormBloc extends FormBloc<String, String> {
  final richText = TextFieldBloc<List<HashTag>>();

  MyFormBloc() : super(autoValidate: false) {
    addFieldBlocs(fieldBlocs: [
      richText,
    ]);
    Future.delayed(Duration(milliseconds: 2)).then((value) {
      richText.updateExtraData(
          [HashTag(hashtag: "Flutter"), HashTag(hashtag: "Dart")]);
    });
  }

  @override
  void onSubmitting() async {}
}

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => MyFormBloc(),
      child: Builder(
        builder: (context) {
          final formBloc = BlocProvider.of<MyFormBloc>(context);
          return Scaffold(
            appBar: AppBar(title: const Text('Built-in Widgets')),
            floatingActionButton: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const SizedBox(height: 12),
                FloatingActionButton.extended(
                  heroTag: null,
                  onPressed: formBloc.submit,
                  icon: const Icon(Icons.send),
                  label: const Text('SUBMIT'),
                ),
              ],
            ),
            body: FormBlocListener<MyFormBloc, String, String>(
              onSubmitting: (context, state) {
                //todo add onSubmitting
              },
              onSuccess: (context, state) {
                //todo add onSuccess
              },
              onFailure: (context, state) {
                //todo add onFailure
              },
              child: ScrollableFormBlocManager(
                formBloc: formBloc,
                child: SingleChildScrollView(
                  physics: const ClampingScrollPhysics(),
                  padding: const EdgeInsets.all(24.0),
                  child: Column(
                    children: <Widget>[
                      RichTextBlocBuilder(
                        textFieldBloc: formBloc.richText,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class RichTextBlocBuilder extends StatelessWidget {
  final TextFieldBloc<List<HashTag>> textFieldBloc;

  const RichTextBlocBuilder({
    Key? key,
    required this.textFieldBloc,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final initialValue = textFieldBloc.value;

    return BlocBuilder<TextFieldBloc<List<HashTag>>, TextFieldBlocState>(
      bloc: textFieldBloc,
      builder: (context, state) {
        return RichTextView.editor(
          suggestionPosition: SuggestionPosition.bottom,
          onSearchTags: (term) async {
            return state.extraData;
          },
          initialValue: initialValue,
          onChanged: (value) => textFieldBloc.updateValue(value),
          decoration: InputDecoration(
            errorText: state.error?.toString(),
          ),
        );
      },
    );
  }
}