0

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.

2
  • The googles say it's inheriting the system settings, and that you can inject CSS to change it. Does that help? Commented Oct 17, 2024 at 2:21
  • 1
    @RandalSchwartz, thankyou for the response. I will learn and try that. Commented Oct 17, 2024 at 2:32

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.