Flutter WebView 尺寸扩大

Question

I have this canvas clock. It is responsive and can adjust every screen size. It is rendered in browsers normally and there is no problem, but

when I am using Flutter WebView widget, the clock increases in size step-by-step. I mean that at first it has normal size, but on every tic it grows, until it reach specific size and after that it stops growing. (In browsers it has stable size)

This is it max size. From here it stops growing:D

CODE:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);

    @override
    initState() {
      super.initState();
      if (Platform.isAndroid) WebView.platform = AndroidWebView();
    }

    return Scaffold(
        appBar: AppBar(title: Text('hi')),
        body: Container(
          width: 400,
          height: 500,
          child: const WebView(
            javascriptMode: JavascriptMode.unrestricted,
            initialUrl: 'http://canvasclock.zuka2001.repl.co/',
          ),
        ));
  }
}

How can I stop this clock from growing?

Answer 1

You can add width and height same as the device

body: Container(
          width: mediaQuery.size.width,
          height: mediaQuery.size.height,
          child: const WebView(
            javascriptMode: JavascriptMode.unrestricted,
            initialUrl: 'http://canvasclock.zuka2001.repl.co/',
          ),
        )

Answer 2

Instead of using hardcoded container size use dynamic size using media query.

width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,

and you webview will take as per your device size and other things will be managed by you website.

Answer 3

I think the problem is that your initState is inside build function. Because initState is meant to be called outside build Function to represent the first state of widget being built. but now it's being called while building the widget, so that is causing this weird behavior.