Flutter中WebView下面彈出內容佈局

在這裏插入圖片描述

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

class TranformWebViewBottom extends StatefulWidget {
  @override
  _TranformWebViewBottomState createState() => _TranformWebViewBottomState();
}

class _TranformWebViewBottomState extends State<TranformWebViewBottom> {
  double _height = 0;
  Color _color = Colors.red;
  @override
  Widget build(BuildContext context) {
    var duration = Duration(seconds: 2);
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView底部彈出動畫'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('彈出'),
        onPressed: (){
          setState(() {
            _height = 200;
            _color = Colors.blue;
          });
        },
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
                child: InAppWebView(
                  initialUrl: "https://item.m.jd.com/ware/view.action?wareId=100003582705&sid=null",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
  
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {
  
                  },
                  onLoadStop: (InAppWebViewController controller, String url) {
  
                  },
                ),
              ),
          ),
          AnimatedContainer(
              duration: duration,
              height: _height,
              width: MediaQuery.of(context).size.width,
              color: _color,
              child: Text(
                  "AnimatedContainer",
                  style: TextStyle(color: Colors.white),
                ),
            ),
        ],
      )
    );
  }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章