Rich Text and Localization support.

[kushalmahapatro]

I remember, when we were working on the home screen of the app which used to render from a json:
One of the main requirements was to have support of RichText as the team wanted feasibility to highlight part of the text and also wanted to action on them.

And with this, do feel that localization is also a required part when dealing with texts.

Does Miria support these?

[divyanshub024]

Hey @kushalmahapatro,

Mirai does not have support for RichText yet. But we are planning to add it soon.

I agree that the Localization is imp but we haven't planned it yet. What do you think will be the right approach for localization?

[RodolfoSilva]

I think localization should be the responsibility of the server. I believe an interceptor can be added to Dio to add the user's current language and control what to show for the user on the server.

[divyanshub024]

Here is the issue for RichText.
#152

[divyanshub024]

@kushalmahapatro Should we create a new widget for Rich Text, or should we add the rich text functionality in the Mirai Text widget?
cc: @RodolfoSilva @i-asimkhan

[i-asimkhan]

@kushalmahapatro Should we create a new widget for Rich Text, or should we add the rich text functionality in the Mirai Text widget? cc: @RodolfoSilva @i-asimkhan

I would suggest making a separate widget, because taking this example into consideration it becomes messy.

if (richText) {
      return RichText(
        text: TextSpan(
            text: 'children 1 - children 2 - children 3',
            style: const TextStyle(
                color: Colors.grey, fontSize: 20, fontWeight: FontWeight.bold),
            children: <TextSpan>[
              TextSpan(
                  text: 'children 1',
                  style: const TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      decoration: TextDecoration.underline),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // open desired screen
                    }),
              const TextSpan(
                  text: ' to ',
                  style: TextStyle(
                      color: Colors.grey,
                      fontSize: 20,
                      fontWeight: FontWeight.bold)),
              TextSpan(
                  text: 'children 2',
                  style: const TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      decoration: TextDecoration.underline),
                  recognizer: TapGestureRecognizer()
                    ..onTap = () {
                      // open desired screen
                    }),
              const TextSpan(
                  text: 'children 3',
                  style: TextStyle(
                      color: Colors.grey,
                      fontSize: 20,
                      fontWeight: FontWeight.bold))
            ]),
      );
    }

    return Text(
      model.data,
      style: model.style?.parse,
      textAlign: model.textAlign,
      textDirection: model.textDirection,
      softWrap: model.softWrap,
      overflow: model.overflow,
      textScaleFactor: model.textScaleFactor,
      maxLines: model.maxLines,
      semanticsLabel: model.semanticsLabel,
      textWidthBasis: model.textWidthBasis,
      selectionColor: model.selectionColor.toColor,
    );

[kushalmahapatro]

Yup i agree on this.

And was wondering if this is not yet added to your timeline. Can i give it a try.

[RodolfoSilva]

I totally agree. This must be a separate widget. It's easier to maintain the API.

[divyanshub024]

@i-asimkhan @kushalmahapatro
This is what I'm talking about when I say the functionality will be added to the text widget.

    return Text.rich(
      TextSpan(
        text: model.data,
        children: [
          TextSpan(),
          TextSpan(),
          TextSpan(),
        ],
      ),
      style: model.style?.parse,
      textAlign: model.textAlign,
      textDirection: model.textDirection,
      softWrap: model.softWrap,
      overflow: model.overflow,
      textScaleFactor: model.textScaleFactor,
      maxLines: model.maxLines,
      semanticsLabel: model.semanticsLabel,
      textWidthBasis: model.textWidthBasis,
      selectionColor: model.selectionColor.toColor,
    );
  }

This way it can cater to both needs without much work or confusion.

[RodolfoSilva]

I like this approach. I was wondering if there is any trade off in not using the Text widget?

[divyanshub024]

There can't be any trade-off since all text widgets are a wrapper of Rich Text.

[RodolfoSilva]

I think we can go with your approach.

[divyanshub024]

Here is the PR #158

[kushalmahapatro]

There is one, which I recently noticed, for Text.rich or RichText, the default textScaleFactor is set to 1.0, which doesn't respect the text size set as OS level.

we have to set it to MediaQuery.textScaleFactorOf(context).

And I guess this might have been handled over here, correct me If I am wrong.

 textScaleFactor: model.textScaleFactor,