[Flutter][webview_flutter]WebViewのサイズを変えるには？

どうも、ちょげ(@chogetarou)です。

webview_flutterパッケージのWebViewのサイズを変える方法を紹介します。

方法

WebViewのサイズを変えるには、Containerを使います。

まず、WebViewをContainerでラップします。

そして、Containerの引数「height」に高さ、引数「width」に横幅を指定します。

Container(
  height: 高さ,
  width: 横幅,
  child: WebView(・・・),
),

Containerの引数「height」と引数「width」に指定したサイズが、WebViewのサイズになります。

使用例

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Sample'),
      ),
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Container(
              height: 500,
              width: 300,
              child: WebView(
                initialUrl: 'https://www.choge-blog.com',
                onPageStarted: (url) {
                  setState(() {
                    _isLoading = true;
                  });
                },
                onPageFinished: (url) {
                  setState(() {
                    _isLoading = false;
                  });
                },
                javascriptMode: JavascriptMode.unrestricted,
              ),
            ),
          ),
          if (_isLoading)
            Align(
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
            ),
        ],
      ),
    );
  }
}