I tried the solution stated in this link, by setting the bodyLarge, bodyMedium, and bodySmall fontSize values in the TextTheme as follows but it did not apply to the rendered webpage.
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
textTheme: const TextTheme(
bodyLarge: TextStyle(fontSize: 32.0),
bodyMedium: TextStyle(fontSize: 28.0),
bodySmall: TextStyle(fontSize: 24.0),
),
),
routes: {
'/': (context) => const MyWebViewMain(),
'/webViewContainer': (context) => const WebViewContainer(),
},
),
);
I am using flutter.dev's webview_flutter package in my Flutter application to render web page in my app. I'm trying to set a larger font size so that the text is clearly visible. I tried the above with no success.
How can I set the font size of the rendered webpage using webview_flutter package in my Flutter application?
Here's my full code:
main.dart:
import 'package:brahmakumaris_daily_murli/web_view_container.dart'; import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
textTheme: const TextTheme(
bodyLarge: TextStyle(fontSize: 32.0),
bodyMedium: TextStyle(fontSize: 28.0),
bodySmall: TextStyle(fontSize: 24.0),
),
),
routes: {
'/': (context) => const MyWebViewMain(),
'/webViewContainer': (context) => const WebViewContainer(),
},
),
);
class MyWebViewMain extends StatefulWidget {
const MyWebViewMain({super.key});
@override
State<MyWebViewMain> createState() => _MyWebViewMainState();
}
class _MyWebViewMainState extends State<MyWebViewMain> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text("Brahmakumari's Daily Murli"),
),
body: content(),
);
}
Widget content() {
return Center(
child: ElevatedButton(
onPressed: () {
// navigate to webview container screen
Navigator.of(context).pushNamed('/webViewContainer');
},
child: const Text("Open Today's Murli"),
),
);
}
}
web_view_container.dart:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewContainer extends StatefulWidget {
const WebViewContainer({super.key});
@override
State<WebViewContainer> createState() => _WebViewContainerState();
}
class _WebViewContainerState extends State<WebViewContainer> {
final controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse('https://bkthai.org/murli/'));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Today's Murli"),
),
body: WebViewWidget(controller: controller),
);
}
}
UPDATE 01: From the help of the web, I modified a part of my code to the following:
final controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..loadRequest(Uri.parse('https://bkthai.org/murli/'))
..runJavaScript('javascript: var style = document.createElement(\'style\');'
'style.innerHTML = \'.* {font-size: 52px !important;}\';'
'document.head.appendChild(style);');
But this could not change the font size of the rendered webview.