flutter_portabletext

Description:

flutter portabletext

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
copied to clipboard
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),
),
),
copied to clipboard
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,
copied to clipboard
Custom fields will arrive soon.
Breaking change might happens in following versions the project is still early on.