CODEWITHSUNDEEP
flutterdartandroid-webview
Al C
Al C

Reputation: 5377

flutter - View a web page inside a container

I'm trying to create a master-detail type container starting with a column of ListTiles on the left side of the screen. When a user taps on an item, a preset URL will then be displayed on the rest of the screen. Tapping a different item displays a different preset URL.

I've looked at the Flutter WebView Plugin and and webview_flutter packages, but either I don't understand them well enough (quite possible!) or they can't yet do everything I want them to to do.

Beside what I just mentioned, if possible I'd also like the web pages to open zoomed to fit the space they're in, but still be pinchable to other sizes.

p.s. I'm new to Flutter and am also confused about widget construction and memory management. If I try using something like a WebView widget, I don't know whether I just code a WebView widget every time I want to open a page, or if I somehow create a single WebView widget, add a controller, and code .loadFromUrl() methods.

Upvotes: 2

Views: 9273

Answers (2)

Malek Tubaisaht
Malek Tubaisaht

Reputation: 1387

Just wrap the webview inside a SizedBox

SizedBox(
   height: 300,
   child: WebView()
)

Upvotes: 1

Can
Can

Reputation: 1876

You can create a Row with two children. First children will be ListView that will be consisted of ListTiles. Second children will be the WebView. When a user taps on the list tile, load the url with the controller. There is no need to rebuild the WebView every time in your case

example

Example by using webview_flutter:

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  WebViewController _controller;

  List pages = ["https://google.com", "https://apple.com"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      children: <Widget>[
        Container(
          width: 300,
          child: ListView.builder(
            itemCount: pages.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(pages[index]),
                onTap: () {
                  if (_controller != null) {
                    _controller.loadUrl(pages[index]);
                  }
                },
              );
            },
          ),
        ),
        Expanded(
          child: WebView(
            onWebViewCreated: (WebViewController c) {
              _controller = c;
            },
            initialUrl: 'https://stackoverflow.com',
          ),
        ),
      ],
    ));
  }
}

Upvotes: 1

Related Questions