flutter_portabletext 0.0.4

Render PortableText in Flutter.

Render PortableText used in Sanity using Flutter.

Features

Render the RichText used in Sanity.io following the PortableText specifications.

Getting started

Install the package using

flutter pub add flutter_portabletext

Usage

    List<PortableText>? portableText;
    @override
    void initState() {
      super.initState();

      initPortableTextWithSanity() async {
        final sanityClient = SanityClient(
          dataset: sanityVariable['dataset']!,
          projectId: sanityVariable['projectId']!,
        );

        final response = await sanityClient.fetch('*[_type == "post"]');

        final content = response[0]['content'] as List<dynamic>;

        final List<PortableText> listPortableText = [];
        for (var dynamicPort in content) {
          final portableText = PortableText.fromJson(dynamicPort);
          listPortableText.add(portableText);
        }
        setState(() {
          portableText = listPortableText;
        });
      }

      initPortableTextWithSanity();

      initPortableTextWithJson() async {
        rootBundle.loadString('assets/ex.json').then((value) async {
          final data = await json.decode(value) as List<dynamic>;
          final List<PortableText> listPortableText = [];
          for (var dynamicPort in data) {
            final portableText = PortableText.fromJson(dynamicPort);
            listPortableText.add(portableText);
          }
          setState(() {
            portableText = listPortableText;
          });
        });
      }

      // initPortableTextWithJson();
    }

    ...
    SizedBox(
        width: double.infinity,
        child: PortableTextRichText(
        portableText: portableText,
        onTapLink: (value) => print(value),
        ),
    ),

Additional information

If you want to change the values please update as followed.

    this.mapStyle = const {
      'h1': TextStyle(fontSize: 24),
      'h2': TextStyle(fontSize: 22),
      'h3': TextStyle(fontSize: 20),
      'h4': TextStyle(fontSize: 18),
      'h5': TextStyle(fontSize: 16),
      'h6': TextStyle(fontSize: 14),
      'blockquote': TextStyle(fontSize: 12),
    },
    this.quoteStyle = const TextStyle(
      fontSize: 12,
    ),
    this.normalStyle = const TextStyle(fontSize: 10),
    this.externalLinkColor = const Color(0xFF0645AD),
    this.codeBackgroundColor = Colors.grey,
    this.externalLinkDecoration = TextDecoration.underline,

Custom fields will arrive soon. Breaking change might happens in following versions the project is still early on.