Flutter Layout error: Using webview in tabbed content

Question

Im new to flutter and watched 2 tutorials, one on creating a tabbed app and one on webview. unfortunately I am unable to make them work together. I get a layout error.

Here is my code:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Hydra Sense Control'),
            bottom: TabBar(
              isScrollable: true,
              tabs: choices.map<Widget>((Choice choice) {
                return Tab(
                  text: choice.title,
                  icon: Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice) {
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: ChoicePage(
                  choice: choice,
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class Choice {
  final String title;
  final IconData icon;
  final String link;
  const Choice({this.title, this.icon, this.link});
}

const List<Choice> choices = <Choice>[
  Choice(
      title: 'DuetWebControl',
      icon: Icons.settings,
      link: 'https://google.com'),
  Choice(title: 'Cameras', icon: Icons.videocam, link: 'https://yahoo.com'),
  Choice(
      title: 'Thingiverse',
      icon: Icons.cloud_download,
      link: 'https://thingiverse.com'),
  Choice(
      title: 'HevORT Forums',
      icon: Icons.description,
      link: 'https://forums.hevort.com'),
  Choice(title: 'About Hydra', icon: Icons.info, link: 'https://youtube.com'),
];

class ChoicePage extends StatelessWidget {
  const ChoicePage({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.headline4;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(
              choice.icon,
              size: 150.0,
              color: textStyle.color,
            ),
            Text(
              choice.title,
              style: textStyle,
            ),
            WebView(
                initialUrl: choice.link,
                javascriptMode: JavascriptMode.unrestricted)
          ],
        ),
      ),
    );
  }
}

Also I would like to add functionality to refresh the page or go back and forth just like in ios. swipe left to go back and swipe right to go forward and swipe down to refresh.

Just a noob trying to make a small app.

Answer 1

To prevent that error you can simply wrap that WebView in Expanded widget like this:

Expanded(
              child: WebView(
                  initialUrl: choice.link,
                  javascriptMode: JavascriptMode.unrestricted),
            )